<template>
  <div class="project-total-chart" v-if="show">
    <div id="total-scenarioNames" class="chart-content" :style="{ width }"></div>
    <div id="total-matterNames" class="chart-content" :style="{ width }"></div>
    <div id="total-entrustNameTrue" class="chart-content" :style="{ width }"></div>
    <div id="total-createTimeMonth" class="chart-content" :style="{ width }"></div>
  </div>
</template>

<script>
export default {
  props:{
    searchOption:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    scenario:[],
    matter:[]
  },
  data() {
    return {
      chartData: {},
      show: false,
      fullWidth: document.documentElement.clientWidth,
      width: 0,
      chart:{},
      types:[
          {
            label:'应用场景',
            value:'scenarioNames'
          },
          {
            label:'调查类型',
            value:'matterNames'
          },
          {
            label:'委托方',
            value:'entrustNameTrue'
          },
          {
            label:'创建月份',
            value:'createTimeMonth'
          },
        ]
    };
  },
  created() {
    window.addEventListener("resize", this.handleResize);
  },
  watch: {
    fullWidth() {
      this.resizeChart();
    },
  },
  mounted() {
    this.refresh()
  },
  methods: {
    handleResize(event) {
      this.fullWidth = document.documentElement.clientWidth;
    },
    resizeChart(){
      this.types.forEach(item => {
        this.chart[item.value].resize()
      });
    },
    refresh() {
      this.show = true;
      this.width = this.fullWidth / 4 - 10 + "px";
      this.$nextTick(() => {
        this.types.forEach(item => {
          if(item.value == 'scenarioNames'){
            item.option = this.scenario
          }
          if(item.value == 'matterNames'){
            item.option = this.matter
          }
          this.getData(item)
        });
        // this.initChart1(this.chartData.scenario, "scenario", "应用场景");
        // this.initChart1(this.chartData.type, "type", "调查类型");
        // this.initChart1(this.chartData.client, "client", "委托方");
        // this.initChart1(this.chartData.create, "create", "创建月份");
      });
    },
    async getData(item){
      var params = {
        searchQuery:this.$commonJS.objectToString(this.searchOption),
        orderDTOList: [
          {
            "orderBy": item.value,
            "orderType": 1
          } 
        ],//排序
        groupBy: item.value,//分组的值
      }
      var data = []
      await this.$api.groupPatentProject(params).then(response => {
        if(response.code == 200){
          data = response.data.data.values
        }
        
      }).catch(error => {
        data = []
      })
      var chartData = {}
      if(item.option){
        item.option.forEach((item,index) => {
          var obj = data.find(i=>{
            return i.value == item.id
          })
          if(obj){
            chartData[item.name] = obj.count
          }else{
            chartData[item.name] = 0
          }
        });
      }else{
        for(var i = 0;i<data.length;i++){
          chartData[data[i].name] = data[i].count
        }
      }
      console.log(chartData)
      this.initChart1(chartData, item.value, item.label);
    },
    initData(data) {
      this.chartData = data;
      this.refresh();
    },
    initChart(id) {
      const chartDom = document.getElementById(`total-${id}`);
      this.chart[id] = this.$echarts.init(chartDom)
      return this.$echarts.init(chartDom);
    },
    initChart1(data, key, name) {
      this.initChart(key).setOption(
        key === "create"
          ? {
              xAxis: {
                type: "category",
                data: Object.keys(data).map((key) => key),
              },
              yAxis: {
                type: "value",
              },
              title: {
                text: name,
                bottom: 0,
                left: "center",
                textStyle: {
                  fontSize: 14,
                  fontWeight: 100,
                  fontFamily: "宋体",
                },
              },
              series: [
                {
                  data: Object.keys(data).map((key) => data[key]),
                  type: "line",
                },
              ],
            }
          : {
              tooltip: {
                trigger: "item",
              },
              title: {
                text: name,
                bottom: 0,
                left: "center",
                textStyle: {
                  fontSize: 14,
                  fontWeight: 100,
                  fontFamily: "宋体",
                },
              },
              series: [
                {
                  name: "",
                  label: {
                    show: false,
                    position: "center",
                  },

                  type: "pie",
                  radius: key === "client" ? "70%" : ["40%", "70%"],
                  data: Object.keys(data).map((key) => {
                    return { value: data[key], name: key };
                  }),
                },
              ],
            }
      );
    },
  },
  deactivated(){
    window.removeEventListener('resize',()=>{})
  }
};
</script>

<style lang="scss">
.project-total-chart {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  .chart-content {
    display: inline-block;
    height: 250px;
  }
  .name {
    display: inline-block;
  }
}
</style>