<template>
  <div id="main-content" class="main-content m20">
    <!--头部-查询-->
    <div class="content-header">
      <searchHeader title="查询" />
      <div class="body search-body">
        <el-row>
          <el-col :span="12">
            <el-row>
              <label class="label-name_1">选择日期：</label> <!-- value-format="yyyy-MM-dd" 指定日期发送格式  -->
              <el-date-picker
                v-model="searchForm.searchDate"
                size="mini"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-row>
          </el-col>
          <el-col :span="4">
            <div class="btn-box">
              <el-button size="mini" type="primary" :loading="loading" @click="search">查询</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <label class="label-name_1">业务状态：</label>
          <el-radio-group v-model="searchForm.busstatus">
            <el-radio :label="0">全部</el-radio>
            <el-radio :label="1">完成审批</el-radio>
            <el-radio :label="2">审核/审批中</el-radio>
          </el-radio-group>
        </el-row>
      </div>
    </div>

    <div class="content-body">
      <!-- <table v-loading="loading" class="apply-table" wdith="100%">
        <tr>
          <th width="40%">业务类型</th>
          <th>业务数量</th>
        </tr>
        <tr v-for= "(item,i) in cphStatistics" :key="i">
          <th width="40%">{{ item.name }}</th>
          <td>{{ item.num }}</td>
        </tr>
      </table> -->
      <el-table
        v-loading="loading"
        :data="cphStatistics"
        :row-class-name="tableRowClassName"
        cell-class-name="cell-class-name"
        :header-cell-style="{'text-align':'center','background':'#5197FF',color:'#fff','fontWeight':'500','border-color':'#8CC3FB'}"
        style="wdith:100%;border:1px solid #8CC3FB"
        :cell-style="{'text-align':'center'}"
      >
        <el-table-column prop="orgunitname" label="单位" width="100px" fixed />
        <el-table-column label="业务类型" width="200px">
          <el-table-column label="异常经营名录" width="200px">
            <el-table-column label-class-name="bgColor" prop="abnlrnum" label="列入" width="60px" />
            <el-table-column label-class-name="bgColor" prop="abnycnum" label="移出" width="200px">
              <el-table-column label-class-name="bgColor" prop="abnycnumon" label="线上申请" width="100px" />
              <el-table-column label-class-name="bgColor" prop="abnycnumoff" label="线下申请" width="100px" />
            </el-table-column>
            <el-table-column label-class-name="bgColor" prop="abnyynum" label="异议" width="60px" />
          </el-table-column>
          <el-table-column label="严重违法失信" width="260px">
            <el-table-column label-class-name="bgColor" prop="leglrnum" label="列入" width="60px" />
            <el-table-column label-class-name="bgColor" prop="legxfnum" label="移出" width="200px">
              <el-table-column label-class-name="bgColor" prop="legycnumon" label="线上申请" width="100px" />
              <el-table-column label-class-name="bgColor" prop="legycnumoff" label="线下申请" width="100px" />
            </el-table-column>
            <el-table-column label-class-name="bgColor" prop="legyynum" label="异议" width="60px" />
          </el-table-column>
          <el-table-column prop="ualfknum" label="年报公示信息异议反馈" width="100px" />
          <el-table-column prop="mytrnum" label="冒用他人身份信息" width="100px" />
          <!--          <el-table-column prop="wtcznum" label="问题处置反馈" min-width="10%" />-->
          <!--          <el-table-column prop="
" label="严重违法信用修复" min-width="10%" />-->
          <!--          <el-table-column prop="xyfxyynum" label="信用风险异议申请" min-width="10%" />-->
          <!--          <el-table-column label="勘误">-->
          <!--            <el-table-column prop="abnkwnum" label-class-name="bgColor" label="列异勘误" min-width="20%" />-->
          <!--            <el-table-column prop="legkwnum" label-class-name="bgColor" label="列严勘误" min-width="20%" />-->
          <!--          </el-table-column>-->
          <el-table-column prop="pldxnum" label="批量吊销" width="100px" />
          <!--          <el-table-column prop="cxnum" label="撤销" min-width="10%" />-->
          <!--          <el-table-column prop="fynum" label="复议" min-width="10%" />-->
          <!--          <el-table-column prop="susnum" label="诉讼" min-width="10%" />-->
          <el-table-column label="联合惩戒">
            <el-table-column prop="locknum" label-class-name="bgColor" label="锁定" />
            <el-table-column prop="unlocknum" label-class-name="bgColor" label="解锁" />
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import searchHeader from '@/components/searchHeader'
import { queryCphStatistics } from '@/api/comprehensive'
export default {
  components: { searchHeader },
  data() {
    return {
      loading: false,
      searchForm: {
        searchDate: '',
        busstatus: 0
      },
      cphStatistics: [],
      operatestatusList: [{
        value: 'tsabnlist',
        label: '经营异常管理'
      }, {
        value: 'entlock',
        label: '联合惩戒'
      }, {
        value: 'eOtCase',
        label: '行政处罚'
      }, {
        value: 'tsserillegallist',
        label: '严重违法企'
      }, {
        value: 'eSusnateOperreg',
        label: '涉嫌冒用他人身份取得登记信息'
      }, {
        value: 'revokelist',
        label: '批量吊销'
      }]
    }
  },
  mounted() {
    // this.search() //不做初始化查询
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    search() {
      this.loading = true
      queryCphStatistics(this.searchForm).then(res => {
        if (res.code === 0) {
          this.cphStatistics = res.data
          // this.cphStatistics.forEach(each => {
          //   each.name = this.nameFormat(each.name)
          // })
          this.loading = false
          // const hz = {
          //   abnlrnum: 0,
          //   abnycnum: 0,
          //   abnyynum: 0,
          //   leglrnum: 0,
          //   legyynum: 0,
          //   legycnum: 0,
          //   ualfknum: 0,
          //   mytrnum: 0,
          //   pldxnum: 0,
          //   locknum: 0,
          //   unlocknum: 0
          // }
          // hz.orgunitname = '汇总'
          // this.cphStatistics.forEach(each => {
          //   hz.abnlrnum = hz.abnlrnum + each.abnlrnum
          //   hz.abnycnum = hz.abnycnum + each.abnycnum
          //   hz.abnyynum = hz.abnyynum + each.abnyynum
          //   hz.leglrnum = hz.leglrnum + each.leglrnum
          //   hz.legyynum = hz.legyynum + each.legyynum
          //   hz.legycnum = hz.legycnum + each.legycnum
          //   hz.ualfknum = hz.ualfknum + each.ualfknum
          //   hz.mytrnum = hz.mytrnum + each.mytrnum
          //   hz.pldxnum = hz.pldxnum + each.pldxnum
          //   hz.locknum = hz.locknum + each.locknum
          //   hz.unlocknum = hz.unlocknum + each.unlocknum
          // })
          // this.cphStatistics.push(hz)
        } else {
          this.$message.error(res.msg)
        }
      }).catch(_ => {
        this.loading = false
      })
    },
    nameFormat(code) {
      let name = ''
      this.operatestatusList.forEach(each => {
        if (each.value === code) {
          name = each.label
        }
      })
      return name
    }
  }
}
</script>
<style lang="scss" scoped>
.main-content{
  background: #fff;
  padding: 10pt;
  .content-header{
    background: white;
    .label-name_1 {
      text-align: right;
      display: inline-block;//转成行内快，才可定义宽度
      width: 100px;
      font-size: $table-content-font-size;
    }
    .search-input-box_1{
      display: inline-block;
      width: calc(100% - 110px);
    }
    .label-name_2 {
      text-align: right;
      display: inline-block;//转成行内快，才可定义宽度
      width: 110px;
      font-size: $table-content-font-size;
    }
    .search-input-box_2{
      display: inline-block;
      width: calc(100% - 120px);
    }
    .label-name_3 {
      text-align: right;
      display: inline-block;//转成行内快，才可定义宽度
      width: 140px;
      font-size: $font-size-content-text;
    }
    .custom{
      width: calc(100% - 150px);
    }
    .search-input{
      cursor: pointer;
    }
    .body{
      padding: 20px 0;
      border-top:none;
      margin-bottom: 40PX;
    }
  }
  .content-body{
    background:white
  }
  .header{
    .title{
      font-weight: 600;
      font-size: 1.2rem;
    }
  }
  .page-box{margin:10PX;text-align:right}
  .mb10{
    margin-bottom: 10px;
  }
  .btn-box{
    display: inline-block;
    padding-left: 10px;
  }
}
.apply-table{
  width: 100%;
  /*margin: 0 auto;*/
  border-collapse: collapse;
  padding:15px;
  font-size:18px;
  table{
    border-top: 1px solid $color-border;
    border-left: 1px solid $color-border;
  }
  tr{
    width:100%
  }
  th,td{
    border-top: 1px solid $color-border;
    border-left: 1px solid $color-border;
    border-right: 1px solid $color-border;
    border-bottom: 1px solid $color-border;
    padding:15px
  }
  th{
    color: #5e5e5e;
    font-weight: normal;
    background: $color-form-label
  }
  td{
    text-align: center;
  }
}
/deep/.bgColor{
  background: #7cb1ff!important;
}

/deep/.cell-class-name{
  border-color: #8CC3FB!important;
}
</style>
