<template>
  <el-row>
    <el-col >
      <el-card style="text-align: center;">
        <div style="width: 100%;height:540px;">
            <div id="abnOut" v-loading="abnOutLoading" style="width: 100%;height:540px;text-align: center;"/>
        </div>
      </el-card>
    </el-col>
    <el-col >
      <el-card style="text-align: center;">
        <div>
          <div class="region_btn">
            <el-button  type="primary" size="mini" @click="changeTab('全市')">
                全市
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTab('天河区')">
                天河区
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTab('黄埔区')">
                黄埔区
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTab('增城区')">
                增城区
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTab('海珠区')">
                海珠区
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTab('越秀区')">
                越秀区
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTab('荔湾区')">
                荔湾区
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTab('番禺区')">
                番禺区
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTab('南沙区')">
                南沙区
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTab('白云区')">
                白云区
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTab('花都区')">
                花都区
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTab('从化区')">
                从化区
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTab('市直')">
                市直
            </el-button>
          </div>
          <div style="width: 100%;height:540px;">
            <div class="region_btn" id="illOutRegion" style="width: 100%;height:540px;"/>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {getLatest} from '@/api/statistics'
export default {
    data() {
        return {
            active: '全市',
            outRegionIllDetails: [],
            abnOutLoading: true,
            abnOutOption: {
                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: []
                }
                ]
                // title: [
                // {
                //     text: '移出异常名录情况分析'
                // }
                // ],
                // polar: {
                // center: ['30%', '50%'],
                // radius: [80,'100%']
                // },
                // angleAxis: {
                // show: false,
                // max: 100,
                // startAngle: -90
                // },
                // radiusAxis: {
                // type: 'category',
                // axisTick:{
                //     show: false
                // },
                // axisLine:{
                //     show: false
                // }
                // },
                // legend: {
                // top: '20%',
                // itemWidth: 25,
                // itemHeight: 20,
                // show: true,
                // x:'right',
                // orient: "vertical",
                // //align: 'left',
                // textStyle:{
                //     fontSize: 15,
                // }
                // },
                // tooltip: {
                // trigger: 'item',
                // formatter: '{c}%'
                // },
                // color: ['#49BFB3','#5C84AF','#84377b','#15b43f','#f01836','#f0ae18','#1a1a1b','#83838c','#089051'],
                // series: [],
            },
            illOutRegionOption: {
                title: [
                {
                    text: '移出严重违法名单情况分析'
                }
                ],
                tooltip: {
                trigger: 'item'
                },
                legend: {
                top: '20%',
                itemWidth: 20,
                itemHeight: 12,
                x:'right',
                orient: "vertical",
                textStyle:{
                    fontSize: 13,
                }
                },
                series: [
                {
                    center: ['30%','50%'],
                    name: '移出百分比与数量',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    label: {
                    show: false,
                    position: 'left',
                    normal:{
                        show: true,
                        position: "center",
                        fontSize: 20,
                    },
                    },
                    itemStyle: {
                    normal: {
                        borderWidth : 2,
                        borderColor: '#ffffff'
                    }
                    },
                    labelLine: {
                    show: false
                    },
                    data: []
                }
                ]
            }
        }
    },
    mounted() {
        getLatest('out_region_ill').then(res => {
            // console.log(res,'out_region_ill')
            this.outRegionIllDetails = res.data
            let list = []
            for(let i in res.data){
                if(res.data[i].name == '全市'){
                let sum = 0
                for(let j in res.data[i].detail){
                    sum += res.data[i].detail[j].num
                }
                this.illOutRegionOption.series[0].label.normal.formatter = "全市\n\n移出严重违法数量\n\n" + sum;
                for(let j in res.data[i].detail){
                    let map = {}
                    if(res.data[i].detail[j].REMEXCPRES == '3'){
                    map.name = '企业被吊销营业执照或办理注销登记后，不再列入严重违法失信企业名单或经营异常名录  ' + Math.round(res.data[i].detail[j].num/sum * 10000) / 100.00 + '%'
                    map.value = res.data[i].detail[j].num
                    list.push(map)
                    }else if(res.data[i].detail[j].REMEXCPRES == '4'){
                    map.name = '当事人被列入严重违法失信名单之日起满三年的,停止公示相关信息，并解除相关管理措施  ' + Math.round(res.data[i].detail[j].num/sum * 10000) / 100.00 + '%'
                    map.value = res.data[i].detail[j].num
                    list.push(map)
                    }
                    else if(res.data[i].detail[j].REMEXCPRES == '5'){
                    map.name = '列入名单满一年，符合移出条件，当事人申请信用修复后，提前移出名单，停止公示  ' + Math.round(res.data[i].detail[j].num/sum * 10000) / 100.00 + '%'
                    map.value = res.data[i].detail[j].num
                    list.push(map)
                    }
                    
                }
                break
                }
            }
            this.illOutRegionOption.series[0].data = list;
            // console.log(this.illOutRegionOption,'out_region_ill')
            this.drawILLOutRegion()
        })
        getLatest('out_abn').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].REMEXCPRES != null){
                sum += res.data[i].num
                }
            }
            this.abnOutOption.series[0].label.normal.formatter = "全市\n\n移出经营异常数量\n\n" + sum
            for(let i in res.data){
                if(res.data[i].REMEXCPRES != null){
                    let map = {}
                    if(res.data[i].REMEXCPRES == '1'){
                        map.name = '个体工商户已按规定补报年度报告并申请恢复正常记载状态  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
                        map.value = Math.round(res.data[i].num/sum * 10000) / 100.00
                    }else if(res.data[i].REMEXCPRES == '2'){
                        map.name = '个体工商户向工商行政管理部门报送更正后的纸质年度报告并申请恢复正常记载状态  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
                        map.value = Math.round(res.data[i].num/sum * 10000) / 100.00
                    }else if(res.data[i].REMEXCPRES == '3'){
                        map.name = '被列入经营异常名录的企业更正其公示的信息后，申请移出  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
                        map.value = Math.round(res.data[i].num/sum * 10000) / 100.00
                    }else if(res.data[i].REMEXCPRES == '4'){
                        map.name = '个体工商户提出通过登记的经营场所或者经营者住所可以重新取得联系  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
                        map.value = Math.round(res.data[i].num/sum * 10000) / 100.00
                    }else if(res.data[i].REMEXCPRES == '5'){
                        map.name = '企业被列入经营异常名录之日起3年内依法办理注销的，由系统自动将其移出经营异常名录  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
                        map.value = Math.round(res.data[i].num/sum * 10000) / 100.00
                    }else if(res.data[i].REMEXCPRES == '6'){
                        map.name = '企业被吊销营业执照或办理注销登记后，不再列入经营异常名录  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
                        map.value = Math.round(res.data[i].num/sum * 10000) / 100.00
                    }else if(res.data[i].REMEXCPRES == '7'){
                        map.name = '企业被列入经营异常名录之日起3年内依法办理注销的，由系统自动将其移出经营异常名录  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
                        map.value = Math.round(res.data[i].num/sum * 10000) / 100.00
                    }else if(res.data[i].REMEXCPRES == '9'){
                        map.name = '已迁出  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
                        map.value = Math.round(res.data[i].num/sum * 10000) / 100.00
                    }
                    list.push(map)
                }
            }
            this.abnOutOption.series[0].data = list;
            this.drawAbnOut();
        })
    },
    methods: {
        drawILLOutRegion() {
            const illOutRegionChar = this.$echarts.init(document.getElementById('illOutRegion'))
            illOutRegionChar.setOption(this.illOutRegionOption)
            window.addEventListener("resize", () => {
                if(illOutRegionChar){
                illOutRegionChar.resize()
                }
            })
        },
        drawAbnOut() {
            this.abnOutLoading = true
            const abnOutChar = this.$echarts.init(document.getElementById('abnOut'))
            abnOutChar.setOption(this.abnOutOption)
            window.addEventListener("resize", () => {
                if(abnOutChar){
                abnOutChar.resize()
                }
            })
            this.abnOutLoading = false
        },
        changeTab(value) {
            this.active = value
            this.$nextTick(() => {
                let list = []
                for(let i in this.outRegionIllDetails){
                if(this.outRegionIllDetails[i].name == value){
                    let sum = 0
                    for(let j in this.outRegionIllDetails[i].detail){
                    sum += this.outRegionIllDetails[i].detail[j].num
                    }
                    this.illOutRegionOption.series[0].label.normal.formatter = value + "\n\n移出严重违法数量\n\n" + sum;
                    for(let j in this.outRegionIllDetails[i].detail){
                    let map = {}
                    if(this.outRegionIllDetails[i].detail[j].REMEXCPRES == '3'){
                        map.name = '企业被吊销营业执照或办理注销登记后，不再列入严重违法失信企业名单或经营异常名录  ' + Math.round(this.outRegionIllDetails[i].detail[j].num/sum * 10000) / 100.00 + '%'
                        map.value = this.outRegionIllDetails[i].detail[j].num
                    list.push(map)
                    }else if(this.outRegionIllDetails[i].detail[j].REMEXCPRES == '4'){
                        map.name = '当事人被列入严重违法失信名单之日起满三年的,停止公示相关信息，并解除相关管理措施  ' + Math.round(this.outRegionIllDetails[i].detail[j].num/sum * 10000) / 100.00 + '%'
                        map.value = this.outRegionIllDetails[i].detail[j].num
                    list.push(map)
                    }
                    else if(this.outRegionIllDetails[i].detail[j].REMEXCPRES == '5'){
                        map.name = '列入名单满一年，符合移出条件，当事人申请信用修复后，提前移出名单，停止公示  ' + Math.round(this.outRegionIllDetails[i].detail[j].num/sum * 10000) / 100.00 + '%'
                        map.value = this.outRegionIllDetails[i].detail[j].num
                        list.push(map)
                    }
                    }
                    break
                }
                }
                this.illOutRegionOption.series[0].data = list;
                this.drawILLOutRegion()
            })
        }
    }
}
</script>

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