import echarts from '../../../components/ec-canvas/echarts';
import dayjs from 'dayjs';

function setOption(chart, series, xAxisMonth) {
  const option = {
    title: {
      text: '整改趋势',
      // subtext: '巡查问题整改数统计',
    },
    grid: {
      left: '8%',
      right: '12%',
      bottom: '10%',
    },
    legend: {
      show: true,
      type: 'scroll',
      left: 'right',
    },
    xAxis: {
      // name: '月份',
      nameLocation: 'middle',
      type: 'category',
      // 两边留白
      boundaryGap: true,
      data: xAxisMonth,
      nameTextStyle: {
        fontSize: 10,
      },
      axisLabel: {
        rotate: 45,
      },
    },
    yAxis: [
      {
        type: 'value',
        name: '数量',
        minInterval: 1,
        offset: 5,
        axisLine: {
          symbol: 'arrow',
          lineStyle: {
            type: 'dashed',
          },
        },
        axisLabel: {
          fontSize: 10,
        },
      },
      {
        type: 'value',
        name: '整改率',
        min: 0,
        max: 100,
        offset: 4,
        minInterval: 20,
        axisLine: {
          symbol: 'arrow',
        },
        axisLabel: {
          formatter: '{value} %',
          fontSize: 10,
        },
      },
    ],
    series: series,
  };
  chart.setOption(option);
}
/**
 * 巡查监管问题整改数量统计相关
 */
export const useSummaryChart = Behavior({
  data: {
    ec: {
      lazyLoad: true,
    },
  },
  ready() {
    const component = this.selectComponent('#mychart-dom-bar');
    this.initChart(component);
  },
  methods: {
    initChart(component) {
      component.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr, // new
        });
        this.chart = chart;
        this.init();
        return chart;
      });
    },

    // 根据当前选择的时间范围，确定x轴月份坐标
    getXAxisMonth() {
      const xAxisMonth = [];
      const { diffMonth, recentTimeValue } = this.data;
      let now = dayjs();
      xAxisMonth.unshift(now.month() + 1 + '月');
      for (let i = 0; i < diffMonth; i++) {
        now = now.subtract(1, 'month');
        xAxisMonth.unshift(now.month() + 1 + '月');
      }
      return xAxisMonth;
    },

    refreshChart() {
      const problems = [];
      const changes = [];
      const xAxisMonth = this.getXAxisMonth();
      xAxisMonth.forEach(m => {
        problems.push(0);
        changes.push(0);
      });
      this.data.subtaskSummary.forEach(s => {
        const month = dayjs(s.stPlanTime).month() + 1 + '月';
        const index = xAxisMonth.findIndex(value => {
          return month == value;
        });
        if (index != -1) {
          problems[index] += s.proNum;
          changes[index] += s.changeNum;
        }
      });
      const datas = [problems, changes];
      const series = ['问题数', '整改数', '整改率'].map((name, i) => {
        if (name == '整改率') {
          const list = datas[0].map((v, i2) => {
            return v == 0 ? '' : Math.round((datas[1][i2] / v) * 1000) / 10;
          });
          return {
            name,
            type: 'bar',
            barWidth: '10%',
            barMaxWidth: '6',
            yAxisIndex: 1,
            label: {
              show: true,
              formatter: '{c}%',
              position: 'top',
              rotate: 45,
              // color: '#fac858'
            },
            data: list,
          };
        } else {
          return {
            name,
            type: 'bar',
            // stack: 'total',
            barWidth: '15%',
            barMaxWidth: '10',
            yAxisIndex: 0,
            label: {
              show: false,
              // formatter: params => Math.round(params.value * 1000) / 10 + '%',
            },
            data: datas[i],
          };
        }
      });
      setOption(this.chart, series, xAxisMonth);
    },
  },
});