<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons'); // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '330px'
    },
    pieLegend:{
      type: Array,
      default: []
    },
    pieData:{
      type: Array,
      default: []
    },
    otTitle: {
      type: String,
      default: ''
    },


  },
  data() {
    return {
      chart: null,
      data: [
        // { value: 320, name: '院士建议' },
        // { value: 240, name: '咨询研究报告' },
        // { value: 149, name: '中央交办' },
        // { value: 100, name: '部委委托' },
        // { value: 59, name: '地方委托' },
        // { value: 123, name: '主动报送' },
        // { value: 220, name: '申请' },
        // { value: 56, name: '委托' },
        // { value: 67, name: '交办' },
        // { value: 78, name: '合作' }
      ],

    }
  },
  watch: {
    pieData (newV, oldV) {
      this.initChart()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose();
    this.chart = null
  },
  methods: {
    initChart() {

      this.chart = echarts.init(this.$el, 'macarons');
      if(!this.pieData.length){
        var html =
          '<div style="text-align:center;"><div style="line-height:260px;color:#868686; font-size: 26px;">暂无数据</div>' +
          '<h3 style="color: #74bcff; font-size: 18px;">'+this.otTitle+'联系部门分布</h3></div>';
        this.$el.innerHTML = html;
        this.$el.removeAttribute('_echarts_instance_')
      }
      const _this = this;

      // console.log(this.pieData);
      // this.data=[]
      // this.pieData.forEach(item=>{
      //   let obj=item.name;
      //   let item2={}
      //   item2.name=obj.value;
      //   item2.value=item.value;
      //   this.data.push(item2)
      // })
      this.setStyle()
      this.chart.setOption({
        title: {
          text: this.otTitle+"联系部门分布",
          x:'center',
          y: 'bottom',
          left: "1%",
          top: "1%",
          textStyle: {
            fontSize: 24,
            fontFamily: "Arial",
            lineHeight: 30,
            color: "rgb(43,97,159)",
            fontWeight:"bold"
          },
        },

        tooltip: {
          top:90,
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          textStyle: {
            fontSize:'18',

          }
        },

        // legend: {
        //   left: 'center',
        //   bottom: '10',
        //   data:this.pieLegend,
        //   // data: ['院士建议', '咨询研究报告', '中央交办', '部委委托', '地方委托','主动报送', '申请', '委托', '交办', '合作']
        // },
        series: [
          {

            name: '项目分布',
            type: 'pie',
            roseType: 'radius',
            radius: '55%',
            center: ['55%', '48%'],
            data:this.pieData,
            // top: "50%"
           // // data:this.data,
            label: {

              normal: {
                textStyle: {
                  fontSize: 18
                }
              },
            }
           //  // backgroundColor: "rgba(255, 255, 255, 1)",
           //
           //  },
            // animationEasing: 'cubicInOut',
            // animationDuration: 2600,


          }
        ]
      });


      this.chart.on("click",function (params) {
        // alert(params.name)

        const deptName = params.name;
        let departmentId = "";
        if(deptName){
          switch (deptName) {
            case "机械与运载工程学部":
              departmentId = "25";
              break;
            case "信息与电子工程学部":
              departmentId = "26";
              break;
            case "化工、冶金与材料工程学部":
              departmentId = "27";
              break;
            case "能源与矿业工程学部":
              departmentId = "28";
              break;
            case "土木、水利与建筑工程学部":
              departmentId = "29";
              break;
            case "环境与轻纺工程学部":
              departmentId = "30";
              break;
            case "农业学部":
              departmentId = "31";
              break;
            case "医药卫生学部":
              departmentId = "32";
              break;
            case "工程管理学部":
              departmentId = "33";
              break;
          }
        }

        _this.$emit('deptToPage', departmentId)
      });
    },
    setStyle(){
      // for (var i=0;i<this.pieData.length;i++){
      //   let itemStyle = "";
      //     switch (i) {
      //     case 0:
      //       itemStyle = {
      //         normal: {
      //           //这里是重点
      //           color: 'rgb(90,131,255)'
      //
      //         }
      //
      //       };
      //       break;
      //     case 1:
      //       itemStyle = {
      //         normal: {
      //
      //           color: 'rgb(89,98,255)'
      //
      //         }
      //
      //       };
      //       break;
      //     case 2:
      //       itemStyle = {
      //         normal: {
      //           //这里是重点
      //           color: 'rgb(44,56,254)'
      //
      //
      //         }
      //
      //       };
      //       break;
      //     case 3:
      //       itemStyle = {
      //         normal: {
      //           //这里是重点
      //           color: 'rgb(0,0,255)'
      //
      //
      //         }
      //
      //       };
      //       break;
      //     case 4:
      //       itemStyle = {
      //         normal: {
      //           //这里是重点
      //           color: 'rgb(0,0,128)'
      //
      //
      //         }
      //
      //       };
      //       break;
      //     case 5:
      //       itemStyle = {
      //         normal: {
      //           //这里是重点
      //           color: 'rgb(255,199,0)'
      //         }
      //
      //       };
      //       break;
      //     case 6:
      //       itemStyle = {
      //         normal: {
      //           //这里是重点
      //           color: 'rgb(222,177,62)'
      //
      //         }
      //
      //       };
      //       break;
      //     case 7:
      //       itemStyle = {
      //         normal: {
      //           //这里是重点
      //           color: 'rgb(222,177,62)'
      //
      //         }
      //
      //       };
      //       break;
      //     case 8:
      //       itemStyle = {
      //         normal: {
      //           //这里是重点
      //           color: 'rgb(248,98,47)'
      //
      //         }
      //
      //       };
      //       break;
      //     case 9:
      //       itemStyle = {
      //         normal: {
      //           //这里是重点
      //           color: 'rgb(210,219,244)'
      //
      //         }
      //
      //       };
      //       break;
      //     }
      //
      //   this.pieData[i].itemStyle=itemStyle;
      //   this.pieData[i].label={color:"#000"}
      // }

      this.pieData.forEach(item=>{
        const deptName = item.name;
        let itemStyle = "";
        if(deptName){
          switch (deptName) {
            case "机械与运载工程学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: 'rgb(89,98,255)'
                }

              };
              break;
            case "信息与电子工程学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: 'rgb(44,56,254)'
                }

              };
              break;
            case "化工、冶金与材料工程学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: 'rgb(255,199,0)'
                }

              };
              break;
            case "能源与矿业工程学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: 'rgb(248,98,47)'
                }

              };
              break;
            case "土木、水利与建筑工程学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: 'rgb(210,219,244)'
                }

              };
              break;
            case "环境与轻纺工程学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: 'rgb(0,0,128)'
                }

              };
              break;
            case "农业学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: 'rgb(222,177,62)'
                }

              };
              break;
            case "医药卫生学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: 'rgb(0,0,255)'
                }

              };
              break;
            case "工程管理学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: 'rgb(222,177,62)'
                }

              };
              break;
            case "中国工程院战略咨询中心":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: 'rgb(90,131,255)'
                }

              };
              break;
          }
        }
        item.itemStyle=itemStyle;
        item.label={color:"#000"}
      })
    }

  }
}
</script>
