<template>
  <div class="box-wrapper">
    <div hidden >
      <iframe @load="loginNB" src="https://10.194.188.237/gz-aiceps-manage/login.jsp" />
    </div>
    <el-row>
      <el-col :xl="8" :lg="8" :md="24" :xs="24" :sm="24">
        <el-row>
          <el-col :span="24">
            <div
              class="block"
              style="
                background: #387dff;
                height: 294px;
              "
            >
              <img
                src="../../assets/images/menuIndex-1.png"
                style="
                  position: absolute;
                  left: 31px;
                  bottom: 16px;
                  width: 192px;
                  height: 137px;
                "
              >
              <div class="title-1" style="position: relative;z-index: 2">
                我的待办
              </div>
              <div class="content-1" style="position: relative;z-index: 2">
                今天新增<span
                  class="count"
                  style="
                    color: #fe7c4b;
                    width: 77px;
                  "
                  @click="goPath('/toDoList')"
                >{{ translateData.mrxz }}</span>件待办
              </div>
              <div class="content-1" style="position: relative;z-index: 2">
                共有<span
                  class="count"
                  style="
                    color: #f5bf51;
                    width: 77px;
                  "
                  @click="goPath('/toDoList')"
                >{{ translateData.dbzs }}</span>件待办
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div
              class="block"
              style="
                background: #48B86E;
                height: 178px;
              "
            >
              <div class="title-1" style="padding-bottom: 0px;">
                我的已办
              </div>
              <div class="content-1">
                今天新增<span
                  class="count"
                  style="
                    color: #FE7C4B;
                    width: 77px;
                  "
                  @click="goPath('/finishTodoList')"
                >{{ translateData.mryb }}</span>件已办
              </div>
              <div class="content-1">
                共有<span
                  class="count"
                  style="
                    color: #F5BF51;
                    width: 77px;
                  "
                  @click="goPath('/finishTodoList')"
                >{{ translateData.yb }}</span>件已办
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xl="24" :lg="24" :md="24" :xs="24" :sm="24">
            <div
              class="block"
              style="
                background: rgba(50,150,250,0.08);
                min-height: 256px;
              "
            >
              <el-row style="position: relative;">
                <el-col :span="12">
                  <div class="title-2">
                    <div class="icon" style="background: #3296fa;">
                      <img src="../../assets/images/menuIndex-10.png">
                    </div>
                    <span>
                      经营异常（列入）
                    </span>
                  </div>
                </el-col>
                <!--                <el-col :span="12" style="position: absolute;right: 0;bottom: 0;padding-right: 20px;">-->
                <!--                  <div class="content-2">-->
                <!--                    <div class="content-2-name">个体户经营异常移出</div>-->
                <!--                    <span-->
                <!--                      class="count"-->
                <!--                      style="-->
                <!--                        color: #FE7C4B;-->
                <!--                        width: 57px;-->
                <!--                      "-->
                <!--                      @click="gotoTodoList({-->
                <!--                        activeName: 'abnormal'-->
                <!--                      })"-->
                <!--                    >{{ translateData.gtbjStr }}</span>-->
                <!--                  </div>-->
                <!--                </el-col>-->
              </el-row>
              <div class="content">
                <el-row style="padding: 0 20px;">
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">企业经营异常列入</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'abnormal',
                          bustype: '5'
                        })"
                      >{{ translateData.yclr }}</span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">个体户经营异常异议</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'abnormal'
                        })"
                      >0</span>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="padding: 0 20px;">
                  <!--                <el-col :span="12">-->
                  <!--                  <div class="content-2">-->
                  <!--                    <div class="content-2-name">企业经营异常移除</div>-->
                  <!--                    <span-->
                  <!--                      class="count"-->
                  <!--                      style="-->
                  <!--                        color: #FE7C4B;-->
                  <!--                        width: 57px;-->
                  <!--                      "-->
                  <!--                      @click="gotoTodoList({-->
                  <!--                        activeName: 'abnormal'-->
                  <!--                      })"-->
                  <!--                    >{{ translateData.ycyc }}</span>-->
                  <!--                  </div>-->
                  <!--                </el-col>-->
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">农专社经营异常列入</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'abnormal',
                          bustype: '13'
                        })"
                      >{{ translateData.nzlr }}</span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">农专社经营异常异议</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'abnormal'
                        })"
                      >0</span>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="padding: 0 20px;">
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">个体户经营异常列入</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'abnormal',
                          bustype: '11'
                        })"
                      >{{ translateData.gtbj }}</span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">企业经营异常异议</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'abnormal',
                          bustype: '6'
                        })"
                      >{{ translateData.ycyy }}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :xl="16" :lg="16" :md="24" :xs="24" :sm="24">
        <el-row v-if="allMenunArr.includes('信用修复') || allMenunArr.includes('市场所协同')">
          <el-col v-if="allMenunArr.includes('信用修复')" :xl="12" :lg="12" :md="24" :xs="24" :sm="24">
            <div
              class="block"
              style="
                background: rgba(244,34,45,0.08);
                min-height: 178px;
              "
            >
              <div class="title-2">
                <div class="icon" style="background: #f4222d;">
                  <img src="../../assets/images/menuIndex-2.png">
                </div>
                <span>
                  信用修复
                </span>
              </div>
              <div class="content">
                <el-row style="padding: 0 20px;">
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">企业经营异常名录信用修复</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'repair',
                          bustype: '33'
                        })"
                      >{{ translateData.ycyc }}</span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">农专社经营异常名录信用修复</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'repair',
                          bustype: '33'
                        })"
                      >{{ translateData.nzyc }}</span>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="padding: 0 20px;">
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">个体户经营异常名录信用修复</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'repair',
                          bustype: '33'
                        })"
                      >{{ translateData.gthf }}</span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">严重违法失信企业信用修复</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'repair',
                          bustype: '33'
                        })"
                      >{{ translateData.xyxf }}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <el-col v-if="allMenunArr.includes('市场所协同')" :xl="12" :lg="12" :md="24" :xs="24" :sm="24">
            <div
              class="block"
              style="
                background: rgba(254,124,75,0.08);
                min-height: 178px;
              "
            >
              <div class="title-2">
                <div class="icon" style="background: #fe7c4b;">
                  <img src="../../assets/images/menuIndex-3.png">
                </div>
                <span>
                  市场所协同
                </span>
              </div>
              <div class="content">
                <el-row style="padding: 0 20px;">
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">现场核查任务</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'maketProblem',
                          bustype: '66'
                        })"
                      >{{ translateData.xchcrw }}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <el-col v-if="allMenunArr.includes('市场所监管')" :xl="12" :lg="12" :md="24" :xs="24" :sm="24">
            <div
              class="block"
              style="
                background: rgba(254,124,75,0.08);
                min-height: 178px;
              "
            >
              <div class="title-2">
                <div class="icon" style="background: #fe7c4b;">
                  <img src="../../assets/images/menuIndex-3.png">
                </div>
                <span>
                  市场所协同
                </span>
              </div>
              <div class="content">
                <el-row style="padding: 0 20px;">
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">待认领业务</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'maketProblem',
                          bustype: '32'
                        })"
                      >0</span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">双随机公开</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'maketProblem',
                          bustype: '32'
                        })"
                      >0</span>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="padding: 0 20px;">
                  <el-col :span="12">
                    <div class="content-2">
                      <span class="content-2-name">问题处置反馈</span>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'maketProblem',
                          bustype: '32'
                        })"
                      >0</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="allMenunArr.includes('信用风险分类监管') || allMenunArr.includes('总局一体化平台')">
          <el-col v-if="allMenunArr.includes('信用风险分类监管')" :xl="12" :lg="12" :md="24" :xs="24" :sm="24">
            <div
              class="block"
              style="
                background: rgba(35,184,153,0.08);
                min-height: 178px;
              "
            >
              <div class="title-2">
                <div class="icon" style="background: #48b86e;">
                  <img src="../../assets/images/menuIndex-4.png">
                </div>
                <span>
                  信用风险分类
                </span>
              </div>
              <el-row style="padding: 0 20px;">
                <el-col :span="12">
                  <div class="content-2">
                    <div class="content-2-name">信用风险异议申请</div>
                    <span
                      class="count"
                      style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                      @click="gotoTodoList({
                        activeName: 'risk',
                        bustype: '36'
                      })"
                    >0</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col v-if="allMenunArr.includes('总局一体化平台')" :xl="12" :lg="12" :md="24" :xs="24" :sm="24">
            <div
              class="block"
              style="
                background: rgba(35,184,153,0.08);
                min-height: 178px;
              "
            >
              <div class="title-2">
                <div class="icon" style="background: #48b86e;">
                  <img src="../../assets/images/menuIndex-5.png">
                </div>
                <span>
                  总局一体化
                </span>
              </div>
              <!--              <el-row style="padding: 0 20px;">-->
              <!--                <el-col :span="12">-->
              <!--                  <div class="content-2">-->
              <!--                    <div class="content-2-name">迁入企业</div>-->
              <!--                    <span-->
              <!--                      class="count"-->
              <!--                      style="-->
              <!--                        color: #FE7C4B;-->
              <!--                        width: 57px;-->
              <!--                      "-->
              <!--                      @click="gotoTodoList({-->
              <!--                        activeName: 'gzis',-->
              <!--                        bustype: '30'-->
              <!--                      })"-->
              <!--                    >0</span>-->
              <!--                  </div>-->
              <!--                </el-col>-->
              <!--                <el-col :span="12">-->
              <!--                  <div class="content-2">-->
              <!--                    <div class="content-2-name">异地流转</div>-->
              <!--                    <span-->
              <!--                      class="count"-->
              <!--                      style="-->
              <!--                        color: #FE7C4B;-->
              <!--                        width: 57px;-->
              <!--                      "-->
              <!--                      @click="gotoTodoList({-->
              <!--                        activeName: 'gzis',-->
              <!--                        bustype: '30'-->
              <!--                      })"-->
              <!--                    >0</span>-->
              <!--                  </div>-->
              <!--                </el-col>-->
              <!--              </el-row>-->
              <el-row style="padding: 0 20px;">
                <el-col :span="12">
                  <div class="content-2">
                    <span class="content-2-name">年报公示异议</span>
                    <span
                      class="count"
                      style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                      @click="gotoTodoList({
                        activeName: 'gzis',
                        bustype: '30'
                      })"
                    >{{ translateData.zjyth }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="allMenunArr.includes('批量吊销') || allMenunArr.includes('撤销登记案件')">
          <el-col v-if="allMenunArr.includes('批量吊销')" :xl="12" :lg="12" :md="24" :xs="24" :sm="24">
            <div
              class="block"
              style="
                background: rgba(245,191,81,0.08);
                height: 178px;
              "
            >
              <div class="title-2">
                <div class="icon" style="background: #f5bf51;">
                  <img src="../../assets/images/menuIndex-6.png">
                </div>
                <span>
                  批量吊销
                </span>
              </div>
              <el-row style="padding: 0 20px;">
                <el-col :span="12">
                  <div class="content-2">
                    <div class="content-2-name">批量吊销</div>
                    <span
                      class="count"
                      style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                      @click="gotoTodoList({
                        activeName: 'revoke'
                      })"
                    >{{ translateData.pldx }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col v-if="allMenunArr.includes('撤销登记案件')" :xl="12" :lg="12" :md="24" :xs="24" :sm="24">
            <div
              class="block"
              style="
                background: rgba(245,191,81,0.08);
                height: 178px;
              "
            >
              <div class="title-2">
                <div class="icon" style="background: #f5bf51;">
                  <img src="../../assets/images/menuIndex-7.png">
                </div>
                <span>
                  撤销登记案件
                </span>
              </div>
              <el-row style="padding: 0 20px;">
                <el-col :span="12">
                  <div class="content-2">
                    <div class="content-2-name">撤销登记案件</div>
                    <span
                      class="count"
                      style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                      @click="gotoTodoList({
                        activeName: 'cancel'
                      })"
                    >{{ translateData.mytrxx }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="content-2">
                    <div class="content-2-name">撤销登记实地核查</div>
                    <span
                      class="count"
                      style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                      @click="gotoTodoList({
                        activeName: 'fraudCheck'
                      })"
                    >{{ translateData.cxdjsdhc }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="allMenunArr.includes('联合惩戒') || allMenunArr.includes('严重违法失信企业管理')">
          <el-col v-if="allMenunArr.includes('联合惩戒')" :xl="12" :lg="12" :md="24" :xs="24" :sm="24">
            <div
              class="block"
              style="
                background: rgba(50,150,250,0.08);
                height: 178px;
              "
            >
              <div class="title-2">
                <div class="icon" style="background: #3296fa;">
                  <img src="../../assets/images/menuIndex-8.png">
                </div>
                <span>
                  联合惩戒
                </span>
              </div>
              <el-row style="padding: 0 20px;">
                <el-col :span="12">
                  <div class="content-2">
                    <div class="content-2-name">联合惩戒锁定</div>
                    <span
                      class="count"
                      style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                      @click="gotoTodoList({
                        activeName: 'punishment',
                        bustype: '61'
                      })"
                    >{{ translateData.lhcjsD }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="content-2">
                    <div class="content-2-name">联合惩戒解锁</div>
                    <span
                      class="count"
                      style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                      @click="gotoTodoList({
                        activeName: 'punishment',
                        bustype: '62'
                      })"
                    >{{ translateData.lhcjjS }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col v-if="allMenunArr.includes('严重违法失信企业管理')" :xl="12" :lg="12" :md="24" :xs="24" :sm="24">
            <div
              class="block"
              style="
                background: rgba(50,150,250,0.08);
                min-height: 178px;
              "
            >
              <div class="title-2">
                <div class="icon" style="background: #3296fa;">
                  <img src="../../assets/images/menuIndex-9.png">
                </div>
                <span>
                  严重违法失信
                </span>
              </div>
              <div class="content">
                <el-row style="padding: 0 20px;">
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">严重违法失信拟列入</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'illegal'
                        })"
                      >{{ translateData.yzwfnlr }}</span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">严重违法失信异议</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'illegal'
                        })"
                      >{{ translateData.yzwfyy }}</span>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="padding: 0 20px;">
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">严重违法列入（行政处罚）</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'illegal'
                        })"
                      >{{ translateData.yzwflrxzcf }}</span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="content-2">
                      <div class="content-2-name">严重违法列入（列异满3年）</div>
                      <span
                        class="count"
                        style="
                        color: #FE7C4B;
                        width: 57px;
                      "
                        @click="gotoTodoList({
                          activeName: 'illegal'
                        })"
                      >{{ translateData.yzwflrthree }}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { abnormal } from '@/api/regulatoryPlatForm'
import { logManage } from '@/api/user.js'
export default {
  data() {
    return {
      primaryKey: this.$store.state.user.keys,
      translateData: {},
      user: JSON.parse(sessionStorage.getItem('user'))
    }
  },
  computed: {
    allMenunArr() {
      return this.getMenuTitle(this.$store.state.permission.addRoutes)
    }
  },
  mounted() {
    this.regulatoryPlatForm()
  },
  methods: {
    loginNB(){
      this.loginManage()
    },
    loginManage() {
      const params = {
        auditUserName: this.user.username
      }
      logManage(params).then(res => {
        console.log(res)
      })
    },
    regulatoryPlatForm() {
      const params = {
        aicUserId: this.primaryKey
      }
      abnormal(params).then(res => {
        if (res.code === 0) {
          this.translateData = res.data
        }
      })
    },
    getMenuTitle(menus = []) {
      return menus.map((menu) => {
        return [menu.meta ? menu.meta.title : undefined, ...this.getMenuTitle(menu.children)]
      }).flat(1).filter((item) => {
        return item
      })
    },
    goPath(path, query = {}) {
      this.$router.push({ path, query })
    },
    gotoTodoList(params = {}) {
      sessionStorage.setItem('activeName', params.activeName)
      this.$router.push({ path: '/toDoList', query: params })
    },
    gotoClue(path) {
      this.$router.push({ path: path })
    }
  }
}
</script>

<style lang="scss" scoped>
/* 去掉滚动条 */
.box-wrapper::-webkit-scrollbar { width: 0 !important }
.box-wrapper { -ms-overflow-style: none!important }
.box-wrapper { scrollbar-width: none}
.box-wrapper {
  background: #fff;
  padding: 32px 32px 64px 32px;
  margin: 20px;
  height: 100%;
  overflow-y: auto;
  .block{
    position: relative;
    border-radius: 10px;
    box-shadow: 0px 16px 20px 0px rgba(56,125,255,0.14);
    margin: 8px;
    .title-1{
      font-size: 24px;
      font-weight: 500;
      color: #ffffff;
      padding: 30px 0 40px 16px;
    }
    .title-2{
      padding: 22px 0 9px 32px;
      font-size: 18px;
      font-weight: 500;
      color: #000000;
      display: flex;
      align-items: center;
      .icon{
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
        width: 48px;
        height: 48px;
        box-shadow: 0px 3px 6px 0px rgba(50,150,250,0.15);
        border-radius: 48px;
        margin-right: 14px;
        img{
          width: 48px;
          height: 48px;
          display: inline-block;
        }
      }
    }
    .content{
      padding: 0 0 20px 0;
    }
    .content-1{
      font-size: 18px;
      font-weight: 500;
      color: #ffffff;
      text-align: right;
      justify-content: flex-end;
      padding: 0 50px 0 0;
      display: flex;
      align-items: center;
    }
    .content-2{
      font-size: 14px;
      font-weight: 400;
      text-align: right;
      color: #666666;
      display: flex;
      align-items: center;
      .content-2-name{
        width: 100%;
        text-align: right;
      }
      .count{
        flex-shrink: 0;
      }
    }
    .count{
      display: inline-block;
      font-size: 32px;
      font-weight: 500;
      margin: 0 10px;
      cursor: pointer;
    }
  }
}
</style>
