// @ts-ignore
import * as echarts from '../../../../components/ec-canvas/echarts.js'

function setOption(chart: any, chartData: AnyArray, echartsColorList: AnyArray) {
  const option = {
    color: echartsColorList,
    series: [
      {
        type: 'pie',
        radius: ['72%', '95%'],
        silent: true,
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        labelLine: {
          show: false,
          normal: {
            show: false
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: '2'
        },
        data:chartData
      }
    ]
  }
  chart.setOption(option)
}

Component({
  data: {
    ec: {
      lazyLoad: true
    },
    colorList: ['#fe6963', '#ffc600', '#e7a756', '#cfedec'],
    echartsColorList: [],
    chartData: []
  },
  properties: {
    order: {
      type: Number,
      value: 0
    },
    contentObj: {
      type: Object,
      value: {},
      observer: function (value) {
        let chartData = []
        let echartsColorList = []
        if (value.evaBadPercent == 0 && value.evaGoodPercent == 0 && value.evaVeryPercent == 0){
          if (value.evaBadPercent == 0) {
            chartData.push({
              value: value.evaBadPercent,
              name: '不满意'
            })
            echartsColorList.push('#63CFED')
          }
          if (value.evaGoodPercent == 0) {
            chartData.push({
              value: value.evaGoodPercent,
              name: '基本满意'
            })
            echartsColorList.push('#FFA270')
          }
          if (value.evaVeryPercent == 0) {
            chartData.push({
              value: value.evaVeryPercent,
              name: '非常满意'
            })
            echartsColorList.push('#FD6A62')
          }
        }else{
          if (value.evaBadPercent > 0) {
            chartData.push({
              value: value.evaBadPercent,
              name: '不满意'
            })
            echartsColorList.push('#63CFED')
          }
          if (value.evaGoodPercent > 0) {
            chartData.push({
              value: value.evaGoodPercent,
              name: '基本满意'
            })
            echartsColorList.push('#FFA270')
          }
          if (value.evaVeryPercent > 0) {
            chartData.push({
              value: value.evaVeryPercent,
              name: '非常满意'
            })
            echartsColorList.push('#FD6A62')
          }
        }
        
        this.setData({
          // @ts-ignore
          chartData: chartData,
           // @ts-ignore
          echartsColorList: echartsColorList
        })
      }
    }
  },
  lifetimes: {
    attached () {
      // @ts-ignore
      this.ecComponent = this.selectComponent('#mychart-dom-bar')
      this.init()
    }
  },
  methods: {
    // 点击按钮后初始化图表
    init () {
      // @ts-ignore
      this.ecComponent.init((canvas: any, width: any, height: any) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        setOption(chart, this.data.chartData, this.data.echartsColorList)
        return chart
      })
    },
    // 跳转详情
    navigateToDetail (e: AnyObject) {
      this.triggerEvent('navigateToDetail', { deptId: e.currentTarget.dataset.deptid, deptName: e.currentTarget.dataset.deptname})
    }
  }
})