<!--准入凭证审核/配置-->
<template>
  <div class="configuration">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" class="form-box">
      <el-form-item style="margin-right:20px;">
        <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
      </el-form-item>
      <el-col :span="1.5">
        <p class="add-button-one-120"
           style="margin-right:20px;"
           @click="drawerBoxOn"
           v-hasPermi="['laboratory:apply:add']"
        ><i class="el-icon-plus"></i>新增凭证</p>
      </el-col>
      <el-form-item label="规则名称" prop="configureName">
        <el-input
          v-model="queryParams.configureName"
          placeholder="请输入规则名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <p class="inquire-button-one" @click="handleQuery">查询</p>
        <p class="reset-button-one" @click="resetQuery">重置</p>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" border :data="approvalList" @selection-change="handleSelectionChange" >
      <el-table-column label="准入凭证" align="left" prop="configureName" />
      <el-table-column label="所需材料" align="left" prop="materialNames" />
      <el-table-column label="凭证有效期(月)" align="left" prop="effectiveTime" />
      <el-table-column label="配置实验室数量" align="left" prop="subjectCount" />
      <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="240" v-if="tableButtonType">
        <template slot-scope="scope">
          <div class="button-box">
            <p class="table-min-button"
               style="margin-right:10px;"
               @click="drawerBoxOn(scope.row)"
               v-hasPermi="['laboratory:apply:edit']"
            ><i class="el-icon-edit"></i>编辑</p>
            <p class="table-min-button"
               @click="handleDelete(scope.row)"
               v-hasPermi="['laboratory:apply:remove']"
            ><i class="el-icon-delete"></i>删除</p>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      layout="total, prev, pager, next, sizes, jumper"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改审批记录对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="关联用户表id" prop="joinUserId">
          <el-input v-model="form.joinUserId" placeholder="请输入关联用户表id" />
        </el-form-item>
        <el-form-item label="审批内容">
          <editor v-model="form.recordContent" :min-height="192"/>
        </el-form-item>
        <el-form-item label="部门id" prop="deptId">
          <el-input v-model="form.deptId" placeholder="请输入部门id" />
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="form.deptName" placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item label="创建人" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入创建人" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" >确 定</el-button>
      </div>
    </el-dialog>
    <!--新增/修改-->
    <el-drawer
      class="configuration-drawer"
      :visible.sync="drawer"
      direction="rtl"
      ref="drawer"
      :with-header="false"
      :show-close="false"
      :before-close="handleClose">
      <div class="configuration-drawer-max-box">
        <div class="configuration-drawer-title">
          <p>{{drawerTitle}}</p>
          <i class="el-icon-close" @click="offDrawer"></i>
        </div>
        <div class="configuration-drawer-content">
          <el-form ref="form" label-width="80px">
            <el-form-item label="凭证名称">
              <el-input
                v-model="form.configureName"
                placeholder="请输入凭证名称"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item label="凭证有效期">
              <el-select v-model="form.effectiveTime" placeholder="请选择凭证有效期">
                <el-option label="一个月" value="1" />
                <el-option label="三个月" value="3" />
                <el-option label="半年" value="6" />
                <el-option label="一年" value="12" />
              </el-select>
            </el-form-item>
            <el-form-item :label="index==0?'所需材料':''"
                          v-for="(item,index) in form.meterialList" :key="index">
              <el-input
                class="input-box"
                :style="index!=0?'margin-left:30px;':''"
                v-model="item.materialName"
                placeholder="请输入所需材料"
                clearable
                size="small"
              />
              <i v-if="index!=0" class="el-icon-error" style="color:#999;cursor:pointer;margin-left:10px;font-size:16px;" @click="delMeterialList(index)"></i>
            </el-form-item>
            <p style="font-size:14px;line-height:30px;color:#999;border:1px solid #999;text-align:center;width:100px;margin:20px auto;border-radius:4px;cursor:pointer;" @click="addRormClick">新增</p>

            <el-form-item label="使用实验室">
              <el-select v-model="subjectIds" multiple placeholder="请选择">
                <el-option
                  v-for="item in subjectOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
              <!--<el-select v-model="form.text" multiple placeholder="请选择使用实验室">-->
                <!--<el-option label="请选择使用实验室" value="" />-->
              <!--</el-select>-->
            </el-form-item>
          </el-form>
        </div>

        <div class="configuration-bottom-button-box">
          <p></p>
          <p @click="offDrawer">取消</p>
          <p @click="submitForm">提交</p>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
  import { listGroup, getGroup, addGroup, updateGroup, delGroup,filterSubjectDictList } from "@/api/laboratory/group";
  import { done } from 'element-ui'

  export default {
    name: "configuration",
    data() {
      return {
        tableButtonType:this.hasPermiDom(['laboratory:apply:edit','laboratory:apply:remove']),
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 审批记录表格数据
        approvalList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        subjectOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          joinUserId: null,
          recordContent: null,
          deptId: null,
          deptName: null,
          userId: null,
          configureName: null
        },
        subjectIds: [],
        // 表单参数
        form: {
          id: null,
          joinUserId: null,
          recordContent: null,
          deptId: null,
          deptName: null,
          userId: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          configureName: null,
          meterialList:[
            {
              materialName:"",
            }
          ],
          subjectList:[],
        },
        // 表单校验
        rules: {
        },
        //  关联实验室弹窗开关
        drawer:false,
        drawerTitle:"",
      };
    },
    created() {
      this.getList();
      this.getSubjectDictList();
    },
    methods: {
      //删除项
      delMeterialList(index){
        this.form.meterialList.splice(index,1);
      },
      handleSubjectList(v,data)
      {
        data.forEach((item) => {
          v.push({"subjectId":item});
        })
      },
      //新增选项
      addRormClick(){
        let obj = {
          materialName:""
        };
        this.form.meterialList.push(obj);
      },
      /** 查询实验室字典列表 */
      getSubjectDictList () {
        this.subjectOptions = null;
        this.loading = true;
        // this.queryParams.deptId = deptId;
        let params = {};
        params.subjectIds = this.subjectIds;
        filterSubjectDictList(params).then(response => {
          this.subjectOptions = response.data;
          this.loading = false;
        });
      },
      //关联实验室弹窗
      drawerBoxOn(row){
        this.reset();
        this.subjectIds=[];
        if(row.id){
          this.drawerTitle = "编辑准入凭证配置"
          let id = row.id;
          getGroup(id).then(response => {
            this.form.id = id;
            this.form.configureName = response.data.configureName;
            this.form.effectiveTime = response.data.effectiveTime+"";
            this.form.meterialList = response.data.meterialList;
            let subList = response.data.subjectList;
            subList.forEach((item) => {
              this.subjectIds.push(item.subjectId);
            })
            this.getSubjectDictList();
          });
        }else{
          this.subjectIds=[];
          this.getSubjectDictList();
          this.drawerTitle = "新增准入凭证配置"
        }
        this.drawer = true;
      },
      //关闭弹窗
      offDrawer(){
        this.$refs.drawer.closeDrawer();
      },
      //弹窗关闭前回调
      handleClose(done) {
        this.$confirm('确认关闭吗？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //返回按钮
      backPage(){
        this.$parent.pageOff();
      },
      /** 查询审批记录列表 */
      getList() {
        this.loading = true;
        listGroup(this.queryParams).then(response => {
          this.approvalList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          joinUserId: null,
          recordContent: null,
          deptId: null,
          deptName: null,
          userId: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          configureName: null,
          meterialList:[
            {
              materialName:"",
            }
          ],
          subjectIds: [],
          subjectList:[],
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        console.log(this.from);
        this.reset();
        this.open = true;
        this.title = "添加审批记录";
        console.log(this.from);
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getGroup(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改审批记录";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.handleSubjectList(this.form.subjectList, this.subjectIds);
        // this.$refs["form"].validate(valid => {
        //   if (valid) {

            // this.from.subjectList = this.subjectIds.forEach((item) => {
            //   return {"subjectId":item}
            // })

            // this.from.materialName.map((item) => {
            //   return {"materialName":item}
            // })

            if (this.form.id != null) {
              updateGroup(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.drawer = false;
                this.getList();
              });
            } else {

              addGroup(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.drawer = false;
                this.getList();
              });
            }
          // }
        // });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除当前数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delGroup(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('laboratory/approval/export', {
          ...this.queryParams
        }, `laboratory_approval.xlsx`)
      }
    }
  };
</script>
<style scoped lang="scss">
  .configuration {
    flex:1;
    display: flex!important;
    flex-direction: column;
    .form-box{
      display: flex;
      .null-p{
        flex:1;
      }
    }
    .button-box{
      width:190px;
      display: flex;
    }
  }
</style>
