<template>
  <div id="main-content" class="main-content m20">
    <!--头部-查询-->
    <div class="content-header">
      <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" @click="search" :loading="loading">查询</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="content-body">
      <div v-if="isFH" class="submit-box" style="margin-bottom: 10px;">
        <el-button @click="search2Fail()">返回</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="datashow"
        :span-method="isqj ? objectSpanMethod : objectSpanMethod2"
        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-click="cellClick"
        :cell-style="{'text-align':'center'}"
      >
        <el-table-column prop="xzqh" label="单位" fixed min-width="250">
          <template slot-scope="scope">
            <span style="cursor:pointer" @click="search2(scope.row)" :style="cellStyle(scope.row)">{{ scope.row.xzqh }}</span>
          </template>
        </el-table-column>
        <el-table-column label="企业（户数）">
          <el-table-column label="列入">
            <el-table-column label="未按规定公示或填报年报" prop="qylr1" />
            <el-table-column label="未按规定公示其他应公示的信息" prop="qylr2"/>
            <el-table-column label="通过登记的经营场所无法联系" prop="qylr4" />
            <el-table-column label="公示信息隐瞒情况，弄虚作假" prop="qylr3" />
            <el-table-column label="登记机关认为不适宜的主体名称" prop="qylr5" />
          </el-table-column>
          <el-table-column label="移出">
            <el-table-column label="未按规定公示或填报年报" prop="qyyc1" />
            <el-table-column label="未按规定公示其他应公示的信息" prop="qyyc2"/>
            <el-table-column label="通过登记的经营场所无法联系" prop="qyyc4" />
            <el-table-column label="公示信息隐瞒情况，弄虚作假" prop="qyyc3" />
            <el-table-column label="登记机关认为不适宜的主体名称" prop="qyyc5" />
          </el-table-column>
          <el-table-column label="异议" prop="qyyy"></el-table-column>
        </el-table-column>
        <el-table-column label="个体户（户数）">
          <el-table-column label="列入">
            <el-table-column label="未按规定公示或填报年报" prop="gtlr1" />
            <el-table-column label="通过登记的经营场所无法联系" prop="gtlr3" />
            <el-table-column label="公示信息隐瞒情况，弄虚作假" prop="gtlr2" />
          </el-table-column>
          <el-table-column label="移出">
            <el-table-column label="未按规定公示或填报年报" prop="gtyc1" />
            <el-table-column label="通过登记的经营场所无法联系" prop="gtyc3" />
            <el-table-column label="公示信息隐瞒情况，弄虚作假" prop="gtyc2" />
          </el-table-column>
          <el-table-column label="异议" prop="gtyy"></el-table-column>
        </el-table-column>
        <el-table-column label="农专（户数）">
          <el-table-column label="列入">
            <el-table-column label="未按规定公示或填报年报" prop="nhlr1" />
            <el-table-column label="通过登记的经营场所无法联系" prop="nhlr3" />
            <el-table-column label="公示信息隐瞒情况，弄虚作假" prop="nhlr2" />
          </el-table-column>
          <el-table-column label="移出">
            <el-table-column label="未按规定公示或填报年报" prop="nhyc1" />
            <el-table-column label="通过登记的经营场所无法联系" prop="nhyc3" />
            <el-table-column label="公示信息隐瞒情况，弄虚作假" prop="nhyc2" />
          </el-table-column>
          <el-table-column label="异议" prop="nhyy"></el-table-column>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px;font-size: 13px">备注：本次统计汇总结果取市场主体户数值。同一市场主体可能会因不同原因多次列入经营异常名录，因此汇总结果数值小于不同原因户数之和属于正常情况。</div>
    </div>
  </div>
</template>
<script>
import { queryStatistics } from '@/api/comprehensive'
export default {
  data() {
    return {
      isqj: false, // 是否为区局
      isFH: false,
      datashow: [],
      AbnStatisticsDtos: [],
      AbnStatisticsDtos2: [],
      loading: false,
      searchForm: {
        searchDate: ''
      }
    }
  },
  methods: {
    cellClick(row, column, cell, event) {
      if (row.xzqh === '汇总' || row.xzqh === '汇总2' || row.xzqh === '信用处' || row.xzqh === '注册二处') {
        return
      }
      if (column.label === '单位') {
        return
      }
      this.$router.push({
        path: '/comprehensive/abnDetails',
        query: {
          searchDate: this.searchForm.searchDate.join(','),
          content: column.property,
          orgName: row.xzqh
        }
      })
    },
    cellStyle(row) {
      if (row.xzqh === '广州市市场监督管理局') {
        return 'color: #1F65FF'
      }
    },
    objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
      if (row.xzqh === '汇总') {
        if (columnIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1
          }
        }
      }
      if (row.xzqh === '汇总1' || row.xzqh === '汇总2') {
        if (columnIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          }
        } else if (columnIndex === 1 || columnIndex === 2) {
          return {
            rowspan: 1,
            colspan: 5
          }
        } else if (columnIndex === 4 || columnIndex === 5 || columnIndex === 7 || columnIndex === 8) {
          return {
            rowspan: 1,
            colspan: 3
          }
        } else if (columnIndex === 9 || columnIndex === 0 || columnIndex === 3 || columnIndex === 6) {
          return {
            rowspan: 1,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row.xzqh === '汇总') {
        if (columnIndex === 1 || columnIndex === 2) {
          return {
            rowspan: 1,
            colspan: 5
          }
        } else if (columnIndex === 4 || columnIndex === 5 || columnIndex === 7 || columnIndex === 8) {
          return {
            rowspan: 1,
            colspan: 3
          }
        } else if (columnIndex === 9 || columnIndex === 0 || columnIndex === 3 || columnIndex === 6) {
          return {
            rowspan: 1,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    search2Fail() {
      this.isFH = false
      this.datashow = this.AbnStatisticsDtos
    },
    search2(row) {
      if (row.xzqh === '广州市市场监督管理局') {
        this.isFH = true
        this.datashow = this.AbnStatisticsDtos2
      }
    },
    search() {
      // 判断是否填写了条件
      let flag = false
      // obj的遍历方式
      Object.keys(this.searchForm).forEach(key => {
        if (this.searchForm[key] !== '' && this.searchForm[key] !== null) {
          flag = true
        }
      })
      if (!flag) {
        this.$message({
          message: '请至少填写一个查询条件！',
          type: 'warning'
        })
        return
      }
      this.AbnStatisticsDtos = []
      this.isFH = false
      this.loading = true
      queryStatistics(this.searchForm).then(res => {
        if (res.code === 0) {
          this.loading = false
          if (res.data.abnStatisticsDtos1.length === 2) { // 区局数据
            this.isqj = true // 更改标识
            res.data.abnStatisticsDtos1.forEach(each => {
              if (each.xzqh === '汇总') {
                each.qylr1 = each.qylrzs
                each.qylr2 = each.qyyczs
                each.qylr4 = each.qyyy
                each.qylr3 = each.gtlrzs
                each.qylr5 = each.gtyczs
                each.qyyc1 = each.gtyy
                each.qyyc2 = each.nzlrzs
                each.qyyc4 = each.nzyczs
                each.qyyc3 = each.nhyy
              }
            })
            this.AbnStatisticsDtos = res.data.abnStatisticsDtos1
            this.datashow = this.AbnStatisticsDtos
          } else {
            res.data.abnStatisticsDtos1.forEach(each => {
              if (each.xzqh === '汇总1') {
                each.qylr1 = each.qylrzs
                each.qylr2 = each.qyyczs
                each.qylr4 = each.qyyy
                each.qylr3 = each.gtlrzs
                each.qylr5 = each.gtyczs
                each.qyyc1 = each.gtyy
                each.qyyc2 = each.nzlrzs
                each.qyyc4 = each.nzyczs
                each.qyyc3 = each.nhyy
              }
            })
            this.AbnStatisticsDtos = res.data.abnStatisticsDtos1
            this.datashow = this.AbnStatisticsDtos
            res.data.abnStatisticsDtos2.forEach(each => {
              if (each.xzqh === '广州市市场监督管理局') {
                each.xzqh = '汇总'
              }
              if (each.xzqh === '汇总2') {
                each.qylr1 = each.qylrzs
                each.qylr2 = each.qyyczs
                each.qylr4 = each.qyyy
                each.qylr3 = each.gtlrzs
                each.qylr5 = each.gtyczs
                each.qyyc1 = each.gtyy
                each.qyyc2 = each.nzlrzs
                each.qyyc4 = each.nzyczs
                each.qyyc3 = each.nhyy
              }
            })
            this.AbnStatisticsDtos2 = res.data.abnStatisticsDtos2
          }
        } 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;
    }
  }
  /deep/.bgColor{
    background: #7cb1ff!important;
  }

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