<!-- 数据统计 -->
<template>
  <div class="app-container dataStatistics">
    <div class="page-container dataStatisticsPage" v-if="pageType === 1">
      <div class="page-form-title-box">
        <el-form :model="queryParams" class="form-box" ref="queryForm"
                 :inline="true" style="width:100%;">
          <el-form-item label="" prop="state">
            <el-date-picker
              :clearable="false"
              v-model="queryParams.year"
              size="small"
              style="width: 100px"
              value-format="yyyy"
              type="year"
              placeholder="选择年"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <div class="table-school-college-toggle-box-one">
            <p :class="checkCategory==1?'p-check':''" @click="schoolCollegeToggle(1)">校级检查</p>
            <p :class="checkCategory==2?'p-check':''" @click="schoolCollegeToggle(2)">学院自查</p>
          </div>
          <div class="table-school-college-toggle-box">
            <p :class="planStatus==null?'p-check':''" @click="tableCheck(null)">全部</p>
            <p :class="planStatus==0?'p-check':''" @click="tableCheck(0)">未开始</p>
            <p :class="planStatus==1?'p-check':''" @click="tableCheck(1)">进行中</p>
            <p :class="planStatus==2?'p-check':''" @click="tableCheck(2)">已结束</p>
          </div>
          <el-form-item label="" prop="checkTypeValue">
            <el-select v-model="queryParams.checkTypeValue" placeholder="检查类型" style="width: 120px">
              <el-option
                v-for="dict in optionList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="planTitle">
            <el-input
              maxLength="30"
              v-model="queryParams.planTitle"
              placeholder="计划标题"
              style="width: 120px"
            />
          </el-form-item>
          <el-form-item label="" prop="state">
            <el-date-picker
              :clearable="false"
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>

          <!--<p class="page-submit-common-style-button"-->
             <!--style="float: right;"-->
             <!--@click="tableButton(1)"-->

          <!--&gt;数据刷新</p>-->
          <el-form-item style="float: right;">
            <export-component :exportConfig="exportConfig"></export-component>
          </el-form-item>
        </el-form>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" ref="table-box" v-loading="loading" border :data="dataList" @selection-change="handleSelectionChange" :row-key="getRowKeys">
          <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
          <el-table-column label="序号" type="index" width="60"/>
          <el-table-column label="计划任务" prop="planTitle"  show-overflow-tooltip/>
          <el-table-column label="计划周期" prop="cycleStartTime" width="220" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.cycleStartTime}} 至 {{scope.row.cycleEndTime}}
            </template>
          </el-table-column>
          <el-table-column label="检查数" prop="checkNum" width="100" show-overflow-tooltip/>
          <el-table-column label="隐患数" prop="hazardNum" width="100" show-overflow-tooltip/>
          <el-table-column label="已整改数" prop="rectificationNum" width="100" show-overflow-tooltip/>
          <el-table-column label="未整改数" prop="notRectificationNum" width="100" show-overflow-tooltip/>
          <el-table-column label="整改完成率" prop="ratio" width="100" show-overflow-tooltip/>
          <el-table-column label="状态" prop="state" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.planStatus == 0 ? '未开始' : (scope.row.planStatus == 1 ? '进行中' : (scope.row.planStatus == 2 ? '已结束' : ''))}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" show-overflow-tooltip >
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   @click="tableButton(3,scope.row)"
                   v-hasPermiRouter="['report:hazardReport:list']"
                >隐患统计</p>
                <p class="table-button-p"
                   @click="tableButton(4,scope.row)"
                   v-hasPermiRouter="['report:hazardItems:list']"
                >检查项统计</p>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
    <hidden-danger-statistics :propsData="propsData" v-if="pageType === 3"></hidden-danger-statistics>
    <inspection-items-statistics :propsData="propsData" v-if="pageType === 4"></inspection-items-statistics>
  </div>
</template>
<script>
import exportComponent from "@/views/safetyCheck/components/exportComponent/exportComponent.vue";
import hiddenDangerStatistics from "./hiddenDangerStatistics.vue";
import inspectionItemsStatistics from "@/views/safetyCheck/components/inspectionItemsStatistics.vue";
import {
  securityDataStatisticsList
} from "@/api/safetyCheck/index";


export default {
  name: 'index',
  components: {
    exportComponent,
    hiddenDangerStatistics,
    inspectionItemsStatistics,
  },
  data () {
    return {
      //日期年限制
      pickerOptions: {
        disabledDate(time) {
          return new Date().getFullYear() < time.getFullYear();
        }
      },
      //导出配置
      exportConfig:{
        api:'/security/dataStatistics/export',             //导出接口地址
        ids:'',                                       //勾选导出,勾选的IDS
        fileName:'安全检查-数据统计',                         //导出文件的命名,
        screenData:{},
      },
      //页面状态
      pageType:1,
      checkCategory:1,
      //计划状态选项卡
      planStatus:null,
      //页面遮罩
      loading:false,
      //下拉列表数据
      optionList:[],
      //查询条件
      queryParams:{
        page:1,
        pageSize:20,
        year:'',
        planTitle:"",
        checkTypeValue :null,
      },
      //时间数据
      dateRange:[],
      //列表数据
      dataList:[],
      //数据数量
      total:0,
      //组件传参
      propsData:{},
    }
  },
  created () {

  },
  mounted () {
    //检查类型字典
    this.getDicts("check_type").then(response => {
      this.$set(this,'optionList',response.data);
    });
    this.getList();
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.$set(this.exportConfig,'ids',selection.map(item => item.planId));
    },
    /*===记录勾选数据===
      需要再el-table 添加  :row-key="getRowKeys"
      需要在selection 添加 :reserve-selection="true"
    */
    getRowKeys(row) {
      return row.planId
    },
    //检查/自查切换
    schoolCollegeToggle(type){
      if(this.checkCategory !== type){
        this.$set(this,'checkCategory',type);
        this.$set(this,'planStatus',null);
        this.resetQuery();
      }
    },
    //整改状态选项卡切换
    tableCheck(type){
      if (this.planStatus !== type){
        this.$set(this,'planStatus',type);
        this.resetQuery();
      }
    },
    //查询按钮
    handleQuery(){
      this.$set(this.queryParams,'page',1);
      this.getList();
    },
    //重置按钮
    resetQuery(){
      this.$set(this,'dateRange',[])
      this.$set(this,'queryParams',{
        page:1,
        pageSize:20,
        year:'',
        planTitle:"",
        checkTypeValue :null,
      });
      this.getList();
    },
    //获取数据列表
    getList(){
      this.$set(this,'loading',true);
      let obj = JSON.parse(JSON.stringify(this.queryParams))
      if(this.dateRange[0]){
        obj.cycleStartTime = this.dateRange[0]
        obj.cycleEndTime = this.dateRange[1]
      }else{
        obj.startTime = "";
        obj.endTime = "";
      }
      obj.checkCategory = this.checkCategory;
      obj.planStatus = this.planStatus;
      this.$set(this.exportConfig,'screenData',obj);
      securityDataStatisticsList(obj).then(response => {
        this.$set(this,'loading',false);
        this.$set(this,'dataList',response.data.records);
        this.$set(this,'total',response.data.total);
      });
    },
    //操作按钮
    tableButton(type,row){
      let self = this;
      if(type == 1){
        //数据刷新
      }else if(type == 2){
        //检查统计
        this.$set(this,'pageType',2);
        this.$set(this,'propsData',row);
      }else if(type == 3){
        //隐患统计
        this.$set(this,'pageType',3);
        this.$set(this,'propsData',row);
      }else if(type == 4){
        //检查项统计
        this.$set(this,'propsData',{
          planId : row.planId,
          checkCategory:row.checkCategory,
          title:row.planTitle,
        });
        this.$set(this,'pageType',4);
      }else if(type == 5){
        //启用&停用
        let text = row.state  ? "停用" : "启用";
        this.$confirm('是否确认' + text + '?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }).then(() => {
          stateFunction({id:row.id,state:!row.state,}).then(response => {
            self.msgSuccess(response.message)
            self.getList();
          });
        }).catch(() => {});
      }else if(type == 6){
        //返回并刷新
        this.$set(this,'pageType',1);
        //this.getList();
      }
    },
  },
}
</script>
<style scoped lang="scss">
.dataStatistics{
  .dataStatisticsPage{
    .table-school-college-toggle-box-one{
      overflow: hidden;
      display: inline-block;
      margin-right:10px;
      p{
        display: inline-block;
        text-align: center;
        width:80px;
        line-height:40px;
        height:40px;
        color:#333;
        background-color: #fff;
        border:1px solid #E0E0E0;
        font-size:14px;
        cursor: pointer;
      }
      p:nth-child(1){
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        /*border-right:none;*/
      }
      p:nth-child(2){
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        /*border-left:none;*/
      }
      .p-check{
        border:1px solid #0183FA;
        background-color: #0183FA;
        color:#fff;
      }
    }
    .table-school-college-toggle-box{
      overflow: hidden;
      display: inline-block;
      margin-right:10px;
      p{
        display: inline-block;
        text-align: center;
        width:80px;
        line-height:40px;
        height:40px;
        color:#333;
        background-color: #fff;
        border:1px solid #E0E0E0;
        font-size:14px;
        cursor: pointer;
      }
      p:nth-child(1){
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        /*border-right:none;*/
      }
      p:nth-child(4){
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        /*border-left:none;*/
      }
      .p-check{
        border:1px solid #0183FA;
        background-color: #0183FA;
        color:#fff;
      }
    }
  }
}
</style>
