<template>
  <div class="main-content m20">
    <!--头部-查询-->
    <div class="content-header">
      <searchHeader title="查询" />
      <div class="body search-body">
        <h2 style="margin-left: 20px;color: red">仅供内部查询使用</h2>
        <el-row>
          <el-col :span="24">
            <div class="search-box">
              <label class="label-name_1">选择日期：</label> <!-- value-format="yyyy-MM-dd" 指定日期发送格式  -->
              <el-date-picker
                v-model="searchDate"
                style="margin-right: 10px;width: 400px;"
                size="mini"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="{
                  firstDayOfWeek: 1,
                  disabledDate: (date)=>{
                    return date.setHours(0,0,0,0) > (new Date()).setHours(0,0,0,0)
                  }
                }"
              />
              <el-button :loading="loading" size="mini" type="primary" @click="search('date')">查询</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="24">
            <div class="search-box">
              <label class="label-name_1">年度查询：</label> <!-- value-format="yyyy-MM-dd" 指定日期发送格式  -->
              <el-date-picker
                v-model="searchYear"
                style="margin-right: 10px;width: 400px;"
                type="year"
                placeholder="选择年"
                size="mini"
                :picker-options="{
                  firstDayOfWeek: 1,
                  disabledDate: (date)=>{
                    return date.setHours(0,0,0,0) > (new Date()).setHours(0,0,0,0)
                  }
                }"
              />
              <el-button :loading="loading" size="mini" type="primary" @click="search('year')">查询</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="24">
            <div class="search-box">
              <label class="label-name_1">季度查询：</label> <!-- value-format="yyyy-MM-dd" 指定日期发送格式  -->
              <el-select
                v-model="searchSeason"
                size="mini"
                style="margin-right: 10px;width: 400px;"
              >
                <el-option :value="0" :label="parseSeason(0)">第一季度</el-option>
                <el-option :value="1" :label="parseSeason(1)">第二季度</el-option>
                <el-option :value="2" :label="parseSeason(2)">第三季度</el-option>
                <el-option :value="3" :label="parseSeason(3)">第四季度</el-option>
              </el-select>
              <el-button :loading="loading" size="mini" type="primary" @click="search('season')">查询</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="24">
            <div class="search-box">
              <label class="label-name_1">月度查询：</label> <!-- value-format="yyyy-MM-dd" 指定日期发送格式  -->
              <el-date-picker
                v-model="searchMonth"
                style="margin-right: 10px;width: 400px;"
                type="month"
                placeholder="选择月"
                size="mini"
                :picker-options="{
                  firstDayOfWeek: 1,
                  disabledDate: (date)=>{
                    return date.setHours(0,0,0,0) > (new Date()).setHours(0,0,0,0)
                  }
                }"
              />
              <el-button :loading="loading" size="mini" type="primary" @click="search('month')">查询</el-button>
            </div>
          </el-col>
        </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"
        :header-cell-style="{'text-align':'center','background':'#8cc3fb',color:'#fff'}"
        style="wdith:100%"
        :cell-style="{'text-align':'center'}"
      >
        <el-table-column prop="单位名称" width="100px" label="单位名称" />
        <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>
          <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>
          <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>
      </el-table>
    </div>
  </div>
</template>

<script>
import searchHeader from '@/components/searchHeader'
import { entBlacklistStatistics } from '@/api/comprehensive'
export default {
  components: { searchHeader },
  data() {
    return {
      loading: false,
      searchDate: [],
      searchYear: null,
      searchSeason: '',
      searchMonth: null,
      cphStatistics: []
    }
  },
  computed: {
    parseSeason() {
      return (count) => {
        const start = new Date()
        const end = new Date()
        start.setMonth(count * 3, 1)
        end.setMonth(count * 3 + 3, 0)
        return `${this.$moment(start).format('YYYY/MM/DD')} - ${this.$moment(end).format('YYYY/MM/DD')}`
      }
    }
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    search(type) {
      const params = {
        startDate: '',
        endDate: ''
      }
      if (type === 'date') {
        params.startDate = this.searchDate[0]
        params.endDate = this.searchDate[1]
      } else if (type === 'year' && this.searchYear) {
        const start = new Date(this.searchYear)
        start.setMonth(0, 1)
        const end = new Date(this.searchYear)
        end.setMonth(12, 0)
        params.startDate = this.$moment(start).format('YYYY-MM-DD')
        params.endDate = this.$moment(end).format('YYYY-MM-DD')
      } else if (type === 'season' && this.searchSeason) {
        const start = new Date()
        const end = new Date()
        start.setMonth(this.searchSeason * 3, 1)
        end.setMonth(this.searchSeason * 3 + 3, 0)
        params.startDate = this.$moment(start).format('YYYY-MM-DD')
        params.endDate = this.$moment(end).format('YYYY-MM-DD')
      } else if (type === 'month' && this.searchMonth) {
        const start = new Date(this.searchMonth)
        const end = new Date(this.searchMonth)
        start.setMonth(start.getMonth(), 1)
        end.setMonth(end.getMonth() + 1, 0)
        params.startDate = this.$moment(start).format('YYYY-MM-DD')
        params.endDate = this.$moment(end).format('YYYY-MM-DD')
      }
      if (!params.startDate || !params.endDate) {
        this.$message.warning('请选择查询时间')
        return
      }
      this.loading = true
      entBlacklistStatistics(params).then(res => {
        if (res.code === 0) {
          this.cphStatistics = res.data.map((item) => {
            const [严重违法农专, 严重违法个体户, 严重违法企业] = item['严重违法列入数量-分组(农专、个体户、企业)'].split(',')
            const [经营异常农专, 经营异常个体户, 经营异常企业] = item['经营异常列入数量-分组(农专、个体户、企业)'].split(',')
            return {
              ...item,
              '严重违法-列入数量-农专': 严重违法农专,
              '严重违法-列入数量-个体户': 严重违法个体户,
              '严重违法-列入数量-企业': 严重违法企业,
              '经营异常-列入数量-农专': 经营异常农专,
              '经营异常-列入数量-个体户': 经营异常个体户,
              '经营异常-列入数量-企业': 经营异常企业
            }
          })
          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;
      .search-box{
        display: flex;
        align-items: center;
      }
      .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>
