<template>
  <modulen>
     <div class="mistake"><span class="mistakeText">经营收入</span>  <div class="numText">总和: <span>{{ formatThousand(manageIncome)}}</span>/万元</div></div>
    <div class="bh-cont">
      <div class="wt-cont-item">
        <div class="bh-left-charts">
          <div class="pie-charts1">
            <Ect :options="ectOpts" :default="3" />
          </div>
          <div class="ectOpts1-leng">

            <div class="ect-lecell" v-for="(item, index) in list" :key="index" >
              <div class="elcll-left">
                <span class="colorbox" :style="{background:item.color}"></span>
                <span class="elcll-text1">{{ item.name }}</span>
              </div>
              <div class="elcll-right">{{ formatThousand(item.value)}}%</div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </modulen>
</template>

<script>
import { GetRunIncomeState } from '@/api/manageGeneral';
import { formatThousand } from "@/utils/util";
import moment from "moment";
export default {
  data() {
    return {
      opNumColor: ["#3cc2f9", "#ffce5a", "#ff4968","#98a2a7"],
      ectOpts: {},
      list:[
        {
          name:"服务区",
          value:"0",
          color:"#3dc6ff"
        },
        {
          name:"广告",
          value:"0",
          color:"#ffce5a"
        },
        {
          name:"土地",
          value:"0",
          color:"#ff4968"
        },
        {
          name:"其他",
          value:"0",
          color:"#98a2a7"
        },
      ],
    sourceData:[
        {
          name: '服务区',
          value: "",
          color: "#3dc6ff"
        },
        {
          name: '广告',
          value:"",
          color: "#ffce5a"
        },
        {
          name: '土地',
          value: "",
          color: "#ff4968"
        },
        {
          name: '其他',
          value:"",
          color: "#98a2a7"
        },
      ],
      query:{
          timemode:"year",
          timeflag:moment(new Date()).format('yyyy'),
          level:0,
          dimension:""
        },
        manageIncome:"",
    };
  },
  computed: {
    // 获取选择器当前选择的时间
   
    getDate() {
      this.query.timeflag =moment(this.$store.state.appDate).format("yyyy")
      return  moment(this.$store.state.appDate).format("yyyyMM");
    },
    // 获取左上角选择地址的值
    selectRoad() {
      return this.$store.state.road.selectRoadId;
    },
    yearMoth(){
      return this.$store.state.yearMoth
    },

  },
  watch: {

    // 监听左上角选择地址的值
    selectRoad(newVal) {
      const level = this.$store.state.road.selectLevel // 获取当前选择的值的下标
      const Id = newVal ? newVal[level - 1] : ""      //  下标-1
      this.query.level = level;
      this.query.dimension = Id;
      this.getData(); //值变化就更新echarts图
    },
    yearMoth(val){
      if(val == 1){
         this.query.timemode="year",
         this.query.timeflag=moment(this.$store.state.appDate).format('yyyy')
         this.getData()
       }else{
         this.query.timemode="month",
         this.query.timeflag=moment(this.$store.state.appDate).format('yyyyMM') 
         this.getData()
       }
    },
    getDate(newVal){
    if(this.$store.state.yearMoth == 1) {
      this.query.timeflag = moment(newVal).format('yyyy')
      this.getData()
    }else{
      this.query.timeflag=moment(newVal).format('yyyyMM') 
      this.getData()
    }
  
    },
  },
  // mounted() {
  //   this.getData();
  // },
  methods: {
    formatThousand,
    async getData() {
      const {msgContent} = await GetRunIncomeState(this.query)
      this.sourceData[0].value = msgContent[0]?.serviceareaManageIncome || 0 //服务区
      this.sourceData[1].value = msgContent[0]?.advertisementIncome ||0//广告
      this.sourceData[2].value = msgContent[0]?.landIncome  ||0//土地
      this.sourceData[3].value = msgContent[0]?.otherIncome ||0 //其他
      this.manageIncome=(msgContent[0]?.manageIncome + 0.0001).toFixed(2) ||0  //经营收入
         if(msgContent.length==0){
          this.sourceData[0].value = 0
          this.sourceData[1].value = 0
          this.sourceData[2].value = 0
          this.sourceData[3].value = 0
          this.manageIncome= 0.0001.toFixed(2)
      }
      this.list[0].value = (msgContent[0]?.serviceareaManageIncome / msgContent[0]?.manageIncome * 100).toFixed(2) //服务区
      this.list[1].value = (msgContent[0]?.advertisementIncome/ msgContent[0]?.manageIncome * 100).toFixed(2)  //广告
      this.list[2].value = (msgContent[0]?.landIncome / msgContent[0]?.manageIncome * 100).toFixed(2) //土地
      this.list[3].value = (msgContent[0]?.otherIncome / msgContent[0]?.manageIncome * 100).toFixed(2) //其他
     if(this.list[0].value== "NaN") { this.list[0].value = 0}
     if(this.list[1].value== "NaN") { this.list[1].value = 0}
     if(this.list[2].value== "NaN") { this.list[2].value = 0}
     if(this.list[3].value== "NaN") { this.list[3].value = 0}
      this.getCharts();
    },
  async  getCharts() {

      /*
       * echart 不支持配置块之间的间隔，所以需要额外插入数据来生成间隔。
       * 外环的间隔要比内环大一些，想要达到这样的效果，需要每个块的数据减去一个固定的数值
      */

      /*
       * 确认问题：
       * 1. hover选中时，内环颜色、外环颜色、字体颜色如何设置
       * 2. 外环的背景色是否都一样
       * 3. label 固定显示在外环的中间。如果要调整 label 离块的距离，需要调整外环的大小 
      */
      let total = this.sourceData.reduce((num, item) => {
        num += (item.value - 0)
        return num
      }, 0)

      // 内环间隔距离
      let inSplitWidth = 2
      // 为了实现内环间隔距离，需要额外插入的数值。200 只是个系数，值越大，单位间隔的距离越小。
      let inSplitValue = Math.floor(total / (2000 / inSplitWidth))

      // 外环间隔比内环间隔大的值
      let itemSplitWidth = 1
      // 外环间隔距离
      let outSplitWidth = inSplitWidth + itemSplitWidth
      // 为了实现外环间隔距离，需要额外插入的数值。
      let outSplitValue = Math.floor(total / (600 / outSplitWidth))
      // 内环数据的总数
      let valueTotal = total + inSplitValue * this.sourceData.length

      function getTextAngle(currentAngle, angle) {
        currentAngle = currentAngle + angle
        if (currentAngle <= 90) {
          return -currentAngle;
        } else if (currentAngle <= 180 && currentAngle > 90) {
          return 180 - currentAngle;
        } else if (currentAngle < 270 && currentAngle > 180) {
          return 180 - currentAngle;
        } else if (currentAngle < 360 && currentAngle >= 270) {
          return 360 - currentAngle;
        }
      }

      // 内环数据。在原数据的后面添加间隔数据（间隔块设置颜色透明）
      let valueData = this.sourceData.reduce((arr, item) => {
        let currentTotal = arr.reduce((total, item) => {
          total += item.value
          return total
        }, 0)

        let currentAngle = 360 * (currentTotal / valueTotal)
        let angle = 360 * (item.value / valueTotal) / 2
        arr.push({
          name: item.name,
          value: item.value,
          hoverAnimation: false,
          itemStyle: {
            normal: {
              color: item.color
            }
          },
          label: {
            lineHeight: 70,
            rotate: getTextAngle(currentAngle, angle)
          }
        }, {
          name: '',
          value: inSplitValue,
          itemStyle: {
            color: 'transparent',
            opacity: 0
          },
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        })
        return arr
      }, [])

 
      // 原数据需要减去的值（外环每块的数据都要比原数据少一点才能达到外环嵌在内环的效果）
      let itemReduced = outSplitValue - inSplitValue
      // 外环数据
      let outValueData = this.sourceData.reduce((arr, item, index) => {
        let currentTotal = arr.reduce((total, item) => {
          total += item.value
          return total
        }, 0)

        let currentAngle = 360 * (currentTotal / valueTotal)
        let angle = 360 * (item.value / valueTotal) / 2

        arr.push({
          name: item.name,
          value: item.value - itemReduced,
          itemStyle: {
            color: item.color
          },
          label: {
            color: 'rgb(160, 60, 60)',
            position: 'inside',
            align: 'center',
            // lineHeight: 10,
            // verticalAlign: 'top',
            rotate: getTextAngle(currentAngle, angle)
          }
        }, {
          name: '',
          value: outSplitValue,
          itemStyle: {
            color: 'transparent',
            opacity: 0
          },
          label: {
            show: false,

          },
          labelLine: {
            show: false
          }
        })

        return arr
      }, [])
      if(this.list[0].value== "0"&&this.list[1].value== "0"&&this.list[2].value== "0"&&this.list[3].value== "0"&&this.list[4].value== "0"){
         this.ectOpts = {
           tooltip: {
          trigger: 'item',
          formatter: '{b} : <br/>{d}%',
          //formatter: "{b} : {d}% <br/> {c}"
        },
        series: [

          {
            type: 'pie',
            radius: ["60%", "77%"],//内 外圆半径
            minAngle: 5,
            color: this.opNumColor, // 色块填充颜色
            startAngle: 90,
            emphasis: {
              label: {
                show: true,
                formatter: function (val) {
                  return [
                    "{a|" + val.data.value + "}",

                    "{b|" +val.data.name + "}",
                  ].join("\n");
                },
                rich: {
                  a: {
                    color: "#fff",
                    lineHeight: 30,
                    fontSize: 20,
                    fontWeight: 800,
                    marginTop: 10,
                    fontFamily: "SairaMedium",

                  },
                  b: {
                    color: "#7B89A1",
                    fontSize: 12,
                    height: 20,
                  },
                },
                // fontSize: '40',
                // fontWeight: 'bold'
              },
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              borderColor: "#030E15",
              borderWidth: 4,
            },

            data: this.sourceData
          },

   
        ]
      }; 
         }
         else{
                this.ectOpts = {
        tooltip: {
          trigger: 'item',
          // formatter: '{b} : <br/>{d}%',
          //formatter: "{b} : {d}% <br/> {c}"
        },
        series: [

          {
            type: 'pie',
            radius: ["60%", "77%"],//内 外圆半径
            minAngle: 5,
            color: this.opNumColor, // 色块填充颜色
            startAngle: 90,
            emphasis: {
              label: {
                show: true,
                formatter: function (val) {
                  return [
                    "{a|" + val.data.value + "}",

                    "{b|" + val.data.name + "}",
                  ].join("\n");
                },
                rich: {
                  a: {
                    color: "#fff",
                    lineHeight: 30,
                    fontSize: 20,
                    fontWeight: 800,
                    marginTop: 10,
                    fontFamily: "SairaMedium",

                  },
                  b: {
                    color: "#7B89A1",
                    fontSize: 12,
                    height: 20,
                  },
                },
                // fontSize: '40',
                // fontWeight: 'bold'
              },
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              borderColor: "#030E15",
              borderWidth: 4,
            },

            data: this.sourceData
          },
        ]
      };
            }

    },
  },
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";

.bh-cont {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;

  .wt-cont-item {
    width: 100%;
  }

  // .wtc-charts {
  //   width: 100%;
  //   height: vh(280);
  //   position: relative;
  // }
  .bh-left-charts {
    display: flex;
    justify-content: space-around;
    margin-top: vh(20);

  }

  .pie-charts1 {
    width: vw(210);
    height: vh(210);
    position: relative;
    // background: url(@/assets/images/manage-bg.png) no-repeat ;
    // background-size: 100% 100%;
  }

  .ectOpts1-leng {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: vw(200);
    height: 100%;
    margin-top: vw(10);
  }

  .ect-lecell {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 5px;
  }

  .elcll-left {
    display: flex;
    align-items: center;
    justify-content:space-evenly;
    margin: 7px 0 7px 0;
  }

  .colorbox {
    display: block;
    width: vw(10);
    height: vh(7);
    background: #3dc6ff;
    margin-right: 15px;
  }

  .elcll-text1 {
    font-size: vw(12);
    color: #909fac;
    margin-right: vw(40);
  }

  .ect-lecell1 {
    .colorbox {
      background: #3dc6ff;
    }
  }

  .ect-lecell2 {
    .colorbox {
      background: #008df9;
    }
  }

  .ect-lecell3 {
    .colorbox {
      background: #ffd903;
    }
  }

  .ect-lecell4 {
    .colorbox {
      background: #98a2a6;
    }
  }
}

  .mistake{
    position: absolute;
    top: vh(10);
      width: 400px;
      height: vh(12);
      line-height: vh(12);
     background: url("@/assets/images/manageGS/long-Bj.png") ;
      background-size: 100% 100%;
      display: flex;
      justify-content:  space-between;
       .mistakeText{
        font-size: 12px;
        margin-left: vw(25);
       }
       .numText{
        position: absolute;
        width: vh(170);
        height: vh(32);
        text-align: center;
        line-height: vh(28);
        color: #ABCBDB;
        right: vw(20);
        top: -9px;
        font-size: 12px;
        span{
          font-size: 16px;
          color: #fff;
          font-family: "SairaRegular";
          font-weight: 800;
        }
       }
    }
    .ectOpts1-leng :last-child .elcll-right{
      margin-left: 12px;
    }
   .ectOpts1-leng  :nth-last-child(2)  .elcll-right{
      margin-left: 12px;
    }
   .ectOpts1-leng  :nth-last-child(3)  .elcll-right{
      margin-left: 12px;
    }
</style>
