import dayjs from 'dayjs';
import echarts from '../../components/ec-canvas/echarts';
import { fetchProblemsStatistic } from '../../services/inspection/fetchInspection';

function setOption(chart, data) {
  const option = {
    title: {
      text: '问题分布',
    },
    grid: {},
    legend: {
      show: true,
      type: 'scroll',
      orient: 'vertical',
      left: 'right',
      top: 'middle',
    },
    series: [
      {
        type: 'pie',
        data: data,
        right: '30%',
        center: ['45%', '50%'],
        radius: ['40%', '70%'],
        label: {
          show: true,
          position: 'inside',
          formatter: '{d}%',
        },
      },
    ],
  };
  chart.setOption(option);
}
/**
 * 巡查监管问题相关信息获取逻辑
 */
export const useProblems = Behavior({
  data: {
    problemsLoading: false,
    ec: {
      lazyLoad: true,
    },
  },
  ready() {
    const component = this.selectComponent('#mychart-dom-pie');
    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;
        chart.on('click', this.onChartClick);
        this.initFetch();
        return chart;
      });
    },

    fetchProblems(page) {
      const params = this._getParamsArea();
      return fetchProblemsStatistic(params).then(res => {
        this.refreshPieChart(res.data);
        this.summaryAnalysis(res.data);
        return res.head;
      });
    },

    refreshPieChart(data) {
      const chartData = data.map(item => {
        return {
          value: item.count,
          name: item.name,
        };
      });
      chartData.sort((a, b) => {
        return a - b;
      });
      if (this.chart) {
        this.setData({ chartData });
        setOption(this.chart, chartData);
        let name = null,
          value = null;
        if (chartData.length > 0) {
          name = chartData[0].name;
          value = chartData[0].value;
        }
        this.onChartClick({ name, value });
      }
    },

    summaryAnalysis(data) {
      const {time, inspection: v} = this.data
      // 组合行政区划
      let loc = '';
      loc += v.provinceName ? v.provinceName : '';
      loc += v.provinceName == v.cityName ? '' : v.cityName ? `${v.cityName}` : '';
      loc += v.districtName ? `${v.districtName}` : '';
      loc += v.townName ? `${v.townName}` : '';
      // 时间
      const timeText = dayjs(time).format('YYYY年MM月')

      // 总结
      let summaryText = '';
      let totalP = 0,
        totalC = 0;
      data.forEach(p => {
        totalP += p.count;
        totalC += p.changeCount;
      });
      const cPer = totalP == 0 ? '--' : Math.round((totalC / totalP) * 1000) / 10 + '%';
      summaryText = `${loc+timeText}共发现${data.length}种类型问题，问题总计${totalP}个，整改率${cPer}`;
      this.setData({ summaryText });
    },
  },
});