<template>
  <el-row>
    <el-col :span="12">
      <el-card style="text-align: center;">
        <div style="width: 100%;height:28px;"></div>
        <div style="width: 100%;height:440px;">
          <div id="abnRegion" v-loading="abnRegionLoading" style="width: 100%;height:440px;text-align: center;"/>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card style="text-align: center;">
        <div>
          <div>
            <el-button  type="primary" size="mini" @click="changeTab('week')">
                按周
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTab('month')">
                按月
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTab('year')">
                按年
            </el-button>
          </div>
          <div  v-if="active === 'year'" style="width: 100%;height:440px;">
            <div id="abnYear" v-loading="abnYearLoading" style="width: 100%;height:440px;text-align: center;"/>
          </div>
          <div v-if="active === 'month'" style="width: 100%;height:440px;">
            <div id="abnMonth" v-loading="abnMonthLoading" style="width: 100%;height:440px;text-align: center;"/>
          </div>
          <div v-if="active === 'week'" style="width: 100%;height:440px;">
            <div id="abnWeek" v-loading="abnWeekLoading" style="width: 100%;height:440px;text-align: center;"/>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col >
      <el-card style="text-align: center;">
        <div style="width: 100%;height:440px;">
          <div>
            <el-button  type="primary" size="mini" @click="changeTabInAbn('all')">
                全市主体
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTabInAbn('company')">
                企业
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTabInAbn('individual')">
                个体户
            </el-button>
            <el-button  type="primary" size="mini" @click="changeTabInAbn('farmer')">
                农专
            </el-button>
          </div>
          <div id="abnIn" v-loading="abnInLoading" style="width: 100%;height:440px; text-align: center;"/>
          <!-- <div v-if="activeInAbn === 'all'">
            <div id="abnIn" v-loading="abnInLoading" style="width: 1600px;height:440px; text-align: center;"/>
          </div>
          <div v-if="activeInAbn === 'company'">
            <div id="abnIn" v-loading="abnInLoading" style="width: 1600px;height:440px; text-align: center;"/>
          </div>
          <div v-if="activeInAbn === 'individual'">
            <div id="abnIn" v-loading="abnInLoading" style="width: 1600px;height:440px; text-align: center;"/>
          </div>
          <div v-if="activeInAbn === 'farmer'">
            <div id="abnIn" v-loading="abnInLoading" style="width: 1600px;height:440px; text-align: center;"/>
          </div> -->
        </div>
      </el-card>
    </el-col>
    <!-- <el-col >
      <el-card style="text-align: center;">
        <div id="abnOut" v-loading="abnOutLoading" style="text-align: center;"/>
      </el-card>
    </el-col> -->
    <el-col></el-col>
  </el-row>
</template>

<script>
import {getLatest} from '@/api/statistics'
export default {
  data() {
    return {
      sum: 0,
      individualSum: 0,
      farmerSum: 0,
      companySum: 0,
      active: 'year',
      activeInAbn: 'all',
      inAbnDetails: [],
      abnRegionLoading: true,
      abnYearLoading: true,
      abnWeekLoading: true,
      abnMonthLoading: true,
      abnInLoading: true,
      //abnOutLoading: true,
      abnRegionOption: {
        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,
            }
          }
        ]
      },
      abnYearOption: {
        title: {
          text: '经营异常增长分析'
        },
        tooltip: {},
        legend: {
          data: ['已报数量'],
          x:'right',
        },
        xAxis: {
          data: []
        },
        yAxis: {
          // axisLabel: {
          //   formatter: ,
          // },
          name: "主体数（万）",
        },
        series: [
          {
            color: '#97a8be',
            name: '已报数量',
            type: 'bar',
            data: [],
            itemStyle: {
                //barBorderRadius: 5,
                borderWidth: 1,
            }
          }
        ]
      },
      abnMonthOption: {
        title: {
          text: '经营异常增长分析'
        },
        tooltip: {},
        legend: {
          data: ['已报数量'],
          x:'right',
        },
        xAxis: {
          data: []
        },
        yAxis: {
            name: "主体数（万）",
        },
        series: [
          {
            color: '#97a8be',
            name: '已报数量',
            type: 'bar',
            data: [],
            itemStyle: {
                //barBorderRadius: 5,
                borderWidth: 1,
            }
          }
        ]
      },
      abnWeekOption: {
        title: {
          text: '经营异常增长分析 （T为本周）'
        },
        tooltip: {},
        legend: {
          data: ['已报数量'],
          x:'right',
        },
        xAxis: {
          data: ["T-9","T-8","T-7","T-6","T-5","T-4","T-3","T-2","T-1","T",]
        },
        yAxis: {
            name: "主体数（万）",
        },
        series: [
          {
            color: '#97a8be',
            name: '已报数量',
            type: 'bar',
            data: [],
            itemStyle: {
                //barBorderRadius: 5,
                borderWidth: 1,
            }
          }
        ]
      },
      abnInOption: {
        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,
                //formatter: "\n广州列异数量\n\n12356",
                position: "center",
                fontSize: 20,
                //lineHight: 30
              },
              position: 'left'
            },
            itemStyle: {
              normal: {
                borderWidth : 2,
                borderColor: '#ffffff'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      },
      // abnOutOption: {
      //   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: [],
      // },
    }
  },
  mounted() {
    getLatest('year_abn').then(res => {
        let xdata = []
        let ydata = []
        // console.log(res,'year_abn')
        for(let i in res.data){
          xdata.push(res.data[i].years);
          ydata.push(res.data[i].num / 10000);
        }
        this.abnYearOption.xAxis.data = xdata;
        this.abnYearOption.series[0].data = ydata;
        // console.log(this.abnYearOption,'year_abn')
        this.drawAbnYear()
    })
    getLatest('month_abn').then(res => {
      // console.log(res,'month_abn')
      let xdata = []
      let ydata = []
      for(let i in res.data){
          xdata.push(res.data[i].months);
          ydata.push(res.data[i].num / 10000);
      }
      this.abnMonthOption.xAxis.data = xdata;
      this.abnMonthOption.series[0].data = ydata;
      // console.log(this.abnMonthOption,'month_abn')
    })
    getLatest('week_abn').then(res => {
      // console.log(res,'week_abn')
      //let xdata = []
      let ydata = []
      for(let i in res.data){
          //xdata.push(res.data[i].months);
          ydata.push(res.data[i]);
      }
      //this.abnWeekOption.xAxis.data = xdata;
      this.abnWeekOption.series[0].data = ydata;
      // console.log(this.abnWeekOption,'week_abn')
    })
    getLatest('all_region_abn').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.abnRegionOption.xAxis.data = xdata;
        this.abnRegionOption.series[0].data = ydata;
        // console.log(this.abnRegionOption,'all_region_abn')
        this.drawAbnRegion()
    })
    // getLatest('out_abn').then(res => {
    //     // console.log(res,'out_abn')
    //     let sum = 0
    //     for(let i in res.data){
    //       if(res.data[i].REMEXCPRES != 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].REMEXCPRES == '1'){
    //         map.name = ['个体工商户已按规定补报年度报告并申请恢复正常记载状态  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%']
    //         map.data = [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.data = [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.data = [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.data = [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.data = [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.data = [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.data = [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.data = [Math.round(res.data[i].num/sum * 10000) / 100.00]
    //       }
    //       this.abnOutOption.series.push(map);
    //     }
    //     // this.abnRegionOption.xAxis.data = xdata;
    //     // this.abnRegionOption.series[0].data = ydata;
    //     // console.log(this.abnOutOption,'out_abn')
    //     this.drawAbnOut()
    // })
    getLatest('in_abn').then(res => {
      this.inAbnDetails = res.data
      let list = []
      let sum = 0
      for(let i in res.data){
        if(i == 0) continue
        if(res.data[i].type == 'all'){
          sum += res.data[i].num
        }
      }
      this.abnInOption.series[0].label.normal.formatter = "全市\n\n列异主体数量\n\n" + res.data[0].sum
      for(let i in res.data){
        if(i == 0) continue
        if(res.data[i].type == 'all'){
          let map = {}
          if(res.data[i].SPECAUSE == '1'){
            map.name = '未按照《个体工商户年度报告暂行办法》规定报送年度报告  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
          }else if(res.data[i].SPECAUSE == '3'){
            map.name = '通过登记的经营场所及经营者住所无法与个体工商户取得联系  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
          }else if(res.data[i].SPECAUSE == '2'){
            map.name = '个体工商户年度报告隐瞒真实情况、弄虚作假  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
          }else if(res.data[i].SPECAUSE == '4'){
            map.name = '通过登记的住所或者经营场所无法联系的  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
          }else if(res.data[i].SPECAUSE == '5'){
            map.name = '经查实未在登记住所从事经营活动  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
          }else if(res.data[i].SPECAUSE == '6'){
            map.name = '登记机关认定为不适宜的商事主体名称  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
          }else if(res.data[i].SPECAUSE == null){
            map.name = '企业信息隐瞒真实情况、弄虚作假  ' + Math.round(res.data[i].num/sum * 10000) / 100.00 + '%'
          }
          map.value = res.data[i].num
          list.push(map)
        }
      }
      this.abnInOption.series[0].data = list;
      this.drawAbnIn()
    })
    //this.drawAbnOut()
  },
  methods: {
    // drawAbnOut() {
    //   this.abnOutLoading = true
    //   const abnOutChar = this.$echarts.init(document.getElementById('abnOut'), null, {width:1600,height:440})
    //   abnOutChar.setOption(this.abnOutOption)
    //   this.abnOutLoading = false
    // },
    drawAbnIn() {
      this.abnInLoading = true
      const abnInChar = this.$echarts.init(document.getElementById('abnIn'))
      abnInChar.setOption(this.abnInOption)
      window.addEventListener("resize", () => {
        if(abnInChar){
          abnInChar.resize()
        }
      })
      this.abnInLoading = false
    },
    drawAbnRegion() {
      this.abnRegionLoading = true
      const abnRegionChar = this.$echarts.init(document.getElementById('abnRegion'))
      abnRegionChar.setOption(this.abnRegionOption)
      window.addEventListener("resize", () => {
        if(abnRegionChar){
          abnRegionChar.resize()
        }
      })
      this.abnRegionLoading = false
    },
    drawAbnWeek() {
      this.abnWeekLoading = true
      const abnWeekChar = this.$echarts.init(document.getElementById('abnWeek'))
      abnWeekChar.setOption(this.abnWeekOption)
      window.addEventListener("resize", () => {
        if(abnWeekChar){
          abnWeekChar.resize()
        }
      })
      this.abnWeekLoading = false
    },
    drawAbnMonth() {
      this.abnMonthLoading = true
      const abnMonthChar = this.$echarts.init(document.getElementById('abnMonth'))
      abnMonthChar.setOption(this.abnMonthOption)
      window.addEventListener("resize", () => {
        if(abnMonthChar){
          abnMonthChar.resize()
        }
      })
      this.abnMonthLoading = false
    },
    drawAbnYear() {
      this.abnYearLoading = true
      const abnYearChar = this.$echarts.init(document.getElementById('abnYear'))
      abnYearChar.setOption(this.abnYearOption)
      window.addEventListener("resize", () => {
        if(abnYearChar){
          abnYearChar.resize()
        }
      })
      this.abnYearLoading = false
    },
    changeTab(value) {
      this.active = value
      if (value === 'year') {
        this.$nextTick(() => {
          this.drawAbnYear()
        })
      }else if(value === 'month') {
        this.$nextTick(() => {
          this.drawAbnMonth()
        })
      }else if(value === 'week') {
        this.$nextTick(() => {
          this.drawAbnWeek()
        })
      }
    },
    changeTabInAbn(value){
      console.log(this.inAbnDetails,'inAbnDetails')
      this.activeInAbn = value
      this.$nextTick(() => {
        let list = []
        let sum = 0
        for(let i in this.inAbnDetails){
          if(i == 0) continue
          if(this.inAbnDetails[i].type == value){
            sum += this.inAbnDetails[i].num
          }
        }
        let name = ''
        let numOfPri = ''
        if(value == 'all'){
          name = '全市'
          numOfPri = this.inAbnDetails[0].sum
        }
        else if(value == 'company'){
          name = '企业'
          numOfPri = this.inAbnDetails[0].companySum
        }
        else if(value == 'individual'){
          name = '个体户'
          numOfPri = this.inAbnDetails[0].individualSum
        }
        else if(value == 'farmer'){
          name = '农专'
          numOfPri = this.inAbnDetails[0].farmerSum
        }
        this.abnInOption.series[0].label.normal.formatter = name + "\n\n列异主体数量\n\n" + numOfPri
        for(let i in this.inAbnDetails){
          if(i == 0) continue
          if(this.inAbnDetails[i].type == value){
            let map = {}
            if(this.inAbnDetails[i].SPECAUSE == '1'){
              map.name = '未按照规定报送年度报告的  ' + Math.round(this.inAbnDetails[i].num/sum * 10000) / 100.00 + '%'
            }else if(this.inAbnDetails[i].SPECAUSE == '3'){
              map.name = '通过登记的经营场所无法取得联系  ' + Math.round(this.inAbnDetails[i].num/sum * 10000) / 100.00 + '%'
            }else if(this.inAbnDetails[i].SPECAUSE == '2'){
              map.name = '公示信息隐瞒真实情况、弄虚作假  ' + Math.round(this.inAbnDetails[i].num/sum * 10000) / 100.00 + '%'
            }else if(this.inAbnDetails[i].SPECAUSE == '4'){
              map.name = '经查实未在登记住所从事经营活动  ' + Math.round(this.inAbnDetails[i].num/sum * 10000) / 100.00 + '%'
            }else if(this.inAbnDetails[i].SPECAUSE == '5'){
              map.name = '登记机关认定为不适宜的商事主体名称  ' + Math.round(this.inAbnDetails[i].num/sum * 10000) / 100.00 + '%'
            }else if(this.inAbnDetails[i].SPECAUSE == '6'){
              map.name = '公示信息隐瞒真实情况、弄虚作假  ' + Math.round(this.inAbnDetails[i].num/sum * 10000) / 100.00 + '%'
            }
            // else if(this.inAbnDetails[i].SPECAUSE == null){
            //   map.name = '企业信息隐瞒真实情况、弄虚作假  ' + Math.round(this.inAbnDetails[i].num/sum * 10000) / 100.00 + '%'
            // }
            map.value = this.inAbnDetails[i].num
            list.push(map)
          }
        }
        this.abnInOption.series[0].data = list;
        this.drawAbnIn()
      })
    }
  }
}
</script>
<style>
.histogram {
    min-height: 230px;
    /* height: calc(50vh - 240px); */
    margin-bottom: 20px;
}
.title {
    font-weight: 600;
    color: #666666;
    margin-bottom: 10px;
}
</style>