<!--分级管控工作-->
<template>
  <div class="gradeManageRecord">
    <!--<div class="top-button-box" v-if="pageType == 1">-->
      <!--<p>您当前有1条管控工作需要完成，请点击查看详情</p>-->
      <!--<p>立即完成</p>-->
      <!--<i class="el-icon-circle-close"></i>-->
    <!--</div>-->
    <div class="gradeManageRecord-page " v-if="pageType == 1">
      <el-form :model="queryParams" ref="queryForm" style="padding-bottom:20px;border-bottom:1px solid #dedede;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 deptList"
              :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 typeList"
              :key="dict.id"
              :label="dict.typeName"
              :value="dict.id"
            ></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 levelList"
              :key="dict.id"
              :label="dict.classifiedName"
              :value="dict.id"
            ></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 label="执行时间" prop="carryTime">-->
        <!--<el-date-picker-->
        <!--:clearable="false"-->
        <!--v-model="createTimeDate"-->
        <!--size="small"-->
        <!--style="width: 240px"-->
        <!--value-format="yyyy-MM-dd"-->
        <!--type="daterange"-->
        <!--range-separator="-"-->
        <!--start-placeholder="开始日期"-->
        <!--end-placeholder="结束日期"-->
        <!--&gt;</el-date-picker>-->
        <!--</el-form-item>-->
        <el-form-item>
          <p class="inquire-button-one" style="margin:0 20px;" @click="handleQuery">查询</p>
          <p class="reset-button-one" @click="resetQuery">重置</p>
        </el-form-item>
      </el-form>
      <div class="for-max-big-box scrollbar-box">
        <img v-if="!gradeManageList[0]" src="@/assets/ZDimages/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.typeName}}</p>-->
              <p>{{item.levelName}}</p>
            </div>
            <p class="for-title-name-p">{{item.subName}}</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="endDate" width="200">-->
            <!--<template slot-scope="scope">{{scope.row.endDate?scope.row.endDate:'-'}}</template>-->
            <!--</el-table-column>-->
            <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 style="display: flex;margin-left:10px;">
                  <!--<p class="table-min-button"-->
                  <!--@click="pageTypeClick(2,item,scope.row)"-->
                  <!--&gt;{{scope.row.status==0?'完成':(scope.row.status==2?'查看':'')}}</p>-->
                  <p class="table-min-button" @click="pageTypeClick(2,item,scope.row)">完成</p>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <add-page v-if="pageType == 2" :addData="addData"></add-page>
    <info-page v-if="pageType == 3" :recordId="recordId"></info-page>
  </div>
</template>

<script>
import { gradeManageWorkList } from "@/api/laboratory/gradeManageWork";
import { listDepartments } from "@/api/system/dept";
import { listClassifiedAll } from "@/api/laboratory/classified";
import { listClasstypeAll } from "@/api/laboratory/classtype";
import addPage from "./addPage.vue"
import infoPage from "./infoPage.vue"
export default {
  name: "GradeManageWork",
  components: {
    addPage,
    infoPage
  },
  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:"",
      deptList:[],
      levelList:[],
      typeList:[],
      cycleList:['一天','一周','一月','季度','半年','一年'],
    };
  },
  created() {
    this.gradeManageWorkList();
    this.listDepartments();
    this.getListClassifiedAll();
    this.getListClasstypeAll();
  },
  methods: {
    //获取学院
    listDepartments(){
      listDepartments().then(response => {
        this.deptList = response.data;
      });
    },
    //查询安全分级
    getListClassifiedAll(){
      listClassifiedAll().then(response=>{
        if(response.code==200){
          console.log(response)
          this.levelList=response.data
        }
      })
    },
    //查询安全分类
    getListClasstypeAll(){
      listClasstypeAll().then(response=>{
        if(response.code==200){
          this.typeList=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.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;
        }
      }
      // if(this.pageType != type){
        // if(type == 1){
        //   this.gradeManageWorkList();
        //   this.pageType = 1;
        // }else if(type == 2){
          // if(row.status==1){
          //   let obj = {
          //     subId:item.subId,
          //     ruleId:row.ruleId,
          //     ruleUserId:row.ruleUserId,
          //     isUpload:row.isUpload,
          //     endDate:row.endDate,
          //     detail:{
          //       remark:"",
          //       imgUrl:"",
          //     },
          //     ruleType:row.ruleType
          //   };
          //   this.addData = JSON.parse(JSON.stringify(obj));
          //   this.pageType = 2;
          // }else if(row.status==2){
          //   this.recordId = row.recordId;
          //   this.pageType = 3;
          // }
        // }
      // }
    },

  }
};
</script>

<style lang="scss" scoped>
  .gradeManageRecord{
    flex:1;
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    *{
      margin:0;
      padding:0;
    }
    .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{
      flex:1;
      display: flex!important;
      flex-direction: column;
      padding:20px 20px!important;
      margin:5px 20px 20px 10px;
      /*margin:20px 20px 20px 10px;*/
      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
      border-radius:10px;
      overflow: hidden;
      .for-max-big-box{
        .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>
