<!--分级管控管理-->
<template>
  <div class="gradeManage">
    <div class="gradeManage-page" v-if="pageType == 1">
      <advanced-search :searchData="searchData"></advanced-search>
      <el-table v-loading="loading" border :data="gradeManageList" @selection-change="handleSelectionChange">
        <!--<el-table-column type="selection" width="55" align="center" />-->
        <el-table-column label="管控名称" align="left" prop="name" show-overflow-tooltip/>
        <el-table-column label="学院" align="left" prop="deptName" width="149" show-overflow-tooltip/>
        <el-table-column label="实验室类型" align="left" prop="moldName" width="149">
          <template slot-scope="scope">{{scope.row.moldName?scope.row.moldName:'--'}}</template>
        </el-table-column>
        <el-table-column label="安全分类" align="left" prop="typeName" width="130">
          <template slot-scope="scope">{{scope.row.typeName?scope.row.typeName:'--'}}</template>
        </el-table-column>
        <el-table-column label="安全分级" align="left" prop="levelName" width="130">
          <template slot-scope="scope">{{scope.row.levelName?scope.row.levelName:'--'}}</template>
        </el-table-column>
        <el-table-column label="管控规则数" align="left" prop="ruleNum" width="130"/>
        <el-table-column label="状态" align="left" prop="status" width="149">
          <template slot-scope="scope">
            <span :class="scope.row.status == 1?'tableTypeColorA':(scope.row.status == 0?'tableTypeColorB':'')">{{scope.row.status == 1?'开启':(scope.row.status == 0?'关闭':'')}}</span>
          </template>
        </el-table-column>
        <el-table-column label="编辑人" align="left" prop="updateBy" width="149"/>
        <el-table-column label="编辑时间" align="left" prop="updateTime" width="179"/>
        <!--<el-table-column label="适配实验室数" align="left" prop="subNum" />-->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160px" v-if="tableButtonType">
          <template slot-scope="scope">
            <div class="table-button-box">
              <p class="table-button-null"></p>
              <p class="table-button-p"
                 @click="clickPageType(3,scope.row)"
                 v-hasPermiAnd="['laboratory:gradeManage:query','laboratory:gradeManage:edit']"
              >编辑</p>
              <p class="table-button-p"
                 @click="handleDelete(scope.row)"
                 v-hasPermi="['laboratory:gradeManage:remove']"
              >删除</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.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 新增编辑 -->
    <add-page v-if="pageType == 2" :propsType="propsType" :propsId="propsId"></add-page>
    <!-- 添加或修改分级管控管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="安全分级ID" prop="level">
          <el-input v-model="form.level" placeholder="请输入安全分级ID" />
        </el-form-item>
        <el-form-item label="安全分类ID" prop="typeId">
          <el-input v-model="form.typeId" placeholder="请输入安全分类ID" />
        </el-form-item>
        <el-form-item label="适配实验室多选逗号分隔" prop="subIds">
          <el-input v-model="form.subIds" placeholder="请输入适配实验室多选逗号分隔" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listGradeManage, getGradeManage, delGradeManage, addGradeManage, updateGradeManage } from "@/api/laboratory/gradeManage";
  import { filterDept } from "@/api/medicUniversity-3_1/index";
  import { listClassifiedAll } from "@/api/laboratory/classified";
  import { listClasstypeAll } from "@/api/laboratory/classtype";
  import { labMoldQueryOption } from "@/api/laboratory/subjectClass";
  import addPage from "./addPage.vue"
  import advancedSearch from "@/components/ZDcomponents/advancedSearch.vue"

  export default {
    name: "GradeManage",
    components: {
      addPage,
      advancedSearch
    },
    data() {
      return {
        tableButtonType:this.hasPermiDom(['laboratory:gradeManage:query','laboratory:gradeManage:edit','laboratory:gradeManage:remove']),
        //页面状态
        pageType:1,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 分级管控管理表格数据
        gradeManageList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize:20,
          searchValue: null,
          status:null,
          typeId:null,
          level:null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        },
        // //分类数据
        typeList:[],
        // //分级数据
        levelList:[],
        propsType:false,
        propsId:{},
        //高级搜索组件参数
        searchData:{
          buttonList:[
            {
              name:"新增",
              parameter:"add",
              type:"1", //按钮类型 1.按钮 2.导入 3.导出
              hasPermi:['laboratory:gradeManage:add'] // 权限字段
            },
          ],
          searchList:[
            {
              name:"关键字",//名称
              key:"searchValue",//键名 用于返回数据
              value:"",//内容
              placeholder:"请输入名称/学院",//输入提示
              level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"1",//类型 1.input 2.select 3.TimePicker
              universal:'10',//input 最大长度
            },
            {
              name:"学院",//名称
              key:"deptId",//键名 用于返回数据
              value:"",//内容
              placeholder:"请选择学院",//输入提示
              level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[],//select列表数据
            },
            {
              name:"安全分类",//名称
              key:"typeId",//键名 用于返回数据
              value:"",//内容
              placeholder:"请选择安全分类",//输入提示
              level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[],//select列表数据
            },
            {
              name:"安全分级",//名称
              key:"level",//键名 用于返回数据
              value:"",//内容
              placeholder:"请选择安全分级",//输入提示
              level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[],//select列表数据
            },
            {
              name:"状态",//名称
              key:"status",//键名 用于返回数据
              value:"",//内容
              placeholder:"请选择状态",//输入提示
              level:"2",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[
                {label:"开启",value:"1"},{label:"关闭",value:"0"},
              ],//select列表数据
            },
            {
              name:"类型",//名称
              key:"moldId",//键名 用于返回数据
              value:"",//内容
              placeholder:"请选择类型",//输入提示
              level:"2",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[],//select列表数据
            },
          ]

        }
      };
    },
    created() {

    },
    mounted(){
      this.getListClassifiedAll();
      this.getListClasstypeAll();
      this.filterDept();
      this.labMoldQueryOption();
      this.getList();
    },
    methods: {
      //高级搜索按钮方法
      searchClick(type,data){
        if(type == 1){
          this.queryParams = JSON.parse(JSON.stringify(data));
          this.queryParams.pageNum = 1;
          this.queryParams.pageSize = 20;
          this.getList();
        }else if(type == 2){
          this.queryParams = {
            pageNum : 1,
            pageSize:20,
          };
          this.getList();
        }else if(type == 'add'){
          this.clickPageType(2);
        }
      },
      //获取实验室类型
      labMoldQueryOption(){
        labMoldQueryOption({}).then(response => {
          let list = [];
          for(let i=0;i<response.data.length;i++){
            list.push({label:response.data[i].moldName, value:response.data[i].id,})
          }
          this.searchData.searchList[5].universal = list;
        });
      },
      //获取学院
      filterDept(){
        filterDept().then(response => {
          let list = [];
          for(let i=0;i<response.data.length;i++){
            list.push({label:response.data[i].deptName, value:response.data[i].deptId,})
          }
          this.searchData.searchList[1].universal = list;
        });
      },
      //查询安全分级
      getListClassifiedAll(){
        listClassifiedAll().then(response=>{
          if(response.code==200){
            // this.levelList=response.data
            let list = [];
            for(let i=0;i<response.data.length;i++){
              list.push({label:response.data[i].classifiedName, value:response.data[i].id,})
            }
            this.searchData.searchList[3].universal = list;
          }
        })
      },
      //查询安全分类
      getListClasstypeAll(){
        listClasstypeAll().then(response=>{
          if(response.code==200){
            // this.typeList=response.data;
            let list = [];
            for(let i=0;i<response.data.length;i++){
              list.push({label:response.data[i].typeName, value:response.data[i].id,})
            }
            this.searchData.searchList[2].universal = list;
          }
        });
      },
      //页面切换
      clickPageType(type,row){
        if(this.pageType != type){
          if(type == 1){
            this.getList();
            this.pageType = 1;
          }else if(type == 2){
            this.pageType = 2;
            this.propsType = false;
          }else if(type == 3){
            this.pageType = 2;
            this.propsType = true;
            this.propsId = row.id;
          }
        }
      },
      /** 查询分级管控管理列表 */
      getList() {
        this.loading = true;
        listGradeManage(this.queryParams).then( response => {
          this.gradeManageList =  response.rows;
          this.total =  response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          deptId: null,
          deptName: null,
          userId: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          level: null,
          typeId: null,
          subIds: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm("queryForm");
        this.queryParams.searchValue=null;
        this.queryParams.status=null;
        this.queryParams.typeId=null;
        this.queryParams.level=null;
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加分级管控管理";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getGradeManage(id).then( response => {
          this.form =  response.data;
          this.open = true;
          this.title = "修改分级管控管理";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateGradeManage(this.form).then( response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addGradeManage(this.form).then( response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delGradeManage(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('laboratory/gradeManage/export', {
          ...this.queryParams
        }, `laboratory_gradeManage.xlsx`)
      }
    }
  };
</script>

<style lang="scss" scoped>
  .gradeManage{
    flex:1;
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    .gradeManage-page{
      flex:1;
      display: flex!important;
      flex-direction: column;
      padding:15px 20px!important;
      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
      border-radius:10px;
      margin:5px 20px 20px 10px;
      overflow: hidden;
    }
    .button-box{
      margin:0 auto;
      width:190px;
      display: flex;
    }
    .tableTypeColorA{
      color:#2AA408;
    }
    .tableTypeColorB{
      color:#FF3131;
    }
  }
</style>
