import ReactEcharts from 'echarts-for-react';
import { get, map, merge } from 'lodash';
import { useMemo, useState } from 'react';
const BothwayBar = (props: any) => {
  const [yAxisData, setyAxisData] = useState([
    '>65',
    '60-65',
    '50-60',
    '40-50',
    '30-40',
    '<30',
  ]);
  const { result } = props;
  // console.log(result);
  
  let top = 60;
  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: {
      //   trigger: 'item',
      //   confine: true,
      //   formatter: '{b0}: {c0}',
      //   borderWidth: '0',
      //   backgroundColor: 'rgba(73,81,92,.95)', //背景颜色
      //   textStyle: {
      //     color: '#fff', //字体颜色
      //   },
      // },
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        borderWidth: '0',
        backgroundColor: 'rgba(73,81,92,.95)', //背景颜色
        textStyle: {
          color: '#fff', //字体颜色
        },
      },
      // legend: {
      //     left: 'center',
      //     bottom: 24,
      //     itemWidth: 15,
      //     itemHeight: 11,
      //     itemGap: 20,
      //     borderRadius: 4,
      //     textStyle: {
      //         color: '#262C41',
      //         fontSize: 14
      //     },
      //     data: legendData
      // },
      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: true,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        {
          gridIndex: 1,
          show: true,
        },
        {
          gridIndex: 2,
          type: 'value',
          axisLabel: {
            show: true,
          },
          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: [8, 0, 0, 0],
            fontSize: 16,
            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: false,
          // axisLine: {
          //   lineStyle: {
          //     color: '#E0E0E0',
          //   },
          // },
          axisTick: {
            show: false,
          },
          data: yAxisData,
        });
      }),
      series: [
        {
          name: get(data, 'male.name'),
          label: {
            position: 'left',
          },
          itemStyle: {
            color: 'rgb(50, 177, 255)',
            //   barBorderRadius: [4, 0, 0, 4],
          },
          data: map(get(data, 'male.data'), (d) => d.value),
        },
        {
          xAxisIndex: 2,
          yAxisIndex: 2,
          name: get(data, 'female.name'),
          label: {
            position: 'right',
          },
          itemStyle: {
            color: 'rgb(255, 155, 93)',
            //   barBorderRadius: [0, 4, 4, 0],
          },
          data: map(get(data, 'female.data'), (d) => d.value),
        },
      ].map((item) =>
        merge(item, {
          type: 'bar',
          barWidth: 11,
          label: {
            show: true,
            //   fontFamily: 'Rubik-Medium',
            fontSize: 16,
            distance: 10,
            color: '#fff',
          },
        }),
      ),
    };
  }, [yAxisData,data]);

  return (
    <ReactEcharts
      option={option} // option：图表配置项
      style={{ width: '800px', height: '300px' }}
    />
  );
};

export default BothwayBar;
