<template>
  <div ref="chartContainer" class="chartContainer" />
</template>

<script>
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'

export default {
  name: 'RightContentFaultAnalysis',
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'default-fault-analysis-id'
    },
    dataList: {
      type: Array,
      required: true
    },
    dataPeriod: {
      type: String,
      default: 'month'
    }
  },
  data() {
    let totalRate = 0
    const colors = [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          { color: '#FFFFFF00', offset: 0 },
          { color: '#FB418C00', offset: 0.1 },
          { color: '#FB418C', offset: 1 } // 红
        ],
        global: false
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          { color: '#DDB112', offset: 0 }, // 黄
          { color: '#DDB112b0', offset: 0.2 },
          { color: '#FFFFFF00', offset: 1 }
        ],
        global: false
      },
      {
        type: 'linear',
        x: 1,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [
          { color: '#FFFFFF00', offset: 0 },
          { color: '#49FBD600', offset: 0.1 },
          { color: '#74DC85', offset: 1 } // 浅绿
        ],
        global: false
      },
      {
        type: 'linear',
        x: 1,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [
          { color: '#FFFFFF00', offset: 0 },
          { color: '#1A99FF00', offset: 0.1 },
          { color: '#1A99FF', offset: 1 } // 兰
        ],
        global: false
      },
      {
        type: 'linear',
        x: 0,
        y: 0.5,
        x2: 1,
        y2: 0,
        colorStops: [
          { color: '#FFFFFF00', offset: 0 },
          { color: '#A691FF00', offset: 0.1 },
          { color: '#A691FF', offset: 1 } // 紫 3
        ],
        global: false
      },
      {
        type: 'linear',
        x: 0,
        y: 0.5,
        x2: 1,
        y2: 0,
        colorStops: [
          { color: '#FFFFFF00', offset: 0 },
          { color: '#49FBD600', offset: 0.1 },
          { color: '#49FBD6', offset: 1 } // 绿
        ],
        global: false
      }
    ]

    return {
      chart: null,
      // default configs
      configs: {
        title: {
          textAlign: 'center',
          textVerticalAlign: 'middle',
          left: '65%',
          top: '46%',
          text: '',
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 'normal'
          },
          itemGap: 5,
          subtext: '总数/片',
          subtextStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        legend: {
          selectedMode: false,
          top: '12%',
          bottom: 0,
          left: 0,
          orient: 'vertical',
          icon: 'none',
          itemGap: 8,
          itemWidth: 10,
          // 在下面动态设置
          formatter: name => {
            const testData = this.dataList

            let pieLegendVale = {}
            testData.filter((item, index) => {
              if (item.name === name) {
                pieLegendVale = item
              }
            })
            const color = ['c', 'd', 'h', 'e', 'f', 'g']
            const arr = [
              '{' + color[testData.findIndex(item => item.name === name)] + '|}',
              '{b|' + pieLegendVale.name + '}',
              '{a|' + pieLegendVale.value + '}'
            ]
            return arr.join(' ')
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 10,
                color: 'rgba(255, 255, 255, 0.7)',
                lineHeight: 16,
                width: 48,
                align: 'left'
              },
              b: {
                width: 40,
                align: 'left',
                fontSize: 10,
                color: 'rgba(255, 255, 255)'
              },
              c: {
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#FB418C'
              },
              d: {
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#DDB112'
              },
              h: {
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#74DC85'
              },
              e: {
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#1A99FF'
              },
              f: {
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#A691FF'
              },
              g: {
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#49FBD6'
              }
            }
          }
        },

        series: [
          {
            name: 'PieForm',
            type: 'pie',
            silent: true,
            center: ['66%', '56%'],
            radius: ['45%', '65%'],
            avoidLabelOverlap: true,
            label: {
              formatter: params => {
                const colorMap = ['first', 'second', 'sixth', 'third', 'fourth', 'fifth']
                return `{${colorMap[params.dataIndex]}|${params.percent} %}`
              },
              rich: {
                first: { color: '#FB418C', fontSize: 8 },
                second: { color: '#DDB112', fontSize: 8 },
                third: { color: '#1A99FF', fontSize: 8 },
                fourth: { color: '#A691FF', fontSize: 8 },
                fifth: { color: '#49FBD6', fontSize: 8 },
                sixth: { color: '#74DC85', fontSize: 8 }
              }
            },
            labelLine: {
              length: 5,
              length2: 5
            },
            itemStyle: {
              color: params => {
                /** 计算渐变方向的过程，只靠 dataIndex 不太行 */
                const { dataIndex, percent } = params
                const colorGradient = colors[dataIndex]
                if (totalRate + percent < 25) {
                  /** 也许这里需要完善，但目前工作良好 */
                  ;(() => {})()
                } else if (totalRate + percent < 50) {
                  colorGradient.x = 0
                  colorGradient.y = 0
                  colorGradient.x2 = 1
                  colorGradient.y2 = 1
                } else if (totalRate + percent >= 50 && dataIndex == 1) {
                  colorGradient.x = 1
                  colorGradient.y = 1
                  colorGradient.x2 = 0
                  colorGradient.y2 = 0
                } else if (totalRate + percent < 100) {
                  /** 也许这里需要完善，但目前工作良好 */
                  ;(() => {})()
                }

                totalRate += percent
                return colorGradient
              }
            },
            data: this.dataList
          }
        ]
      }
    }
  },

  watch: {
    dataList: function(val) {
      if (val && Array.isArray(val) && val.length) {
        this.applyChartOption(val)
      }
    }
  },

  mounted() {
    window.addEventListener('resize', () => {
      if (this.chart) {
        this.chart.resize()
        this.$nextTick(() => {
          // 重新绘制文本大小
          this.applyChartOption()
        })
      }
    })

    this.$nextTick(() => {
      // if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
      if (!this.chart) this.chart = echarts.init(this.$refs['chartContainer'])
      this.applyChartOption()
      this.chart.resize()
    })
  },

  methods: {
    calcFontsize(baseSize) {
      const beilv = document.documentElement.style.getPropertyValue('--beilv')
      return beilv * baseSize
    },

    applyChartOption(datalist) {
      const fs5 = this.calcFontsize(5 /** px*/)
      const fs8 = this.calcFontsize(8 /** px*/)
      const fs10 = this.calcFontsize(10 /** px*/)
      const fs12 = this.calcFontsize(12 /** px*/)
      const fs13 = this.calcFontsize(13 /** px*/)
      const fs18 = this.calcFontsize(18 /** px*/)
      const fs20 = this.calcFontsize(20 /** px*/)
      const legendTextFixWidth = this.calcFontsize(48 /** px*/)
      const legnedTop = this.calcFontsize(72 /** px*/)
      const legendTopRate = this.calcFontsize(30 /** % */)

      this.configs.title.text =
        this.dataPeriod === 'month'
          ? // 如果是月数据，单位为 千片
            this.dataList.reduce((prev, curr) => prev + curr.value * 1000, 0)
          : // 如果是日数据，单位为 片
            this.dataList.reduce((prev, curr) => prev + curr.value, 0)
      this.configs.title.textStyle.fontSize = fs20
      this.configs.title.subtextStyle.fontSize = fs13

      // this.configs.legend.top = legendTopRate + '%'
      this.configs.legend.top = legnedTop
      this.configs.legend.left = 3 + '%'
      this.configs.legend.itemGap = fs8
      this.configs.legend.itemWidth = fs8

      this.configs.legend.textStyle.rich.a.fontSize = fs12
      this.configs.legend.textStyle.rich.a.lineHeight = fs12
      this.configs.legend.textStyle.rich.a.width = legendTextFixWidth
      this.configs.legend.textStyle.rich.b.fontSize = fs12
      this.configs.legend.textStyle.rich.b.width = legendTextFixWidth
      // this.configs.legend.textStyle.rich.b.lineHeight = fs16
      this.configs.legend.textStyle.rich.c.width = fs8
      this.configs.legend.textStyle.rich.c.height = fs8
      this.configs.legend.textStyle.rich.c.borderRadius = fs5
      this.configs.legend.textStyle.rich.d.width = fs8
      this.configs.legend.textStyle.rich.d.height = fs8
      this.configs.legend.textStyle.rich.d.borderRadius = fs5
      this.configs.legend.textStyle.rich.e.width = fs8
      this.configs.legend.textStyle.rich.e.height = fs8
      this.configs.legend.textStyle.rich.e.borderRadius = fs5
      this.configs.legend.textStyle.rich.f.width = fs8
      this.configs.legend.textStyle.rich.f.height = fs8
      this.configs.legend.textStyle.rich.f.borderRadius = fs5
      this.configs.legend.textStyle.rich.g.width = fs8
      this.configs.legend.textStyle.rich.g.height = fs8
      this.configs.legend.textStyle.rich.g.borderRadius = fs5
      this.configs.legend.textStyle.rich.h.width = fs8
      this.configs.legend.textStyle.rich.h.height = fs8
      this.configs.legend.textStyle.rich.h.borderRadius = fs5

      this.configs.series[0].label.rich.first.fontSize = fs12
      this.configs.series[0].label.rich.second.fontSize = fs12
      this.configs.series[0].label.rich.third.fontSize = fs12
      this.configs.series[0].label.rich.fourth.fontSize = fs12
      this.configs.series[0].label.rich.fifth.fontSize = fs12
      this.configs.series[0].label.rich.sixth.fontSize = fs12
      if (datalist) this.configs.series[0].data = datalist
      this.chart.setOption(this.configs)
    }
  }
}
</script>

<style scoped>
.chartContainer {
  /* height: calc(100% - (36px * var(--beilv))); */
  /* position: relative; */
  /* position: absolute;
  top: 0;
  left: 0; */
  width: 100%;
  height: 100%;
}

.chartContainer > div {
  width: 100% !important;
}
</style>
