/** @format */

import _ from 'lodash';
import React, { useEffect, useState } from 'react';

import { customMergeWith } from '../../../utils';
import { globalTheme, ThemeData } from '../../../utils/theme';
import Echarts from '../Echarts';
import { Container } from './styled';

interface SCBarChartYProps {
  size?: {
    width: number;
    height: number;
  };
  option?: Record<string, any>;
  data?: Record<string, any>;
  theme?: ThemeData;
}

const SCBarChartY = (props: SCBarChartYProps) => {
  const {
    size = { height: 500, width: 1000 },
    // option = {},
    data,
    data: { xData = [], yData = [] } = {},
    theme = {
      /**
       * 文本颜色
       */
      textColor: 'red',
      /**
       * 组件主色
       */
      primaryColor: '#50E1',
      secondColor: '#FDAFFF',
      thirdColor: '#DDD',
      colorList: ['#50E1', '#FDA568', '#DDD'],
    },
  } = props;

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    legend: {
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: [
        [320, 302, 301, 334, 390, 330, 320],
        [120, 132, 101, 134, 90, 230, 210],
        [220, 182, 191, 234, 290, 330, 310],
        [150, 212, 201, 154, 190, 330, 410],
        [820, 832, 901, 934, 1290, 1330, 1320],
      ],
    },
    yAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    },
    series: [
      {
        name: '直接访问',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
          position: 'insideRight',
        },
      },
      {
        name: '邮件营销',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
          position: 'insideRight',
        },
      },
      {
        name: '联盟广告',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
          position: 'insideRight',
        },
      },
      {
        name: '视频广告',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
          position: 'insideRight',
        },
      },
      {
        name: '搜索引擎',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
          position: 'insideRight',
        },
      },
    ],
  };

  return (
    <Container>
      <Echarts size={size} option={option} />
    </Container>
  );
};

export default SCBarChartY;