import * as echarts from '../../../../ec-canvas/echarts';
import { satisfactionGroup, event12345Group } from "../../../../utils/statisticsApi";

var chart;

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素比
  });
  canvas.setChart(chart);
  return chart;
}

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return [year, month, day].map(formatNumber).join('-')
}
const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}
Component({
  properties: {
    typeCondition: {
      type: Number,
      value: 0,
      observer(val) {
        console.log(val, 11)
        this.getData()
      }
    }
  },
  data: {
    ec: {
      lazyLoad: true
      // onInit: initChart
    },
    tabList: [{
      label: "按满意度调查/社区自查结果",
      value: 1
    }, {
      label: '按12345热线投诉结果',
      value: 2
    }],
    tabValue: 1
  },
  lifetimes: {
    ready() {
      this.getData()
    }
  },
  methods: {
    tabChange({ detail }) {
      this.setData({
        tabValue: this.data.tabList[detail].value
      })
      this.getData()
    },
    getData() {
      this.selectComponent('#smyddcSqmydzc').init((canvas, width, height, dpr) => {
        chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // 像素比
        });
        canvas.setChart(chart);
        let params = {
          startTime: '',
          endTime: ''
        }
        let now = new Date();
        if (this.data.typeCondition === 0) {
          params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 1))
        }
        if (this.data.typeCondition === 1) {
          params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 1));
        }
        if (this.data.typeCondition === 2) {
          params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 2));
        }
        if (this.data.typeCondition === 3) {
          params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 5));
        }
        if (this.data.typeCondition === 4) {
          params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 11));
        }

        if (this.data.typeCondition === 1) {
          params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59))
        } else {
          params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59))
        }
        console.log(params)
        console.log(this.data.tabValue, 'this.data.tabValue')
        if (this.data.tabValue === 1) {
          satisfactionGroup(params).then(({ data }) => {
            var dataname = data.map(item => item.name)
            var datavaule = data.map(item => item.blueNum ? item.blueNum : 0)
            var datavaule2 = data.map(item => item.yellowNum ? item.yellowNum : 0)
            var indicator = []
            let max = Math.max(...datavaule, ...datavaule2)
            console.log(max)
            var datamax = new Array(datavaule.length).fill(max)
            for (var i = 0; i < dataname.length; i++) {
              indicator.push({
                name: dataname[i],
                max: datamax[i],
              })
            }
            indicator[0].axisLabel = {show: true}

            let legendName = ['省满意度调查各项\n不满意人数', '社区满意度自查各项\n不满意人数']
            let series = [{
              name: "省满意度调查各项\n不满意人数",
              type: "radar",
              symbol: "circle",
              symbolSize: 0,
              areaStyle: {
                normal: {
                  color: 'rgba(58,128,231,0.36)',
                }
              },
              axisLabel: {
                show: true,
              },
              triggerEvent: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "transparent",
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#527AA8",
                },
              },
              itemStyle: {
                color: '#3A80E7',
                borderColor: '#3AB7FF',
                borderWidth: 1,
              },
              lineStyle: {
                normal: {
                  color: "#3AB7FF",
                  width: 2
                }
              },
              data: [datavaule]
            }, {
              name: "社区满意度自查各项\n不满意人数",
              type: "radar",
              symbol: "circle",
              symbolSize: 0,
              areaStyle: {
                normal: {
                  color: 'rgba(170, 216, 255, 0)',
                }
              },
              itemStyle: {
                color: '#EB8E16',
                borderColor: '#EF9700',
                borderWidth: 1,
              },
              lineStyle: {
                normal: {
                  color: "#EF9700",
                  width: 2
                }
              },
              data: [datavaule2]
            }]
            var option = {
              tooltip: {
                show: true,
                trigger: "item",
                textStyle: {
                  color: '#000',
                  fontSize: 14
                },
                formatter(params) {
                  // console.log(params)
                  if (params.name === '') {
                    return '';
                  }
                  return `${params.name} : ${params.percent}%`;
                },
              },
              legend: {
                show: true,
                textStyle: {
                  color: '#999999',
                  rich: {
                    name: {
                      fontSize: 14,
                      lineHeight: 19,
                      padding: [20, 0, 0, 0]
                    },
                  }
                },
                itemWidth: 6,
                itemHeight: 6,
                y: 'bottom',
                x: 'center',
                formatter: name => {
                  return `{name|${name}}`
                },
                data: legendName,
              },
              radar: {
                center: ["50%", "40%"],
                radius: "50%",
                startAngle: 90,
                splitNumber: 5,
                splitArea: {
                  areaStyle: {
                    color: 'transparent'
                  }
                },
                name: {
                  textStyle: {
                    color: '#333333',
                    fontSize: 14,
                    borderRadius: 3,
                  }
                },
                indicator: indicator
              },
              axisLabel: {
                show: true,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(226,226,226,0.28)"
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(226,226,226,0.61)"
                }
              },
              series
            };
            chart.setOption(option, true);
          })
        } else {
          event12345Group().then(({ data }) => {
            var dataname = data.map(item => item.name)
            var datavaule = data.map(item => item.blueNum ? item.blueNum : 0)
            var datavaule2 = data.map(item => item.yellowNum ? item.yellowNum : 0)
            var indicator = []
            let max = Math.max(...datavaule, ...datavaule2)
            console.log(max)
            var datamax = new Array(datavaule.length).fill(max)
            for (var i = 0; i < dataname.length; i++) {
              indicator.push({
                name: datavaule[i] + '\n' + dataname[i],
                max: datamax[i],
              })
            }
            let legendName = ['12345热线事件\n上报人数']
            let series = [{
              name: "12345热线事件\n上报人数",
              type: "radar",
              symbol: "circle",
              symbolSize: 0,
              areaStyle: {
                normal: {
                  color: 'rgba(58,128,231,0.36)',
                }
              },
              itemStyle: {
                color: '#3A80E7',
                borderColor: '#3AB7FF',
                borderWidth: 1,
              },
              lineStyle: {
                normal: {
                  color: "#3AB7FF",
                  width: 2
                }
              },
              data: [datavaule]
            },]
            var option = {
              tooltip: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 14
                },
                formatter(params) {
                  // console.log(params)
                  if (params.name === '') {
                    return '';
                  }
                  return `${params.name} : ${params.percent}%`;
                },
              },
              legend: {
                show: true,
                textStyle: {
                  color: '#999999',
                  rich: {
                    name: {
                      fontSize: 14,
                      lineHeight: 19,
                      padding: [20, 0, 0, 0]
                    },
                  }
                },
                itemWidth: 6,
                itemHeight: 6,
                y: 'bottom',
                x: 'center',
                formatter: name => {
                  return `{name|${name}}`
                },
                data: legendName,
              },
              radar: {
                center: ["50%", "40%"],
                radius: "50%",
                startAngle: 90,
                splitNumber: 5,
                splitArea: {
                  areaStyle: {
                    color: 'transparent'
                  }
                },
                axisLabel: {
                  show: false,
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "rgba(226,226,226,0.28)"
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "rgba(226,226,226,0.61)"
                  }
                },
                name: {
                  textStyle: {
                    color: '#333333',
                    fontSize: 14,
                    borderRadius: 3,
                  }
                },
                indicator: indicator
              },
              series
            };
            chart.setOption(option, true);
          })
        }
        return chart;
      })
    }
  }
});