<template>
  <el-row>
    <el-col :span="12">
      <el-card>
        <div style="width: 100%;height:440px;">
          <div id="illRegion" style="width: 100%;height:440px;"/>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <div style="width: 100%;height:440px;">
          <div id="illYear" style="width: 100%;height:440px;"/>
        </div>
      </el-card>
    </el-col>
    <el-col >
      <el-card style="text-align: center;">
        <div style="width: 100%;height:540px;">
          <div id="illIn" 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 class="region_btn" id="illOutRegion" style="width: 1600px;height:540px;"/>
        </div>
      </el-card>
    </el-col> -->
  </el-row>
</template>

<script>
import {getLatest} from '@/api/statistics'
export default {
  data() {
    return {
      active: '全市',
      //outRegionIllDetails: [],
      // 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: []
      //     }
      //   ]
      // },
      illInOption: {
        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: '10%',
        //   itemWidth: 20,
        //   itemHeight: 12,
        //   show: true,
        //   x:'right',
        //   orient: "vertical",
        //   //align: 'left',
        //   textStyle:{
        //     fontSize: 13,
        //   }
        // },
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{c}%'
        // },
        // color: ['#49BFB3','#5C84AF','#84377b','#15b43f','#f01836','#f0ae18','#1a1a1b','#83838c','#089051'],
        // series: [],
      },
      illYearOption: {
        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:20000, //取100为最大刻度
            type: 'value'
          },
          {
            min:-1,  //取0为最小刻度
            max:1, //取100为最大刻度
            type: 'value',
            axisLine: {show:false}, 
            axisTick: {show:false}, 
          },
        ],
        series: [
          {
            name: '严重主体违法数量',
            type: 'line',
            data: []
          },
          {
            name: '同比增长率',
            type: 'line',
            yAxisIndex: 1,
            // tooltip: {
            //   trigger: 'item',
            //   formatter: '{c}'
            // },
            data: []
          }
        ]
      },
      illRegionOption: {
        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,
            }
          }
        ]
        // title: {
        //   text: '区域严重违法主体分布'
        // },
        // legend: {
        //   data: ['已报数量'],
        //   x: 'right'
        // },
        // radar: {
        //   // shape: 'circle',
        //   indicator: [],
        //   // name: {
        //   //   formatter: {c}
        //   // }
        // },
        // color: ['#49BFB3'],
        // series: [
        //   {
        //     name: 'Budget vs spending',
        //     type: 'radar',
        //     data: [
        //       {
        //         value: [],
        //         name: '已报数量',
        //         areaStyle: {
        //           color: '#5cc9e2'
        //         },
        //         //拐点显示数值
        //         // label: {
        //         //   show: true
        //         // }
        //       }
        //     ]
        //   }
        // ]
      },
    }
  },
  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('in_ill').then(res => {
      console.log(res,'type_fraud')
      let list = []
      let sum = 0
      for(let i in res.data){
          if(res.data[i].LOSTCREDITEXPLAIN != null){
          sum += res.data[i].num
          }
      }
      this.illInOption.series[0].label.normal.formatter = "全市\n\n严重违法主体数量\n\n" + sum
      for(let i in res.data){
          if(res.data[i].LOSTCREDITEXPLAIN != null){
              let map = {}
              if(Math.round(res.data[i].num/sum * 10000) != 0){
                map.name = res.data[i].LOSTCREDITEXPLAIN + '  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
                map.value = res.data[i].num
                list.push(map)
              }
              // map.name = res.data[i].LOSTCREDITEXPLAIN + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
              // map.value = res.data[i].num
              // list.push(map)
          }
      }
      this.illInOption.series[0].data = list;
      this.drawILLIn()
      // console.log(res,'in_ill')
      // let sum = 0
      //   for(let i in res.data){
      //     if(res.data[i].SERILLREA != null){
      //       sum += res.data[i].num
      //     }
      //   }
      //   for(let i in res.data){
      //     let map = {
      //       center: ['10%','50%'],
      //       type: 'bar',
      //       barWidth: 15,
      //       name: [],
      //       data: [],
      //       coordinateSystem: 'polar',
      //       label: {
      //         position: 'top',
      //         formatter: '{c}'
      //       },
      //       itemStyle: {
      //         label:{
      //           show: true,
      //           position: 'top',
      //           formatter: '{c}'
      //         }
      //       }
      //     }
      //     if(res.data[i].LOSTCREDITEXPLAIN != null){
      //       if(Math.round(res.data[i].num/sum * 10000) != 0){
      //         map.name = [res.data[i].LOSTCREDITEXPLAIN + '  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%']
      //         map.data = [Math.round(res.data[i].num/sum * 10000) / 100.00]
      //       }
      //     }
          
      //     this.illInOption.series.push(map);
      //   };
      //   //console.log(this.illInOption,'in_ill')
      //   this.drawILLIn()
    })
    getLatest('all_region_ill').then(res => {
      let xdata = []
      let ydata = []
      // console.log(res,'all_region_abn')
      for(let i in res.data){
          xdata.push(res.data[i].region);
          ydata.push(res.data[i].num / 10000);
      }
      this.illRegionOption.xAxis.data = xdata;
      this.illRegionOption.series[0].data = ydata;
      // console.log(this.abnRegionOption,'all_region_abn')
      this.drawILLRegion()
      // // console.log(res,'all_region_ill')
      // let value = []
      // let label = []
      // for(let i in res.data){
      //   label.push({name: res.data[i].region +'\n\n'+ res.data[i].num, max: 20000})
      //   value.push(res.data[i].num)
      // }
      // this.illRegionOption.radar.indicator = label
      // this.illRegionOption.series[0].data[0].value = value
      // // console.log(this.illRegionOption,'all_region_ill')
      // this.drawILLRegion()
    })
    getLatest('year_ill').then(res => {
      // console.log(res,'year_ill')
      let a = []
      let b = []
      let c = []
      let y = 0
      for(let i in res.data){
        a.push(res.data[i].num)
        b.push(res.data[i].years)
        if(i == 0){
          y = res.data[i].num+10000
          c.push(0.2)
        }else{
          c.push( Math.round((res.data[i].num - y)/y * 100)/100 )
          y = res.data[i].num
        }
      }
      this.illYearOption.series[0].data = a
      this.illYearOption.series[1].data = c
      this.illYearOption.xAxis.data = b
      //console.log(c,'year_ill')
      this.drawIllYear()
    })
    //this.drawYeardrawIllYearRegion()
  },
  methods: {
    // drawILLOutRegion() {
    //   const illOutRegionChar = this.$echarts.init(document.getElementById('illOutRegion'), null, {width:1600,height:540})
    //   illOutRegionChar.setOption(this.illOutRegionOption)
    // },
    drawILLIn() {
      const illInChar = this.$echarts.init(document.getElementById('illIn'))
      illInChar.setOption(this.illInOption)
      window.addEventListener("resize", () => {
        if(illInChar){
          illInChar.resize()
        }
      })
    },
    drawILLRegion() {
      const illRegionChar = this.$echarts.init(document.getElementById('illRegion'))
      illRegionChar.setOption(this.illRegionOption)
      window.addEventListener("resize", () => {
        if(illRegionChar){
          illRegionChar.resize()
        }
      })
    },
    drawIllYear() {
      const illYearChar = this.$echarts.init(document.getElementById('illYear'))
      illYearChar.setOption(this.illYearOption)
      window.addEventListener("resize", () => {
        if(illYearChar){
          illYearChar.resize()
        }
      })
    },
    // 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>
.region_btn {
    float: right;
    margin: 20 px;
}
</style>
