<template>
  <div class="BJinsannianzijin">
    <div class="echart_boxs">
      <div class="echart_boxs_top">
        <div class="echart_boxs_title">【服务业专项资金】</div>
        <!-- <div class="echart_boxs_btn">
          <span v-for="item,index in fuwuyeYear" :class="changeFuwuyeYear == index ? 'changeFuwuyeYear_span': ''" @click="changeFuwuyeYear = index">{{ item.year }}</span>
        </div> -->
      </div>
      <div class="echart_boxs_middle">
        <div class="BJinsannianzijinchart-left" id="BJinsannianzijinchart-left"></div>
        <div class="BJinsannianzijinchart-right">
          <div class="yushuan">
            <span>资金预算</span>
            <div class="number-box">{{ obj.fundBudget }} <span class="number-unit-box">万元</span></div>
          </div>
          <div class="yushuan">
            <span>追加预算</span>
            <div class="bottom_number number-box">{{ obj.additionBudget }} <span class="number-unit-box">万元</span></div>
          </div>
        </div>
      </div>
      <div class="echart_boxs_bottom">拨付资金 <span>{{ obj.appropriationFund }}</span>万元  (执行率 <span>{{ obj.implementationRate }}</span>% )</div>
    </div>
    <div class="echart_boxs echart_boxs_right">
      <div class="echart_boxs_top">
        <div class="echart_boxs_title">【总部专项资金】</div>
        <!-- <div class="echart_boxs_btn">
          <span v-for="item,index in fuwuyeYear" :class="changeFuwuyeYear == index ? 'changeFuwuyeYear_span': ''" @click="changeFuwuyeYear = index">{{ item.year }}</span>
        </div> -->
      </div>
      <div class="echart_boxs_middle">
        <div class="zongbuzhuanxing-box" id="zongbuzhuanxing-box"></div>
        <div class="BJinsannianzijinchart-right">
          <div class="yushuan">
            <span>资金预算</span>
            <div class="number-box">{{ objTwo.fundBudget }} <span class="number-unit-box">万元</span></div>
          </div>
          <div class="yushuan">
            <span>追加预算</span>
            <div class="bottom_number number-box">{{ objTwo.additionBudget }} <span class="number-unit-box">万元</span></div>
          </div>
        </div>
      </div>
      <div class="echart_boxs_bottom">拨付资金 <span>{{ objTwo.appropriationFund }}</span>万元  (执行率 <span>{{ objTwo.implementationRate }}</span>% )</div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
// import resize from './mixins/resize'
import { threeYearsFund } from "@/api/jin_ji_hu/zijinbiao"
const animationDuration = 6000

export default {
  // mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '50%'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    let date = new Date();
    const currentYear = date.getFullYear();
    return {
      chart: null,
      chartTwo:null,
      changeFuwuyeYear: currentYear,
      fuwuyeYear:[
        {
          year: currentYear - 1,
        },{
          year: currentYear - 2,
        },{
          year: currentYear - 3,
        },
      ],
      obj:{},
      objTwo:{}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart(this.changeFuwuyeYear)
      window.addEventListener('resize', this.cancalDebounce);
    })
  },
  beforeDestroy() {
    // if (!this.chart) {
    //   return
    // }
    // this.chart.dispose()
    // this.chart = null
    window.removeEventListener('resize', this.cancalDebounce);
  },
  methods: {
    cancalDebounce(){
      // console.log("11111");
      window.onresize = this.chart.resize();
      window.onresize = this.chartTwo.resize();
    },
    initChart(Year) {
      this.chart = echarts.init(document.getElementById('BJinsannianzijinchart-left'))
      this.chartTwo = echarts.init(document.getElementById('zongbuzhuanxing-box'))
      let option = {
        series: [
          {
            type: 'gauge',
            splitNumber: 3,
            radius: 70,
            center: ["45%", "95%"],
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            pointer: {
              show: true,
              icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVpJREFUWEftlr1KxEAURu9NsBLRDGJh7bqbpBJx3yCJ4KJgp4WFINjaCFZaCoIvIdrZKZhEn8AtFiFZ/AHBwkbMaiGuRXIlnUqWTMbVFZkp5975vsOpBuGb58Uqj/b7l/eiMSj6MH0XWcYqAlQ1P1wWzREGeJgtDyht9QYBRlQFpwdPAlcEQhigZeu7BLiWliJQXfOaU78G8GRXJhNQ6p8LaZ15zZ2iEEIGIsc8AqKZj2UI8EYJjLPT8K4IRGGAyDEXgWg/s4Rwj/nB0s8C2MY1AIx1LEGqMbd5zAtRyMCjbWwhwGZOeIN54UTXAZ4tvRQjXnEGbzAv3ObZ5TYQOfoBEC7whAJQrEBfaci7uM3b5wKI7EoNUZ3LCNPSOyJsI9Lr17nmBitdAegUEtkGpbMkxurwWXCeV5Y15zLwZwFajnlIRPM9MyABpAFpQBqQBqQBaaDnBv7Fj+gdzkcMMPGkRt0AAAAASUVORK5CYII=",
              width: 20,
              length: "80%",
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 10,
                color: [
                  [0.6, '#00AEFF'], // 第一个颜色
                  [0.63, '#F5F8FA'],
                  [1, '#FFA42B ']  // 第二个颜色
                ],
              },
            },
            axisLabel: {
              show: false,
              color: "#666",
              fontSize: 16,
              formatter: function (value) {
                return value.toFixed(0);
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              length: "28%",
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            detail: {
              show: false
            },
            title: {
              show: false
            },
            data: [
              {
                value: 61.5,
                name: '决策层国际化导向'
              }
            ],
          }
        ]
      };
      let optionTwo = {
        series: [
          {
            type: 'gauge',
            splitNumber: 3,
            radius: 70,
            center: ["45%", "95%"],
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            pointer: {
              show: true,
              icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVpJREFUWEftlr1KxEAURu9NsBLRDGJh7bqbpBJx3yCJ4KJgp4WFINjaCFZaCoIvIdrZKZhEn8AtFiFZ/AHBwkbMaiGuRXIlnUqWTMbVFZkp5975vsOpBuGb58Uqj/b7l/eiMSj6MH0XWcYqAlQ1P1wWzREGeJgtDyht9QYBRlQFpwdPAlcEQhigZeu7BLiWliJQXfOaU78G8GRXJhNQ6p8LaZ15zZ2iEEIGIsc8AqKZj2UI8EYJjLPT8K4IRGGAyDEXgWg/s4Rwj/nB0s8C2MY1AIx1LEGqMbd5zAtRyMCjbWwhwGZOeIN54UTXAZ4tvRQjXnEGbzAv3ObZ5TYQOfoBEC7whAJQrEBfaci7uM3b5wKI7EoNUZ3LCNPSOyJsI9Lr17nmBitdAegUEtkGpbMkxurwWXCeV5Y15zLwZwFajnlIRPM9MyABpAFpQBqQBqQBaaDnBv7Fj+gdzkcMMPGkRt0AAAAASUVORK5CYII=",
              width: 20,
              length: "80%",
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 10,
                color: [
                  [0.6, '#00AEFF'], // 第一个颜色
                  [0.63, '#F5F8FA'],
                  [1, '#FFA42B ']  // 第二个颜色
                ],
              },
            },
            axisLabel: {
              show: false,
              color: "#666",
              fontSize: 16,
              formatter: function (value) {
                return value.toFixed(0);
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              length: "28%",
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            detail: {
              show: false
            },
            title: {
              show: false
            },
            data: [
              {
                value: 61.5,
                name: '决策层国际化导向'
              }
            ],
          }
        ]
      };
      threeYearsFund(Year).then(res=>{
        res.data.map(item=>{
          if(item.serviceType == "1") {
            this.obj = item;
            option.series[0].data[0].value = item.implementationRate
            // 资金预算 fundBudget  追加预算 additionBudget
            if(item.fundBudget <= 0) {
              let color = [ [0, '#00AEFF'], [1, '#FFA42B ']]  // 第二个颜色
              option.series[0].axisLine.lineStyle.color = color
            } else if(item.additionBudget <= 0) {
              let color = [ [1, '#00AEFF'], [1, '#FFA42B ']]  // 第二个颜色
              option.series[0].axisLine.lineStyle.color = color
            } else {
              let count = item.fundBudget + item.additionBudget;
              const percentage = (item.fundBudget / count);
              let color = [ [Number(percentage.toFixed(1)), '#00AEFF'], [Number(percentage.toFixed(1)) + 0.03, '#F5F8FA'], [1, '#FFA42B ']]
              option.series[0].axisLine.lineStyle.color = color;
            }
          } else {
            this.objTwo = item;
            optionTwo.series[0].data[0].value = item.implementationRate
            if(item.fundBudget <= 0) {
              let color = [ [0, '#00AEFF'], [1, '#FFA42B ']]  // 第二个颜色
              optionTwo.series[0].axisLine.lineStyle.color = color
            } else if(item.additionBudget <= 0) {
              let color = [ [1, '#00AEFF'], [1, '#FFA42B ']]  // 第二个颜色
              optionTwo.series[0].axisLine.lineStyle.color = color
            } else {
              let count = item.fundBudget + item.additionBudget;
              const percentage = (item.fundBudget / count);
              let color = [ [Number(percentage.toFixed(1)), '#00AEFF'], [Number(percentage.toFixed(1)) + 0.03, '#F5F8FA'], [1, '#FFA42B ']]
              optionTwo.series[0].axisLine.lineStyle.color = color;
            }
          }
        })
        this.chart.setOption(option)
        this.chartTwo.setOption(optionTwo)
      })
    }
  }
}
</script>
