<!--分级管控工作-->
<template>
  <div class="app-container gradeManageRecord">
    <div class="page-container gradeManageRecord-page " v-if="pageType == 1">
      <div class="page-form-title-box">
        <el-form :model="queryParams" ref="queryForm" style="padding-bottom:20px;margin-bottom:20px;" :inline="true" v-show="showSearch" label-width="80px">
          <el-form-item label="" prop="subName" label-width="60px">
            <el-input
              style="width:150px;"
              v-model="queryParams.subName"
              placeholder="实验室名称"
              size="small"
            />
          </el-form-item>
          <el-form-item label="" prop="deptId" label-width="56px">
            <el-select v-model="queryParams.deptId" placeholder="请选择学院" clearable style="width:150px;">
              <el-option
                v-for="dict in deptIdOptionList"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="typeId">
            <el-select v-model="queryParams.typeId" placeholder="请选择安全分类" clearable style="width:150px;">
              <el-option
                v-for="dict in typeOptionList"
                :key="dict.typeId"
                :label="dict.typeName"
                :value="dict.typeId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="level">
            <el-select v-model="queryParams.level" placeholder="请选择安全分级" clearable style="width:150px;">
              <el-option
                v-for="dict in levelOptionList"
                :key="dict.levelId"
                :label="dict.levelName"
                :value="dict.levelId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="cycle">
            <el-select v-model="queryParams.cycle" placeholder="请选择执行周期" clearable style="width:150px;">
              <el-option
                v-for="dict in cycleList"
                :key="dict"
                :label="dict"
                :value="dict"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <p class="page-inquire-common-style-button" style="margin:0 20px;" @click="handleQuery">查询</p>
            <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
          </el-form-item>
        </el-form>
      </div>
      <div class="for-max-big-box scrollbar-box">
        <img v-if="!gradeManageList[0]" src="@/assets/ZDimages/basicsModules/null-data-1.png" style="width:300px;margin:200px auto;display: block">
        <div class="for-max-box" v-for="(item,index) in gradeManageList" :key="index">
          <div class="for-title-box">
            <div class="for-title-type-box" :style="'color:'+item.levelColor+';border:1px solid '+item.levelColor+';'" v-if="item.levelName">
              <p>{{item.levelName}}</p>
            </div>
            <p class="for-title-name-p">{{item.subName}}{{item.roomNum?'('+item.roomNum+')':''}}</p>
            <p class="for-title-dept-p">学院：{{item.deptName}}</p>
          </div>
          <el-table :data="item.detailList" border class="table-box">
            <el-table-column label="规则名称" align="left" prop="ruleName" />
            <el-table-column label="执行周期" align="left" prop="cycle" width="230"/>
            <el-table-column label="截止执行时间" align="left" prop="carryTime" width="300">
              <template slot-scope="scope">{{scope.row.endDate?scope.row.endDate:'-'}}</template>
            </el-table-column>
            <el-table-column label="操作" align="left" prop="text1" width="110">
              <template slot-scope="scope">
                <div class="table-button-box">
                  <p class="table-button-null"></p>
                  <p class="table-button-p" @click="pageTypeClick(2,item,scope.row)">完成</p>
                  <p class="table-button-null"></p>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <add-page v-if="pageType == 2" :addData="addData"></add-page>
  </div>
</template>

<script>
import {
  gradeManageWorkList,
} from "@/api/hierarchicalControl/index";
import {
  getDeptDropList,
  laboratoryClassLevelGetList,
  laboratoryClassTypeGetList,
} from '@/api/commonality/permission'
import addPage from "./addPage.vue"
export default {
  name: "GradeManageWork",
  components: {
    addPage
  },
  data() {
    return {
      pageType:1,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 分级��控管理表格数据
      gradeManageList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        deptId: null,
        deptName: null,
        userId: null,
        level: null,
        typeId: null,
        subIds: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      //提交传参
      addData:{},
      recordId:"",
      deptIdOptionList:[],
      levelOptionList:[],
      typeOptionList:[],
      cycleList:['一天','一周','一月','季度','半年','一年'],
    };
  },
  created() {
    this.gradeManageWorkList();
    this.getDeptDropList();
    this.laboratoryClassLevelGetList();
    this.laboratoryClassTypeGetList();
  },
  methods: {
    //获取学院
    getDeptDropList(){
      getDeptDropList({level: 2, deptType: 1 }).then(response => {
        this.$set(this,'deptIdOptionList',response.data);
      });
    },
    //查询安全分级
    laboratoryClassLevelGetList(){
      laboratoryClassLevelGetList({}).then(response=>{
        if(response.code==200){
          this.$set(this,'levelOptionList',response.data);
        }
      })
    },
    //查询安全分类
    laboratoryClassTypeGetList(){
      laboratoryClassTypeGetList({}).then(response=>{
        if(response.code==200){
          this.$set(this,'typeOptionList',response.data);
        }
      });
    },
    handleQuery() {
      this.gradeManageWorkList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.createTimeDate = []
      // this.resetForm("queryForm");
      this.$set(this,'queryParams',{
        subName: "",
        deptId: "",
        typeId: "",
        level:"",
        cycle:"",
      });
      this.handleQuery();
    },
    gradeManageWorkList(){
      gradeManageWorkList(this.queryParams).then( response => {
        this.$set(this,'gradeManageList',response.data);
      });
    },
    pageTypeClick(type,item,row){
      if(this.pageType != type){
        if(type == 1){
          this.pageType = 1;
          this.gradeManageWorkList();
        }else if(type == 2){
          let obj = {
            bigItem:item,
            minItem:row
          };
          this.addData = JSON.parse(JSON.stringify(obj));
          this.pageType = 2;
        }
      }
    },
  }
};
</script>

<style lang="scss" scoped>
  .gradeManageRecord{
    .top-button-box{
      display: flex;
      background: #CCE6FE ;
      border-radius:10px;
      height:60px;
      margin:5px 20px 0 10px;
      p{
        line-height: 60px;
        font-size:14px;
        font-weight:500;
        color:#0183FA;
      }
      p:nth-child(1){
        flex:1;
        margin-left:28px;
      }
      p:nth-child(2){
        cursor: pointer;
      }
      i:nth-child(3){
        line-height: 60px;
        color:#0256FF ;
        font-size:22px;
        margin:0 33px;
        cursor: pointer;
      }
    }
    .gradeManageRecord-page{
      .for-max-big-box{
        padding:20px;
        .for-max-box{
          .for-title-box{
            display: flex;
            margin-bottom:20px;
            .for-title-type-box{
              padding:0 20px;
              border-radius:4px;
              margin-right:20px;
              p{
                text-align: center;
                font-size:16px;
                font-weight:500;
                line-height:30px;
              }
            }
            .for-title-name-p{
              margin:0 45px 0 0;
              line-height:32px;
              font-size:16px;
              font-weight:500;
            }
            .for-title-dept-p{
              line-height:32px;
              font-size:16px;
              font-weight:500;
            }
          }
          .table-box{
            margin-bottom: 20px;
          }
        }
      }
    }
  }
</style>
