<template>
  <div class="home_container">
    <div class="header_box">
      <div class="header_wrap">
        <div class="title">内蒙古自治区信用监管综合系统</div>
        <div class="tag">
          <div>首页</div>
          <div @click="entryMenu">主菜单</div>
        </div>
        <div class="welcome">
          <span>您好，{{ name }}&nbsp;{{ orgName }}&nbsp;{{ unitName }}</span>
          <el-button size="mini" @click="logout">退出</el-button>
        </div>
      </div>
    </div>
    <div class="content_wrap">
      <div class="top_wrap">
        <div class="left_wrap">
          <div class="title">内蒙古自治区信用风险热力图</div>
          <div class="item_content_first">
            <div class="item_title">内蒙古自治区高风险较高风险企业总数</div>
            <div class="item_num">1</div>
          </div>
          <div class="item_content_second">
            <div class="item_box">
              <div class="item_box_title">高风险</div>
              <div class="item_box_content">
                <span class="item_box_content_title">上个月新增<i class="el-icon-top" style="font-size: 24px;color: #da951d;" /></span>
                <span class="item_box_content_num">122</span>
              </div>
            </div>
            <div class="item_box">
              <div class="item_box_title">较高风险</div>
              <div class="item_box_content">
                <span class="item_box_content_title">上个月新增<i class="el-icon-top" style="font-size: 24px;color: #da951d;" /></span>
                <span class="item_box_content_num">188</span>
              </div>
            </div>
            <div class="item_box">
              <div class="item_box_title">中风险</div>
              <div class="item_box_content">
                <span class="item_box_content_title">上个月新增<i class="el-icon-top" style="font-size: 24px;color: #da951d;" /></span>
                <span class="item_box_content_num">542</span>
              </div>
            </div>
            <div class="item_box">
              <div class="item_box_title">低风险</div>
              <div class="item_box_content">
                <span class="item_box_content_title">上个月新增<i class="el-icon-top" style="font-size: 24px;color: #da951d;" /></span>
                <span class="item_box_content_num">436</span>
              </div>
            </div>
          </div>
          <div class="item_content_third">
            <div class="item_title">风险企业地区 <span>TOP5</span></div>
            <div class="item_progress">
              <div class="item_progress_box">
                <div class="item_progress_area">1.天河区</div>
                <div class="item_progress_echart">
                  <el-progress :percentage="100" :color="customColors" />
                </div>
              </div>
              <div class="item_progress_box">
                <div class="item_progress_area">2.白云区</div>
                <div class="item_progress_echart">
                  <el-progress :percentage="80" :color="customColors" />
                </div>
              </div>
              <div class="item_progress_box">
                <div class="item_progress_area">3.海珠区</div>
                <div class="item_progress_echart">
                  <el-progress :percentage="60" :color="customColors" />
                </div>
              </div>
              <div class="item_progress_box">
                <div class="item_progress_area">4.番禺区</div>
                <div class="item_progress_echart">
                  <el-progress :percentage="40" :color="customColors" />
                </div>
              </div>
              <div class="item_progress_box">
                <div class="item_progress_area">5.越秀区</div>
                <div class="item_progress_echart">
                  <el-progress :percentage="20" :color="customColors" />
                </div>
              </div>
            </div>
          </div>
          <div class="gz_echart">
            <div id="gzMap" :style="{width: '100%', height: '100%'}" />
          </div>
        </div>
        <div class="right_wrap">
          <div class="item_content_box_first">
            <div class="item_title">风险主体类型分布</div>
            <div class="item_wrap">
              <div class="item_box">
                <div class="item_box_num">1,344</div>
                <div class="item_box_bottom">
                  <div class="item_box_bottom_text">有限责任公司</div>
                  <div class="item_box_bottom_num">
                    <span>+3.2%</span>
                    <i class="el-icon-top" />
                  </div>
                </div>
              </div>
              <div class="item_box">
                <div class="item_box_num">2,239</div>
                <div class="item_box_bottom">
                  <div class="item_box_bottom_text">内资企业法人</div>
                  <div class="item_box_bottom_num">
                    <span>+1.2%</span>
                    <i class="el-icon-top" />
                  </div>
                </div>
              </div>
              <div class="item_box">
                <div class="item_box_num">1,034</div>
                <div class="item_box_bottom">
                  <div class="item_box_bottom_text">个人独资企业</div>
                  <div class="item_box_bottom_num">
                    <span>+2.4%</span>
                    <i class="el-icon-top" />
                  </div>
                </div>
              </div>
              <div class="item_box">
                <div class="item_box_num">4,102</div>
                <div class="item_box_bottom">
                  <div class="item_box_bottom_text">股份有限公司</div>
                  <div class="item_box_bottom_num">
                    <span>+1.8%</span>
                    <i class="el-icon-top" />
                  </div>
                </div>
              </div>
              <div class="item_box">
                <div class="item_box_num">344</div>
                <div class="item_box_bottom">
                  <div class="item_box_bottom_text">内资分公司</div>
                  <div class="item_box_bottom_num">
                    <span>+6.3%</span>
                    <i class="el-icon-top" />
                  </div>
                </div>
              </div>
              <div class="item_box">
                <div class="item_box_num">262</div>
                <div class="item_box_bottom">
                  <div class="item_box_bottom_text">非公司私营企业</div>
                  <div class="item_box_bottom_num">
                    <span>+1.0%</span>
                    <i class="el-icon-top" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="item_content_box_second">
            <div class="item_title">风险分类占比</div>
            <div class="item_echart">
              <div id="pieEchart" :style="{width: '100%', height: '300px'}" />
            </div>
            <div class="item_echart_info">
              <div class="item_echart_info_child">
                <div class="item_echart_info_child_title">高风险</div>
                <div class="item_echart_info_child_num">37%</div>
              </div>
              <div class="item_echart_info_child">
                <div class="item_echart_info_child_title">中风险</div>
                <div class="item_echart_info_child_num">27%</div>
              </div>
              <div class="item_echart_info_child">
                <div class="item_echart_info_child_title">较高风险</div>
                <div class="item_echart_info_child_num">22%</div>
              </div>
              <div class="item_echart_info_child">
                <div class="item_echart_info_child_title">低风险</div>
                <div class="item_echart_info_child_num">14%</div>
              </div>
            </div>
          </div>
          <div class="item_content_box_third">
            <div class="item_title">快速入口</div>
            <div class="item_link_wrap">
              <div class="item_link_box">
                <div class="item_link_img">
                  <img src="../../assets/images/index_application.png">
                </div>
                <div class="item_link_text">添加应用</div>
              </div>
              <div class="item_link_box">
                <div class="item_link_img">
                  <img src="../../assets/images/index_repair.png">
                </div>
                <div class="item_link_text">信用修复</div>
              </div>
              <div class="item_link_box">
                <div class="item_link_img">
                  <img src="../../assets/images/index_contract.png">
                </div>
                <div class="item_link_text">守信用重合同</div>
              </div>
              <div class="item_link_box">
                <div class="item_link_img">
                  <img src="../../assets/images/index_credit.png">
                </div>
                <div class="item_link_text">资信管理</div>
              </div>
              <div class="item_link_box">
                <div class="item_link_img">
                  <img src="../../assets/images/index_market.png">
                </div>
                <div class="item_link_text">市场协同</div>
              </div>
              <div class="item_link_box">
                <div class="item_link_img">
                  <img src="../../assets/images/index_random.png">
                </div>
                <div class="item_link_text">双随机</div>
              </div>
              <div class="item_link_box">
                <div class="item_link_img">
                  <img src="../../assets/images/index_risk.png">
                </div>
                <div class="item_link_text">信用风险</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom_wrap">
        <div class="item_wrap">
          <div class="item_wrap_title">年报总数</div>
          <ul class="item_wrap_box">
            <li class="item_wrap_box_child">
              <div class="item_wrap_box_child_text">应报总数</div>
              <div class="item_wrap_box_child_num">6,418,000</div>
            </li>
            <li class="item_wrap_box_child">
              <div class="item_wrap_box_child_text">未报总数</div>
              <div class="item_wrap_box_child_num">14,146,235</div>
            </li>
            <li class="item_wrap_box_child">
              <div class="item_wrap_box_child_text">年报率</div>
              <div class="item_wrap_box_child_num">54.85%</div>
            </li>
          </ul>
        </div>
        <div class="item_wrap">
          <div class="item_wrap_title">双随机统计</div>
          <ul class="item_wrap_box">
            <li class="item_wrap_box_child">
              <div class="item_wrap_box_child_text">计划</div>
              <div class="item_wrap_box_child_num">3,589</div>
            </li>
            <li class="item_wrap_box_child">
              <div class="item_wrap_box_child_text">任务</div>
              <div class="item_wrap_box_child_num">25,145</div>
            </li>
            <li class="item_wrap_box_child">
              <div class="item_wrap_box_child_text">抽查对象</div>
              <div class="item_wrap_box_child_num">28</div>
            </li>
          </ul>
        </div>
        <div class="item_wrap">
          <div class="item_wrap_title">批量吊销</div>
          <ul class="item_wrap_box">
            <li class="item_wrap_box_child">
              <div class="item_wrap_box_child_text">业务总量</div>
              <div class="item_wrap_box_child_num">485,433</div>
            </li>
            <li class="item_wrap_box_child">
              <div class="item_wrap_box_child_text">在办业务</div>
              <div class="item_wrap_box_child_num">256,478</div>
            </li>
          </ul>
        </div>
        <div class="item_wrap">
          <div class="item_wrap_title">经营异常名录</div>
          <ul class="item_wrap_box">
            <li class="item_wrap_box_child">
              <div class="item_wrap_box_child_text">未年报</div>
              <div class="item_wrap_box_child_num">6,418,000</div>
            </li>
            <li class="item_wrap_box_child">
              <div class="item_wrap_box_child_text">实地查无</div>
              <div class="item_wrap_box_child_num">14,146,235</div>
            </li>
            <li class="item_wrap_box_child">
              <div class="item_wrap_box_child_text">公式信息弄虚作假</div>
              <div class="item_wrap_box_child_num">418,000</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <el-dialog
      title="系统提示"
      :visible.sync="templateDialog"
      :show-close="false"
      width="30%"
    >
      <span>当前密码为初始化密码，请前往系统管理修改密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelToUpdatePwd">取 消</el-button>
        <el-button type="primary" @click="toUpdatePwd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import gzMapJson from '../../assets/json/GuangZhou.json'
import { mapGetters } from 'vuex'
// import { asyncRoutes } from '../../router/index'
export default {
  data() {
    return {
      templateDialog: false,
      // top5占比颜色
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fd', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ],
      // 饼状图
      pieOptions: {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '风险分类',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 735, name: '高风险' },
              { value: 580, name: '较高风险' },
              { value: 484, name: '中风险' },
              { value: 300, name: '低风险' }
            ]
          }
        ]
      },
      // 广州地图
      mapOptions: {
        // tooltip: {
        //   trigger: 'item'
        // },
        series: [
          {
            name: 'gzMap',
            type: 'map',
            mapType: 'gzMap',
            zoom: 1,
            aspectScale: 1, // 地图长度比
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#333',
                  fontSize: 16
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: '#333',
                  fontSize: 16
                }
              }
            },
            data: []
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['name', 'unitName', 'orgName'])
  },
  beforeMount() {
    if (this.$store.state.user.unitName === '市局领导') {
      // this.$router.push({ path: this.redirect || '/' })
    } else {
      this.$router.push({ path: '/menuIndex' })
    }
  },
  mounted() {
    this.drawPie()
    this.drawGzMap()
    this.checkPassword()
  },
  methods: {
    checkPassword() {
      const param = this.$route.query.queryOlderP
      if (param === '1') {
        this.templateDialog = true
      }
    },
    toUpdatePwd() {
      this.templateDialog = false
      this.$router.push({ path: '/aiccs/system/updatePassword' })
    },
    cancelToUpdatePwd() {
      this.templateDialog = false
      this.$router.push({ path: this.redirect || '/' })
    },
    drawPie() {
      // 基于准备好的dom，初始化echarts实例
      const pieEchart = this.$echarts.init(document.getElementById('pieEchart'))
      // 绘制图表
      pieEchart.setOption(this.pieOptions)
    },
    drawGzMap() {
      const gzMap = this.$echarts.init(document.getElementById('gzMap'))
      this.$echarts.registerMap('gzMap', gzMapJson, {})
      gzMap.setOption(this.mapOptions)
    },
    // 进入主菜单
    entryMenu() {
      // const path = this.findFirstPath(asyncRoutes)
      this.$router.push({ path: '/menuIndex' })
    },
    // 遍历路由获取第一个path
    findFirstPath(list) {
      const data = list[0]
      let path = ''
      if (data) {
        path = data.path
        if (data.children && data.children.length > 0) {
          path = this.findFirstPath(data.children)
        }
      }
      return path
    },
    // 退出系统
    async logout() {
      await this.$store.dispatch('user/logout')
      window.location.href = process.env.VUE_APP_ENV === 'dev' ? `/login` : `/integration/#/login`
    }
  }
}
</script>
<style lang="scss" scoped>
  .home_container{
    position: relative;
    width: 100%;
    background: linear-gradient(to right, rgb(16,21,100) 0%, rgb(2,20,140) 50%, rgb(19,21,94) 100%);
    color: #fff;
    padding-top: 105px;
    padding-bottom: 30px;
    .header_box{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      background: linear-gradient(to right, rgb(16,21,100) 0%, rgb(2,20,140) 50%, rgb(19,21,94) 100%);
      z-index: 999;
    }
    .header_wrap{
      position: relative;
      height: 100px;
      background-image: url('./../../assets/images/index_bg.png');
      background-size:100% 100%;
      background-repeat: no-repeat;
      .title{
        position: absolute;
        top: 50%;
        width: 100%;
        font-size: 24px;
        text-align: center;
      }
      .tag{
        font-size: 24px;
        position: absolute;
        left: 7%;
        top: 60%;
        div{
          padding: 5px 20px;
          display: inline-block;
          background: #3A4BFC;
          cursor: pointer;
          &:not(:nth-of-type(1)){
            margin-left: 15px;
          }
        }
      }
      .welcome{
        font-size: 14px;
        position: absolute;
        top: 60%;
        right: 20px;
      }
    }
    .content_wrap{
      padding: 0 16px;
      margin-top: 30px;
      .top_wrap{
        display: flex;
        justify-content: space-between;
        .left_wrap{
          position: relative;
          width: 43%;
          padding: 16px 2%;
          border: 3px solid #1257c9;
          border-radius: 23px;
          .title{
            font-size: 24px;
            padding:2px 0 2px 20px;
            border-left: 10px solid #a5d0f2;
          }
          .item_content_first{
            margin-top: 23px;
            .item_title{
              font-size: 18px;
              color: #70aeff;
              margin-bottom: 16px;
            }
            .item_num{
              display: inline-block;
              width: 40px;
              height: 50px;
              text-align: center;
              line-height: 50px;
              font-size: 24px;
              border: 2px solid #0c73ff;
              border-radius: 8px;
            }
          }
          .item_content_second{
            .item_box{
              width: 35%;
              margin-top: 10px;
              background: rgba(96, 165, 250,.15);
              border-radius: 8px;
              padding: 10px 10px 16px 16px;
              .item_box_title{
                font-size: 24px;
                color: #60a4f9;
              }
              .item_box_content{
                margin-top: 10px;
                .item_box_content_title{
                  font-size: 14px;
                  color: #f7ec9f;
                }
                .item_box_content_num{
                  font-size: 30px;
                  letter-spacing: 2px;
                  margin-left: 16px;
                }
              }
            }
          }
          .item_content_third{
            margin-top: 38px;
            .item_title{
              font-size: 20px;
              color: #f4a35c;
              span{
                font-weight: 700;
              }
            }
            .item_progress{
              width: 50%;
              .item_progress_box{
                display: flex;
                align-items: center;
                margin-top: 16px;
                .item_progress_area{
                  width: 28%;
                  font-size: 16px;
                  opacity: 0.6;
                }
                .item_progress_echart{
                  flex: 1;
                }
              }
            }
          }
          .gz_echart{
            height: 100%;
            width: 60%;
            position: absolute;
            right: 0px;
            top: 0px;
          }
        }
        .right_wrap{
          width: 56%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .item_content_box_first,.item_content_box_second,.item_content_box_third{
            border: 3px solid #1257c9;
            border-radius: 23px;
            padding: 16px 2%;
            .item_title{
              font-size: 24px;
              padding:2px 0 2px 20px ;
              border-left: 10px solid #a5d0f2 ;
            }
          }
          .item_content_box_first{
            .item_wrap{
              display: flex;
              flex-wrap: wrap;
              .item_box{
                width: 33.33%;
                padding:5px 16px;
                margin-top: 24px;
                border-left: 3px solid #333fff;
                border-radius: 2px 0px 0px 2px;
                .item_box_num{
                  font-size: 32px;
                }
                .item_box_bottom{
                  margin-top: 25px;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  .item_box_bottom_text{
                    font-size: 18px;
                    opacity: 0.4;
                  }
                  .item_box_bottom_num{
                    font-size: 16px;
                    color: #fe7c4b;
                  }
                }
              }
            }
          }
          .item_content_box_second{
            margin-top: 24px;
            .item_echart{
              width: 20%;
              text-align: left;
              display: inline-block;
              vertical-align: middle;
            }
            .item_echart_info{
              width: 68%;
              display: inline-block;
              vertical-align: middle;
              margin-left: 10%;
              .item_echart_info_child{
                width: 48%;
                display: inline-block;
                font-size: 0;
                margin-top: 24px;
                padding: 0 5%;
                position: relative;
                ::before{
                  content: ' ';
                  position: absolute;
                  left: -15px;
                  top: 15px;
                  width: 12px;
                  height: 12px;
                  background-color: #c43631;
                  border-radius: 6px;
                }
                .item_echart_info_child_title{
                  display: inline-block;
                  font-size: 24px;
                  width: 60%;
                }
                .item_echart_info_child_num{
                  display: inline-block;
                  font-size: 24px;
                  width: 20%;
                  text-align: right;
                }
              }
              .item_echart_info_child:nth-of-type(2){
                ::before{
                  background-color: #6ab0b8;
                }
              }
              .item_echart_info_child:nth-of-type(3){
                ::before{
                  background-color: #394b5c;
                }
              }
              .item_echart_info_child:nth-of-type(4){
                ::before{
                  background-color: #d48265;
                }
              }
            }
          }
          .item_content_box_third{
            margin-top: 24px;
            .item_link_wrap{
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            .item_link_box{
              margin-top: 32px;
              text-align: center;
              .item_link_img{
                display:inline-block;
                width: 100px;
                height: 100px;
                opacity: 1;
                // background: rgba(255,255,255,0.20);
                // border: 1px solid #70aeff;
                text-align: center;
                line-height: 130px;
                img{
                  width: 100px;
                  height: 100px;
                }
              }
              .item_link_text{
                margin-top: 16px;
                letter-spacing: 0px;
                font-size: 16px;
                color: #60a4f9;
              }
            }
          }
        }
      }
      .bottom_wrap{
        margin-top: 24px;
        padding: 16px 2%;
        border: 3px solid #1257c9;
        border-radius: 23px;
        display: flex;
        .item_wrap{
          width: 25%;
          padding-right: 8%;
          .item_wrap_title{
            font-size: 24px;
            padding:2px 0 2px 20px;
            border-left: 10px solid #a5d0f2;
          }
          .item_wrap_box{
            padding-left: 30px;
            .item_wrap_box_child{
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 16px;
              position: relative;
              ::before{
                content: ' ';
                position: absolute;
                left: -30px;
                top: 16px;
                width: 12px;
                height: 12px;
                background-color: #a5d0f2;
                border-radius: 6px;
              }
              .item_wrap_box_child_text{
                font-size: 18px;
                opacity: .4;
              }
              .item_wrap_box_child_num{
                font-size: 28px;
              }
            }
          }
        }
      }
    }
  }
</style>
