<template>
  <div class="main-content m20">

    <div class="content-body">
      <el-table
        v-loading="loading"
        :data="cphStatistics"
        :row-class-name="tableRowClassName"
        :header-cell-style="{'text-align':'center','background':'#8cc3fb',color:'#fff'}"
        style="wdith:100%"
        :cell-style="{'text-align':'center'}"
      >
        <el-table-column prop="单位名称" label="单位名称" min-width="20%" fixed />
        <el-table-column label="业户认领">
          <el-table-column prop="业户认领-认领户数" label="认领户数" min-width="10%" />
          <el-table-column prop="业户认领-未认领" label="过期未认领" min-width="10%" />
          <el-table-column prop="业户认领-认领率" label="认领率" min-width="10%" />
        </el-table-column>
        <el-table-column label="国家（省）局执照">
          <el-table-column prop="国家（省）局执照-录入" label="录入" min-width="10%" />
          <el-table-column prop="国家（省）局执照-移交" label="移交" min-width="10%" />
        </el-table-column>
        <el-table-column label="现场核查">
          <el-table-column prop="现场核查-检查总数" label="检查总数" min-width="10%" />
          <el-table-column prop="现场核查-过期检查数" label="过期检查数" min-width="10%" />
          <el-table-column prop="现场核查-过期未检查数" label="过期检查数" min-width="10%" />
          <el-table-column prop="现场核查-检查率" label="检查率" min-width="10%" />
          <el-table-column prop="现场核查-未发现问题" label="未发现问题" min-width="10%" />
          <el-table-column prop="现场核查-未按规定公示应当公示的信息" label="未按规定公示应当公示的信息" min-width="10%" />
          <el-table-column prop="现场核查-公示信息隐瞒真实情况弄虚作假" label="公示信息隐瞒真实情况弄虚作假" min-width="10%" />
          <el-table-column prop="现场核查-通过登记住所（经营场所）无法联系" label="通过登记住所（经营场所）无法联系" min-width="10%" />
          <el-table-column prop="现场核查-发现问题已责令改正" label="发现问题已责令改正" min-width="10%" />
          <el-table-column prop="现场核查-不配合检查情节严重" label="不配合检查情节严重" min-width="10%" />
          <el-table-column prop="现场核查-未发现开展本次检查涉及的经营活动" label="未发现开展本次检查涉及的经营活动" min-width="10%" />
          <el-table-column prop="现场核查-发现问题待后续处理" label="发现问题待后续处理" min-width="10%" />
        </el-table-column>
        <el-table-column label="投诉处理">
          <el-table-column prop="投诉处理-检查总数" label="检查总数" min-width="10%" />
          <el-table-column prop="投诉处理-过期检查数" label="过期检查数" min-width="10%" />
          <el-table-column prop="投诉处理-检查率" label="检查率" min-width="10%" />
          <el-table-column prop="投诉处理-未发现问题" label="未发现问题" min-width="10%" />
          <el-table-column prop="投诉处理-未按规定公示应当公示的信息" label="未按规定公示应当公示的信息" min-width="10%" />
          <el-table-column prop="投诉处理-公示信息隐瞒真实情况弄虚作假" label="公示信息隐瞒真实情况弄虚作假" min-width="10%" />
          <el-table-column prop="投诉处理-通过登记住所（经营场所）无法联系" label="通过登记住所（经营场所）无法联系" min-width="10%" />
          <el-table-column prop="投诉处理-发现问题已责令改正" label="发现问题已责令改正" min-width="10%" />
          <el-table-column prop="投诉处理-不配合检查情节严重" label="不配合检查情节严重" min-width="10%" />
          <el-table-column prop="投诉处理-未发现开展本次检查涉及的经营活动" label="未发现开展本次检查涉及的经营活动" min-width="10%" />
          <el-table-column prop="投诉处理-发现问题待后续处理" label="发现问题待后续处理" min-width="10%" />
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { statistics } from '@/api/market'
export default {
  data() {
    return {
      loading: false,
      searchForm: {
        searchDate: ''
      },
      cphStatistics: []
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    search() {
      this.loading = true
      statistics().then(res => {
        if (res.code === 0) {
          for (const key in res.data) {
            const rowData = res.data[key][0]
            rowData['单位名称'] = key
            this.cphStatistics.push(rowData)
          }
          this.loading = false
        } else {
          this.$message.error(res.msg)
        }
      }).catch(_ => {
        this.loading = false
      })
    }
  }
}
</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;
  }
}
</style>
