<template>
  <el-row>
    <el-col :span="12">
      <el-card style="text-align: center;">
        <div style="width: 100%;height:34px;"></div>
        <div style="width: 100%;height:440px;">
          <div id="fraudRegion" v-loading="fraudRegionLoading" style="width: 100%;height:440px;text-align: center;"/>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <div style="width: 100%;height:34px;"></div>
        <div style="width: 100%;height:440px;">
          <div id="fraudYear" style="width: 100%;height:440px;"/>
        </div>
      </el-card>
    </el-col>
    <el-col>
      <el-card style="text-align: center;">
        <div style="width: 100%;height:440px;">
          <div id="fraudType" v-loading="lockInLoading" style="width: 100%;height:440px; text-align: center;"/>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {getLatest} from '@/api/statistics'
export default {
    data() {
      return {
        fraudRegionLoading: true,
        fraudTypeLoading: true,
        fraudTypeDetails: [],
        fraudRegionOption: {
            title: {
            text: '区域撤销登记主体分布'
            },
            tooltip: {},
            legend: {
            data: ['已撤销登记主体数量'],
            x:'right',
            },
            xAxis: {
            axisLabel: {
                show: true,
                interval: 0
            },
            data: []
            },
            yAxis: {
                name: "已撤销登记主体数",
            },
            series: [
            {
                color: '#97a8be',
                name: '已撤销登记主体数量',
                type: 'bar',
                data: [],
                itemStyle: {
                    borderWidth: 1.5,
                }
            }
            ]
        },
        fraudYearOption: {
            title: {
            text: '撤销登记主体增长分析'
            },
            tooltip: {
            trigger: 'axis'
            },
            legend: {
            data: ['撤销登记主体数量']
            },
            grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
            },
            toolbox: {
            feature: {
                saveAsImage: {}
            }
            },
            xAxis: {
            type: 'category',
            boundaryGap: false,
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: [
            {
                min:0,  //取0为最小刻度
                //max:100000, //取100为最大刻度
                type: 'value'
            }
            ],
            series: [
            {
                name: '撤销登记主体数量',
                type: 'line',
                data: []
            }
            ]
        },
        fraudTypeOption: {
            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_fraud').then(res => {
        let xdata = []
        let ydata = []
        console.log(res,'all_region_fraud')
        for(let i in res.data){
            xdata.push(res.data[i].region);
            ydata.push(res.data[i].num);
        }
        this.fraudRegionOption.xAxis.data = xdata;
        this.fraudRegionOption.series[0].data = ydata;
        console.log(this.fraudRegionOption,'all_region_fraud')
        this.drawFraudRegion()
      })
      getLatest('year_fraud').then(res => {
        console.log(res,'year_fraud')
        let a = []
        let b = []
        for(let i in res.data){
            a.push(res.data[i].num)
            b.push(res.data[i].years)
        }
        this.fraudYearOption.series[0].data = a
        this.fraudYearOption.xAxis.data = b
        this.drawFraudYear()
      })
      getLatest('type_fraud').then(res => {
        console.log(res,'type_fraud')
        this.fraudTypeDetails = res.data
        let list = []
        let sum = 0
        for(let i in res.data){
            if(res.data[i].complaintReason != null){
            sum += res.data[i].num
            }
        }
        this.fraudTypeOption.series[0].label.normal.formatter = "全市\n\n冒用登记主体数量\n\n" + sum
        for(let i in res.data){
            if(res.data[i].complaintReason != null){
                let map = {}
                map.name = res.data[i].complaintReason + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
                map.value = res.data[i].num
                list.push(map)
            }
        }
        this.fraudTypeOption.series[0].data = list;
        this.drawFraudType()
      })
    },
    methods: {
      drawFraudType() {
        this.fraudTypeLoading = true
        const fraudTypeChar = this.$echarts.init(document.getElementById('fraudType'))
        fraudTypeChar.setOption(this.fraudTypeOption)
        window.addEventListener("resize", () => {
          if(fraudTypeChar){
            fraudTypeChar.resize()
          }
        })
        this.fraudTypeLoading = false
      },
      drawFraudYear() {
        const fraudYearChar = this.$echarts.init(document.getElementById('fraudYear'))
        fraudYearChar.setOption(this.fraudYearOption)
        window.addEventListener("resize", () => {
          if(fraudYearChar){
            fraudYearChar.resize()
          }
        })
      },
      drawFraudRegion() {
        this.fraudRegionLoading = true
        const fraudRegionChar = this.$echarts.init(document.getElementById('fraudRegion'))
        fraudRegionChar.setOption(this.fraudRegionOption)
        window.addEventListener("resize", () => {
          if(fraudRegionChar){
            fraudRegionChar.resize()
          }
        })
        this.fraudRegionLoading = false
      }
    }
}
</script>

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