<template>
  <div class="echarts1">
    <div class="echarts2" ref="echarts">
    </div>
    <span class="wcl">完成率</span>
  </div>
</template>

<script>

import { FontChart } from '../../utils/utils'
import { getDeclareNum } from '@/api/api/zixun'

export default {
  name: 'echarts1',
  components: {},
  props: {
    id: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      status: '',
      xdata1: [],
      xdata2: [],
      ydata: []
    }
  },
  watch: {},
  mounted () {
    this.drawLine()
  },
  methods: {
    getData () {
      var that = this
      getDeclareNum().then(
        (response) => {
          console.log(response)
          that.xdata1 = []
          that.xdata2 = []
          that.xdata1.push(response.result.a.sessionNum)
          that.xdata1.push(response.result.b.sessionNum)
          that.xdata1.push(response.result.c.sessionNum)
          that.xdata1.push(response.result.d.sessionNum)
          that.xdata2.push(response.result.a.priceSum)
          that.xdata2.push(response.result.b.priceSum)
          that.xdata2.push(response.result.c.priceSum)
          that.xdata2.push(response.result.d.priceSum)
          this.drawLine()
        }
      )
    },
    drawLine () {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var value = 5555

      function Pie () {
        let dataArr = []
        for (var i = 0; i < 150; i++) {
          if (i % 2 === 0) {
            dataArr.push({
              name: (i + 1).toString(),
              value: 25,
              itemStyle: {
                normal: {
                  color: '#fff',
                  borderWidth: 0,
                  borderColor: 'rgba(0,0,0,0)'
                }
              }
            })
          } else {
            dataArr.push({
              name: (i + 1).toString(),
              value: 10,
              itemStyle: {
                normal: {
                  color: 'rgba(0,0,0,0)',
                  borderWidth: 0,
                  borderColor: 'rgba(0,0,0,0)'
                }
              }
            })
          }
        }
        return dataArr
      }

      var option = {
        title: {
          text: 60 + '%',
          left: '48%',
          z: 1000,
          top: '40%',
          textAlign: 'center',
          textStyle: {
            fontSize: FontChart(22),
            fontWeight: 'Bold',
            color: '#fff',
            textAlign: 'center',
            textBorderColor: 'rgba(0, 0, 0, 0)',
            textShadowColor: '#000',
            textShadowBlur: '0',
            textShadowOffsetX: 0,
            textShadowOffsetY: 1,
          },
        },
        series: [
          {
            radius: '78%',
            type: 'liquidFill',
            animationDuration: 0,
            animationDurationUpdate: 0,
            data: [0.6, 0.5, 0.4, 0.3],
            z: 10,
            outline: {
              show: false
            },
            label: {
              show: false
            },
            backgroundStyle: {
              borderColor: '#0D249C',
              borderWidth: 1,
              shadowColor: 'rgba(0, 0, 0, 0.4)',
              shadowBlur: 20,
              color: 'rgba(0, 0, 0, 0)'
            },
            waveAnimation: true,
          },
          {
            name: '4',
            type: 'pie',
            z: 1,
            radius: '80%',
            center: ['50%', '50%'],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
              }
            },
            data: [{
              value: 100,
              itemStyle: {
                normal: {
                  color: '#102696',
                }
              }
            }]
          },
          {
            type: 'pie',
            zlevel: 0,
            silent: true,
            radius: ['69%', '70%'],
            z: 10,
            itemStyle: {
              normal: {
                areaColor: '#0D249C',
                borderColor: '#0D249C',
              },
              emphasis: {
                label: {
                  show: false
                },
                areaColor: '#0D249C',
              }
            },
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: Pie()
          },
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 30%;
  height: calc(100% - 50px);
  margin-top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
}

.echarts2 {
  position: relative;
  width: 100%;
  height: calc(100% - 20px);
  margin-top: -20px;
}

.wcl {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  font-size: 14px;
  font-family: PingFang;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: -10px;
}
</style>