<template>
    <div class="chart" v-if="show" :style="{height: height }">
      <div v-for="(item,index) in domList.filter(item=>{return item.typeValue!=6})" :key="item.reportType">
        <div v-if="index%2==0" style="display:flex">
          <div class="items" :id="domList[index].reportType"></div>
          <div class="items" v-if="domList[index+1]" :id="domList[index+1].reportType"></div>
        </div>
        
      </div>
    </div>
</template>
<script>
  
  export default {
    props: ["data"],
    data() {
      return {
        show: false,
        chartData: [],
        domList:[
          {
            reportType:'FTO调查',
          },
          {
            reportType:'无效分析',
          },
          {
            reportType:'侵权分析',
          },
          {
            reportType:'第三方意见',
          },
          {
            reportType:'稳定性分析',
          },
          {
            reportType:'回避设计',
          },
          {
            reportType:'无效应对报告',
          },
        ],
        fullWidth: document.documentElement.clientWidth,
        height:document.documentElement.clientHeight,
        width: 0,
        reportAsDicItem:{
          "0":"INVALID_ASSESS",
          "1":"THIRD_ASSESS",
          "2":"STABILITY_ASSESS",
          "3":"FTO_ASSESS",
          "4":"TORT_ASSESS",
          "5":"AVOID_ASSESS",
        },
      };
    },
    watch: {
      fullWidth() {
        this.show = false
        this.$nextTick(()=>{
          this.refresh();
        })
        
      },
    },
    created(){
      window.addEventListener('resize', this.handleResize)
    },
    mounted() {},
    methods: {
      handleResize(event) {
        this.fullWidth = document.documentElement.clientWidth
      },
      refresh() {
        this.show = true;
        this.width = (this.fullWidth / 2) -220 + 'px'
        this.height = document.documentElement.clientHeight - 240 +'px'
        this.$nextTick(() => {
          this.chartData.forEach((item) => {
            if(item.typeValue != 6){
              this.initChart1(item, item.reportType, item.reportType+'('+ item.reportNum +')');
            }
            
          });
        });
      },
      open(data) {
        this.chartData = data;
        this.refresh()
      },
      initChart(id) {
        const chartDom = document.getElementById(id);
        return this.$echarts.init(chartDom);
      },
      initChart1(data, key, name) {
          this.initChart(key).on('click',(params)=>{
              // console.log(params)
              this.$emit('params',params.data)
          })
        this.initChart(key).setOption(
           {
                tooltip: {
                  trigger: "item",
                },
                legend: {
                     
                      left: 'center',
                      top:'0'
                  },
                title: {
                  text: name,
                  bottom: 'center',
                  left: "center",
                  textStyle: {
                    fontSize: 16,
                    fontWeight: 999,
                    fontFamily: "黑体",
                  },
                },
                series: [
                  {
                    name: "",
                    label: {
                      show: true,
                      // position: "center",
                      formatter:function(data){
                        return `${data.name} ${data.value}(${data.percent.toFixed(1)}%)`
                      }
                    },
                    labelLine: {
                      show: true,
                    },
                    type: "pie",
                    radius: ["40%", "70%"],
                    data: data.conclusions.map(item=>{
                      return {value:item.num,name:item.name,type:data.typeValue,conclusionType:item.value}
                    })
                  },
                ],
                emphasis: {
                      itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
        );
      },
    },
    deactivated(){
      window.removeEventListener('resize',()=>{})
    }
  };
  </script>
  <style lang="scss" scoped>
  .items{
      height: 320px;
      width:calc(50% - 60px);
      background: white;
      margin:15px;
      padding:10px;
  }
  .chart{
      background:#f4f4f4;
      // display: flex;
      // justify-content: space-between;
      // flex-wrap: wrap ;
      overflow: auto;
  }
  </style>