<template>
  <div class="main-content  m20">
    <DetailHead result="联合惩戒统计" />
    <div class="main-content m20">
      <!--body-查询结果-->
      <div class="content-body">
        <div class="body">
          <el-row  class="mb10">
            <el-col :span="10">
              <label class="label-name">日期范围：</label>
              <div class="search-input-box">
                <!-- :picker-options="pickerOptions" -->
                <el-date-picker
                  v-model="lockRangeTime"
                  size="mini"
                  type="daterange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                  value-format="yyyy-MM-dd"
                />
              </div>
            </el-col>
            <el-button type="primary" size="mini" @click="init">查询</el-button>
          </el-row>

          <el-table
            v-loading="loading"
            border
            style="width:95%;margin:0  auto"
            :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
            :data="list"
            tooltip-effect="dark"
            :fit="true"
          >

            <el-table-column label="联合惩戒统计表" align="center">
              <el-table-column prop="index" label="序号" width="80" align="center" type="index" />
              <el-table-column prop="depart" label="部门" min-width="120" align="center" :formatter="departmentFormat" />
<!--              <el-table-column prop="draft" label="拟锁定企业数" min-width="120" align="center">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-link type="primary" @click="$router.push({path:'/punish/inclusion/censusList',query:{type:'draft',departId:scope.row.departId,time:params.customParamMap}})">{{ scope.row.draft }}</el-link>-->
<!--                </template>-->
<!--              </el-table-column>-->
              <el-table-column prop="locked" label="已锁定企业数" min-width="120" align="center">
                <el-table-column prop="autolocked" label="自动锁定" min-width="60" align="center">
                  <template slot-scope="scope" >
                    <el-link type="primary" @click="$router.push({path:'/punish/inclusion/censusList',query:{type:'autolocked',departId:scope.row.departId,time:params.customParamMap}})">{{ scope.row.autolocked }}</el-link>
                  </template>
                </el-table-column>
                <el-table-column prop="manuallocked" label="个案锁定" min-width="60" align="center">
                  <template slot-scope="scope" >
                    <el-link type="primary" @click="$router.push({path:'/punish/inclusion/censusList',query:{type:'manuallocked',departId:scope.row.departId,time:params.customParamMap}})">{{ scope.row.manuallocked }}</el-link>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column prop="unlocked" label="已解锁企业数" min-width="120" align="center">
                <el-table-column prop="autounlocked" label="自动解锁" min-width="60" align="center">
                <template slot-scope="scope" >
                  <el-link type="primary" @click="$router.push({path:'/punish/inclusion/censusList',query:{type:'autounlocked',departId:scope.row.departId,time:params.customParamMap}})">{{ scope.row.autounlocked }}</el-link>
                </template>
                </el-table-column>
                <el-table-column prop="manualunlocked" label="个案解锁" min-width="60" align="center">
                  <template slot-scope="scope" >
                    <el-link type="primary" @click="$router.push({path:'/punish/inclusion/censusList',query:{type:'manualunlocked',departId:scope.row.departId,time:params.customParamMap}})">{{ scope.row.manualunlocked }}</el-link>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column prop="handled" label="历史锁定企业数" min-width="120" align="center">
                <template slot-scope="scope">
                  <el-link type="primary" @click="$router.push({path:'/punish/inclusion/censusList',query:{type:'handled',departId:scope.row.departId,time:params.customParamMap}})">{{ scope.row.handled }}</el-link>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import { getDepartmentList, groupDepart } from '@/api/punishment'
import DetailHead from '@/components/DetailHead'

export default {
  components: {
    DetailHead
  },
  data() {
    return {
      loading: false,
      list: [],
      departmentList: getDepartmentList(),
      lockRangeTime: [],
      unlockRangeTime: [],
      beginDate: '',
      // endLockDate: '',
      // beginUnlockDate: '',
      endDate: '',
      params: {
        customParamMap: {
          beginDate: '',
          // endLockDate: '',
          // beginUnlockDate: '',
          endDate: ''
        }
      }
    }
  },
  watch: {
    lockRangeTime() {
      if (this.$util.isNotEmpty(this.lockRangeTime)) {
        this.beginDate = this.lockRangeTime[0]
        this.endDate = this.lockRangeTime[1]
      } else {
        this.beginDate = null
        this.endDate = null
      }
    }
    // unlockRangeTime() {
    //   if (this.$util.isNotEmpty(this.unlockRangeTime)) {
    //     this.beginDate = this.unlockRangeTime[0]
    //     this.endUnlockDate = this.unlockRangeTime[1]
    //   } else {
    //     this.beginUnlockDate = null
    //     this.endUnlockDate = null
    //   }
    // }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      this.params.customParamMap.beginDate = this.beginDate
      // this.params.customParamMap.endLockDate = this.endLockDate
      // this.params.customParamMap.beginUnlockDate = this.beginUnlockDate
      this.params.customParamMap.endDate = this.endDate
      groupDepart(this.params).then(res => {
        this.list = res.data
        this.loading = false
      })
    },
    // 部门格式化
    departmentFormat(row) {
      return this.$util.enumFormatter(this.departmentList, row.departId)
    },

  }

}
</script>

<style lang="scss" scoped>
.main-content{
  background: #fff;
  padding: 10px;
  .content-header{
    background: white;
    .label-name {
      text-align: right;
      display: inline-block;
      width: 220px;
      font-size: $table-content-font-size;
    }
    .search-input-box{
      display: inline-block;
      width: calc(100% - 220px);
      .el-select{
        width: 100%;
      }

    }
    .search-input{
      cursor: pointer;
    }
    .body{
      padding: 20px 0 ;
      border-top:none;
      margin-bottom: 40PX;
    }
  }
  .el-select{
    width: 70%;
  }
  .content-body{
    background:white;
  }
  .header{
    /* height:50PX;
    padding:15PX 10PX; */
    .title{
      font-weight: 600;
      font-size: 1.2rem;
    }
  }
  .icon{
    font-size: 50px;
    color: rgb(24, 144, 255);
  }
  .page-box{
    margin:10PX;
    .el-pagination{
      text-align: right;
    }
  }
}
/deep/.el-input__inner{
  height: 28px;
}
/deep/.label-name{
  text-align: right;
}
/deep/.el-input__icon{
  line-height: 28px;
}
.content-header{
  border: none;
}
</style>
