import HncyCard from '@/pages/Home_v_2504/components/common/Card';
import services from '@/services';
import { useRequest } from 'ahooks';
import ReactEcharts from 'echarts-for-react';
import { get, map, merge } from 'lodash';
import { useMemo, useState } from 'react';
import './index.less';

export default function WorkersAge() {
  const [yAxisData, setyAxisData] = useState([
    '>65',
    '60-65',
    '50-60',
    '40-50',
    '30-40',
    '<30',
  ]);
  const { data: result } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-hyyxqk-nlfbnn',
    }).then((res) => {
      if (res.code === 200) {
        return res?.data?.data?.records?.[0]?.result;
      }
    }),
  );

  let top = 30;
  let bottom = 60;
  let data = useMemo(() => {
    if (!result) return;
    return {
      female: {
        name: '女性',
        data: [
          {
            value: result['Over 65']?.女,
            label: '>65',
          },
          {
            value: result['60-65']?.女,
            label: '60-65',
          },
          {
            value: result['50-59']?.女,
            label: '50-60',
          },
          {
            value: result['40-49']?.女,
            label: '40-50',
          },
          {
            value: result['30-39']?.女,
            label: '30-40',
          },
          {
            value: result['Under 30']?.女,
            label: '<30',
          },
        ],
      },
      male: {
        name: '男性',
        data: [
          {
            value: result['Over 65']?.男,
            label: '>65',
          },
          {
            value: result['60-65']?.男,
            label: '60-65',
          },
          {
            value: result['50-59']?.男,
            label: '50-60',
          },
          {
            value: result['40-49']?.男,
            label: '40-50',
          },
          {
            value: result['30-39']?.男,
            label: '30-40',
          },
          {
            value: result['Under 30']?.男,
            label: '<30',
          },
        ],
      },
    };
  }, [result]);

  const option = useMemo(() => {
  
    return {
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        borderWidth: '0',
        backgroundColor: 'rgba(73,81,92,.95)', //背景颜色
        textStyle: {
          color: '#fff', //字体颜色
        },
      },

      grid: [
        {
          left: '12%',
          width: '28%',
          containLabel: true,
          bottom,
        },
        {
          left: '52%',
          width: '0%',
          bottom: bottom 
        },
        {
          right: '12%',
          width: '28%',
          containLabel: true,
          bottom,
        },
      ].map((item) =>
        merge(
          {
            top,
          },
          item,
        ),
      ),
      xAxis: [
        {
          type: 'value',
          inverse: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        {
          gridIndex: 1,
          show: false,
        },
        {
          gridIndex: 2,
          type: 'value',
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
      ].map((item) =>
        merge(item, {
          axisLabel: {
            color: '#949AA8',
            margin: 0,
          },
          splitLine: {
            lineStyle: {
              color: '#E0E0E0',
              type: 'dashed',
            },
          },
        }),
      ),
      yAxis: [
        {
          position: 'right',
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        {
          gridIndex: 1,
          position: 'center',
          axisLabel: {
            align: 'center',
            padding: [0, 0, 30, 0],
            color: `rgb(203, 237, 255)`,
          },
          axisLine: {
            show: false,
          },
        },
        {
          gridIndex: 2,
          position: 'left',
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
      ].map((item) => {
        return merge(item, {
          type: 'category',
          inverse: true,
          // axisLine: {
          //   lineStyle: {
          //     color: '#E0E0E0',
          //   },
          // },
          axisTick: {
            show: false,
          },
          data: yAxisData,
        });
      }),

      series: [
        {
          name: get(data, 'male.name'),
          label: {
            position: 'left',
            distance: 5,
            color: 'rgb(63, 155, 255)',
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                { offset: 0, color: 'rgb(0, 149, 255)' },
                { offset: 1, color: 'rgb(51, 255, 220)' },
              ],
            },
            barBorderRadius: [13, 13, 13, 13],
          },
          data: map(get(data, 'male.data'), (d) => d.value),
        },

        {
          xAxisIndex: 2,
          yAxisIndex: 2,
          name: get(data, 'female.name'),
          label: {
            position: 'right',
           
            color: 'rgb(255, 129, 72)',
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
               
                { offset: 0, color: 'rgb(255, 157, 66)' },
                { offset: 1, color: 'rgb(255, 121, 121)' },
              ],
            },
            barBorderRadius: [13, 13, 13, 13],
          },
          data: map(get(data, 'female.data'), (d) => d.value),
        },
      ].map((item) =>
        merge(item, {
          type: 'bar',
          barWidth: 12,
          label: {
            show: true,
            fontWeight: 700,
            fontSize: 16,
            distance: 10,
          },
        }),
      ),
    };
  }, [yAxisData, data]);

  return (
    <HncyCard
      title="环卫人员年龄"
      style={{
        height: '311px',
      }}
      extra={
        <div className="gender-wrapper">
          <div>
            <div className="dot blue"></div>男
          </div>
          <div>
            <div className="dot yellow"></div>女
          </div>
        </div>
      }
    >
      <>
        <ReactEcharts
          option={option} 
          style={{ width: '100%', height: '300px' }}
        />
      </>
    </HncyCard>
  );
}
