<template>
  <el-row>
    <el-col>
      <el-card style="text-align: center;">
        <div style="height:34px;"></div>
        <div style="width: 100%;height:540px;">
          <div id="usuaRegion" v-loading="usuaRegionLoading" style="width: 100%;height:540px;text-align: center;"/>
        </div>
      </el-card>
    </el-col>
    <el-col>
      <el-card style="text-align: center;">
        <div style="width: 100%;height:540px;">
          <div id="usuaResult" v-loading="usuaResultLoading" style="width: 100%;height:540px; text-align: center;"/>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {getLatest} from '@/api/statistics'
export default {
  data() {
    return {
      usuaRegionLoading: true,
      usuaResultLoading: true,
      usuaResultDetails: [],
      usuaRegionOption: {
        title: {
          text: '区域协同监管主体分布'
        },
        tooltip: {},
        legend: {
          data: ['已协同监管主体数量'],
          x:'right',
        },
        xAxis: {
          axisLabel: {
            show: true,
            interval: 0
          },
          data: []
        },
        yAxis: {
          name: "已协同监管主体数",
        },
        series: [
          {
            color: '#97a8be',
            name: '已协同监管主体数量',
            type: 'bar',
            data: [],
            itemStyle: {
              //barBorderRadius: 5,
              borderWidth: 1.5,
            }
          }
        ]
      },
      usuaResultOption: {
        title: [
          {
            text: '协同监管结果分析'
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: '38%',
            style: {
              text: '广州协同监管数量',
              textAlign: 'center',
              fill: '#f8f8f8', //文字的颜色
              width: 30,
              height: 30,
              fontSize: 16,
              fontFamily: "Microsoft YaHei"
            },
          }
        ],
        legend: {
          top: '20%',
          itemWidth: 25,
          itemHeight: 20,
          x:'right',
          orient: "vertical",
          textStyle:{
            fontSize: 15,
          }
        },
        series: [
          {
            center: ['30%','50%'],
            name: '协同监管百分比与数量',
            type: 'pie',
            radius: ['40%', '70%'],
            //avoidLabelOverlap: false,
            label: {
              show: false,
              normal:{
                show: true,
                position: "center",
                fontSize: 20,
              },
              position: 'left'
            },
            itemStyle: {
              normal: {
                borderWidth : 2,
                borderColor: '#ffffff'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      },
    }
  },
  mounted() {
    getLatest('all_region_usua').then(res => {
      let xdata = []
      let ydata = []
      console.log(res,'all_region_usua')
      for(let i in res.data){
        xdata.push(res.data[i].region);
        ydata.push(res.data[i].num);
      }
      this.usuaRegionOption.xAxis.data = xdata;
      this.usuaRegionOption.series[0].data = ydata;
      console.log(this.usuaRegionOption,'all_region_usua')
      this.drawUsuaRegion()
    })
    getLatest('result_usua').then(res => {
      console.log(res,'result_usua')
      // this.usuaResultDetails = res.data
      let list = []
      let sum = res.data[0].one +
        res.data[0].two +
        res.data[0].three +
        res.data[0].four +
        res.data[0].five +
        res.data[0].six +
        res.data[0].seven +
        res.data[0].eight
      console.log(sum,'result_usua')

      for (var key in res.data[0]) {
        let map = {}
        if(key == 'one'){
          map.name = '未发现问题' + Math.round(res.data[0][key]/sum * 10000) / 100.00 + '%'
          map.value = res.data[0][key]
          list.push(map)
        }else if(key == 'two'){
          map.name = '未按规定公示应当公示的信息' + Math.round(res.data[0][key]/sum * 10000) / 100.00 + '%'
          map.value = res.data[0][key]
          list.push(map)
        }else if(key == 'three'){
          map.name = '公示信息隐瞒真实情况弄虚作假' + Math.round(res.data[0][key]/sum * 10000) / 100.00 + '%'
          map.value = res.data[0][key]
          list.push(map)
        }else if(key == 'four'){
          map.name = '通过登记住所(经营场所)无法联系' + Math.round(res.data[0][key]/sum * 10000) / 100.00 + '%'
          map.value = res.data[0][key]
          list.push(map)
        }else if(key == 'five'){
          map.name = '发现问题已责令改正' + Math.round(res.data[0][key]/sum * 10000) / 100.00 + '%'
          map.value = res.data[0][key]
          list.push(map)
        }else if(key == 'six'){
          map.name = '不配合检查情节严重' + Math.round(res.data[0][key]/sum * 10000) / 100.00 + '%'
          map.value = res.data[0][key]
          list.push(map)
        }else if(key == 'seven'){
          map.name = '未发现开展本次检查涉及的经营活动' + Math.round(res.data[0][key]/sum * 10000) / 100.00 + '%'
          map.value = res.data[0][key]
          list.push(map)
        }else if(key == 'eight'){
          map.name = '发现问题待后续处理' + Math.round(res.data[0][key]/sum * 10000) / 100.00 + '%'
          map.value = res.data[0][key]
          list.push(map)
        }
      }

      this.usuaResultOption.series[0].label.normal.formatter = "全市\n\n协同监管主体数量\n\n" + sum

      this.usuaResultOption.series[0].data = list;
      this.drawUsuaType()
    })
  },
  methods: {
    drawUsuaType() {
      this.usuaResultLoading = true
      const usuaResultChar = this.$echarts.init(document.getElementById('usuaResult'))
      usuaResultChar.setOption(this.usuaResultOption)
      window.addEventListener("resize", () => {
        if(usuaResultChar){
          usuaResultChar.resize()
        }
      })
      this.usuaResultLoading = false
    },
    drawUsuaRegion() {
      this.usuaResultLoading = true
      const usuaRegionChar = this.$echarts.init(document.getElementById('usuaRegion'))
      usuaRegionChar.setOption(this.usuaRegionOption)
      window.addEventListener("resize", () => {
        if(usuaRegionChar){
          usuaRegionChar.resize()
        }
      })
      this.usuaResultLoading = false
    }
  },
}
</script>

<style>
.histogram {
  min-height: 230px;
  /* height: calc(50vh - 240px); */
  margin-bottom: 20px;
}
.title {
  font-weight: 600;
  color: #666666;
  margin-bottom: 10px;
}
</style>
