<template>
  <div class="page-container conditionsSettings-addPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">{{newData.id?'编辑':'新增'}}</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
      <p class="page-top-title-add-p" @click="submitForm">提交</p>
    </div>
    <div class="content-box scrollbar-box">
      <el-form class="add-form-box" :model="newData" ref="form" :rules="rules" label-width="110px">
        <div style="margin-top:20px;">
          <el-form-item label="管控名称" prop="name">
            <el-input v-model="newData.name" placeholder="请输入管控名称" maxLength="20" style="width:260px;"></el-input>
          </el-form-item>
          <el-form-item label="二级单位" prop="deptId">
            <el-select v-model="newData.deptId" placeholder="请选择二级单位" style="width: 260px">
              <el-option
                v-for="dict in deptOptions"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="安全分类" prop="typeId">
            <el-select v-model="newData.typeId" placeholder="请选择安全分类" style="width: 260px">
              <el-option
                v-for="dict in typeList"
                :key="dict.typeId"
                :label="dict.typeName"
                :value="dict.typeId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="安全分级" prop="levelId">
            <el-select v-model="newData.levelId" placeholder="请选择安全分级" style="width: 260px">
              <el-option
                v-for="dict in levelList"
                :key="dict.levelId"
                :label="dict.levelName"
                :value="dict.levelId"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="执行周期" prop="way">
            <el-select v-model="newData.way" placeholder="请选择执行周期" style="width: 260px">
              <el-option
                v-for="dict in cycleOptions"
                :key="dict.key"
                :label="dict.value"
                :value="dict.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="执行方式" prop="cycle">
            <el-select v-model="newData.cycle" placeholder="请选择执行方式" style="width: 260px">
              <el-option
                v-for="dict in wayOptions"
                :key="dict.key"
                :label="dict.value"
                :value="dict.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="执行人员" prop="executionUserId">
            <el-select
              style="width:260px;"
              v-model="newData.executionUserId"
              filterable
              remote
              clearable
              reserve-keyword
              @change="userChange"
              placeholder="请输入姓名/工号/手机号"
              :remote-method="userSelectList">
              <el-option
                v-for="item in optionsUser"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="管控描述" prop="manageDes">
          <el-input type="textarea" resize="none" style="width:630px;" show-word-limit
                    :rows="4"
                    v-model="newData.manageDes" placeholder="请输入管控描述" maxlength="100"/>
        </el-form-item>
        <!--<el-form-item label="执行人员" prop="userList">-->
        <!--<div class="max-big-user-box" style="width:1400px;">-->
        <!--<div class="for-user-box" style="display: inline-block;border:1px solid #0045AF;border-radius:4px;padding:0 10px;margin:5px 20px 5px 0;"-->
        <!--v-for="(item,index) in newData.userList" :key="index">-->
        <!--<div class="for-user-min-box" style="display: flex;">-->
        <!--<p class="user-name-p" style="width:200px;line-height:30px;font-size:14px;color:#0045AF;">{{item.userName}}</p>-->
        <!--<p class="user-del-button el-icon-error"  style="cursor: pointer;line-height:30px;color:#999;" @click="delUser(index)"></p>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--<p class="add-button-p" style="margin:5px 0 0 0;cursor: pointer;text-align: center;font-size:14px;border-radius:4px;width:140px;line-height:30px;color:#0183FA;border:1px solid #0183FA;" @click="shadeOpen" v-if="!newData.userList[9]">添加人员</p>-->
        <!--</el-form-item>-->
      </el-form>
    </div>
    <el-dialog class="conditionsSettings-dialog" title='添加人员' width="460px" append-to-body
               :visible.sync="shadeType" v-if="shadeType" @close="dialogOff()"
               :close-on-click-modal="false" :close-on-press-escape="false">
      <div>
        <el-form :model="shadeForm" ref="shadeForm" :inline="true" :rules="shadeRules">
          <el-form-item label="人员查询" prop="userId" class="form-item" label-width="90px">
            <el-select
              style="width:300px;"
              v-model="shadeForm.userId"
              filterable
              remote
              clearable
              reserve-keyword
              @change="userChange"
              placeholder="请输入姓名/工号/手机号"
              :remote-method="userSelectList">
              <el-option
                v-for="item in optionsUser"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="shadeOut()">取消</p>
        <p class="dialog-footer-button-primary" @click="shadeUp">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getDeptDropList,
    laboratoryClassTypeGetList,
    laboratoryClassLevelGetList,
    systemUserSelect
  } from '@/api/commonality/permission'
  import { laboratoryGradeManageAdd,laboratoryGradeManageUpdate } from "@/api/hierarchicalControl/index";
  export default {
    name: 'addPage',
    props: {
      propsData: {}
    },
    data() {
      return {
        newData: {
          name: '',
          manageDes: '',
          deptId: '',
          typeId: '',
          levelId: '',
          executionUserId: '',
        },
        //下拉列表数据
        deptOptions: [],
        typeList: [],
        levelList: [],
        way:'',
        cycle:'',
        wayOptions: [{value:'单人执行',key:'1'},{value:'执行多人',key:'2'}],
        cycleOptions: [{value:'一天',key:'1'},{value:'一周',key:'2'},{value:'一月',key:'3'},{value:'季度',key:'4'},{value:'半年',key:'5'},{value:'一年',key:'6'},],
        rules: {
          name: [
            { required: true, message: '请输入管控名称', trigger: 'blur' },
            { required: true, message: '请输入管控名称', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          manageDes: [
            { required: true, message: '请输入管控描述', trigger: 'blur' },
            { required: true, message: '请输入管控描述', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          deptId: [
            { required: true, message: '请选择二级单位', trigger: 'blur' }
          ],
          typeId: [
            { required: true, message: '请选择安全分类', trigger: 'blur' }
          ],
          way: [
            { required: true, message: '请选择执行周期', trigger: 'blur' }
          ],
          cycle: [
            { required: true, message: '请选择执行方式', trigger: 'blur' }
          ],
          levelId: [
            { required: true, message: '请选择安全分级', trigger: 'blur' }
          ],
          executionUserId: [
            { required: true, message: '请选择执行人员', trigger: 'blur' }
          ]
        },
        shadeRules: {
          userId: [
            { required: true, message: '请选择人员', trigger: 'blur' }
          ]
        },
        shadeType: false,
        // 人员查询列表
        userName: '',
        userId: '',
        optionsUser: [],
        shadeForm: {}
      }
    },
    created() {
      this.getDeptDropList()
      this.laboratoryClassTypeGetList()
      this.laboratoryClassLevelGetList()
    },
    mounted() {
      if(this.propsData.id){
        this.$set(this,'newData',this.propsData);
        this.$set(this,'optionsUser',[{
          userId:this.propsData.executionUserId,
          userName:this.propsData.executionUser,
        }]);
        this.$set(this.newData,'way',"1");
        this.$set(this.newData,'cycle',"1");
      }
    },
    methods: {
      // 返回按钮
      backPage() {
        this.$parent.tableButton(6)
      },
      /** 提交按钮 */
      submitForm() {
        let self = this;
        this.$refs['form'].validate(valid => {
          if (valid) {
            let obj = {
              name: this.newData.name, //管控名称
              deptId: this.newData.deptId, //二级单位ID
              typeId: this.newData.typeId, //分类ID
              levelId: this.newData.levelId, //分级ID
              executionUserId: this.newData.executionUserId, //执行人员ID
              manageDes: this.newData.manageDes //管控描述
            }
            this.deptOptions.forEach((item)=>{
              if(item.deptId == self.newData.deptId){
                obj.deptName = item.deptName
              }
            })
            this.typeList.forEach((item)=>{
              if(item.typeId == self.newData.typeId){
                obj.typeName = item.typeName
              }
            })
            this.levelList.forEach((item)=>{
              if(item.levelId == self.newData.levelId){
                obj.levelName = item.levelName
              }
            })
            this.optionsUser.forEach((item)=>{
              if(item.userId == self.newData.executionUserId){
                obj.executionUser = item.userName
              }
            })
            if(this.newData.id){
              obj.id = this.newData.id;
              laboratoryGradeManageUpdate(obj).then(response => {
                this.msgSuccess(response.message)
                this.backPage();
              })
            }else{
              laboratoryGradeManageAdd(obj).then(response => {
                this.msgSuccess(response.message)
                this.backPage();
              })
            }
          }
        })
      },
      /** 查询二级单位列表 */
      getDeptDropList() {
        getDeptDropList({ deptName: '', level: 2, deptType: 1 }).then(response => {
          this.$set(this, 'deptOptions', response.data)
        })
      },
      //查询安全分级
      laboratoryClassLevelGetList() {
        laboratoryClassLevelGetList({}).then(response => {
          this.$set(this, 'levelList', response.data)
        })
      },
      //查询安全分类
      laboratoryClassTypeGetList() {
        laboratoryClassTypeGetList({}).then(response => {
          this.$set(this, 'typeList', response.data)
        })
      },
      //弹层开启
      shadeOpen() {
        this.$set(this, 'userName', '')
        this.$set(this, 'userId', '')
        this.$set(this.shadeForm, 'userId', '')
        this.$set(this, 'optionsUser', [])
        this.$set(this, 'shadeType', true)
      },
      //关闭弹层
      shadeOut() {
        this.$set(this, 'userName', '')
        this.$set(this, 'userId', '')
        this.$set(this.shadeForm, 'userId', '')
        this.$set(this, 'optionsUser', [])
        this.$set(this, 'shadeType', false)
      },
      //弹窗确定
      shadeUp() {
        let self = this
        this.$refs['shadeForm'].validate(valid => {
          if (valid) {
            for (let i = 0; i < self.newData.userList.length; i++) {
              if (self.newData.userList[i].userId == this.userId) {
                this.msgError('人员已存在')
                return
              }
            }
            this.newData.userList.push({
              userName: this.userName,
              userId: this.userId
            })
            this.shadeOut()
          }
        })
      },
      //人员选择
      userChange(val) {
        let self = this
        for (let i = 0; i < self.optionsUser.length; i++) {
          if (self.optionsUser[i].userId == val) {
            this.$set(this, 'userName', self.optionsUser[i].userName)
            this.$set(this, 'userId', self.optionsUser[i].userId)
          }
        }
      },
      //查询
      userSelectList(query) {
        if (query !== '' && query.length > 1) {
          systemUserSelect({
            'searchValue': query,
            'userType': ''
          }).then(response => {
            this.$set(this, 'optionsUser', response.data)
          })
        } else {
          this.$set(this, 'optionsUser', [])
        }
      },
      delUser(index) {
        this.newData.userList.splice(index, 1)
      }
    }
  }
</script>

<style scoped lang="scss">
  .conditionsSettings-addPage {
    .content-box {
      flex: 1;
      display: flex;
      padding: 20px;
      .add-form-box {
        .el-form-item {
          display: inline-block;
        }
      }
    }
  }
</style>
