// @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: [],
    width:0
  },
  properties: {
    order: {
      type: Number,
      value: 0
    },
    contentObj: {
      type: Object,
      value: {},
      observer: function (value) {
        let chartData = []
        let echartsColorList = []
        console.log('::::::::::::' + value.evaBadPercent)
        if (value.noEvaPercent == 0 && value.evaBadPercent == 0 && value.evaGoodPercent == 0 && value.evaVeryGoodPercent == 0){
          if (value.noEvaPercent == 0) {
            chartData.push({
              value: value.noEvaPercent,
              name: '未评价'
            })
            echartsColorList.push('#29B9A5')
          }
          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.evaVeryGoodPercent == 0) {
            chartData.push({
              value: value.evaVeryGoodPercent,
              name: '非常满意'
            })
            echartsColorList.push('#FD6A62')
          }
        }else{
          if (value.noEvaPercent > 0) {
            chartData.push({
              value: value.noEvaPercent,
              name: '未评价'
            })
            echartsColorList.push('#29B9A5')
          }
          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.evaVeryGoodPercent > 0) {
            chartData.push({
              value: value.evaVeryGoodPercent,
              name: '非常满意'
            })
            echartsColorList.push('#FD6A62')
          }
        }
        
        this.setData({
          // @ts-ignore
          chartData: chartData,
           // @ts-ignore
          echartsColorList: echartsColorList
        })
      }
    }
  },
  lifetimes: {
    attached () {
      this.setData({
        width:wx.getSystemInfoSync().windowWidth
      })
      // @ts-ignore
      this.ecComponent = this.selectComponent('#mychart-dom-bar')
      this.init()
    },
    ready(){
        wx.createSelectorQuery().in(this).selectAll('.street-name').boundingClientRect((res)=>{
          console.log(this.data.width)
          let height = this.data.width > 500?"60":"30"
          if(res[0].height>height){
            this.setData({
              "contentObj.overHeight": true
            })
          }
        }).exec()
    }
  },
  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
      })
    }
  }
})