<template>
  <el-row>
    <el-col>
      <el-card style="text-align: center;">
        <div style="height:34px;"></div>
        <div style="width: 100%;height:540px;">
          <div id="lockRegion" v-loading="lockRegionLoading" 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="lockIn" v-loading="lockInLoading" style="width: 100%;height:540px; text-align: center;"/>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {getLatest} from '@/api/statistics'
import { getPunishFromList } from '@/api/punishment'
export default {
  data() {
    return {
      lockRegionLoading: true,
      lockInLoading: true,
      inLockDetails: [],
      punishFromList: [],
      lockRegionOption: {
        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,
            }
        }
        ]
      },
      lockInOption: {
        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() {
    // 加载惩戒来源
    this.punishFromList = getPunishFromList()
    getLatest('all_region_lock').then(res => {
      let xdata = []
      let ydata = []
      console.log(res,'all_region_lock')
      for(let i in res.data){
        xdata.push(res.data[i].region);
        ydata.push(res.data[i].num);
      }
      this.lockRegionOption.xAxis.data = xdata;
      this.lockRegionOption.series[0].data = ydata;
      console.log(this.lockRegionOption,'all_region_lock')
      this.drawLockRegion()
    }),
    getLatest('in_lock').then(res => {
      console.log(res,'lock')
      this.inLockDetails = res.data
      let list = []
      let sum = 0
      for(let i in res.data){
        if(res.data[i].punishFrom != null){
          sum += res.data[i].num
        }
      }
      this.lockInOption.series[0].label.normal.formatter = "全市\n\n锁定主体数量\n\n" + sum
      for(let i in res.data){
        if(res.data[i].punishFrom != null){
          let map = {}
          this.punishFromList.forEach(each => {
            if (each.value === res.data[i].punishFrom) {
              map.name = each.label + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
              map.value = res.data[i].num
            }
          })
          list.push(map)
        }
      }
      this.lockInOption.series[0].data = list;
      this.drawLockIn()
    })
  },
  methods: {
    drawLockIn() {
      this.lockInLoading = true
      const lockInChar = this.$echarts.init(document.getElementById('lockIn'))
      lockInChar.setOption(this.lockInOption)
      window.addEventListener("resize", () => {
        if(lockInChar){
          lockInChar.resize()
        }
      })
      this.lockInLoading = false
    },
    drawLockRegion() {
      this.lockRegionLoading = true
      const lockRegionChar = this.$echarts.init(document.getElementById('lockRegion'))
      lockRegionChar.setOption(this.lockRegionOption)
      window.addEventListener("resize", () => {
        if(lockRegionChar){
          lockRegionChar.resize()
        }
      })
      this.lockRegionLoading = false
    }
  },
}
</script>

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