<template>
  <div class="global">
    <div class="mainContainer">
      <div class="title">新增部门</div>
      <el-form label-width="120px" :model="formData" :rules="rules" ref="formData" >
        <el-form-item label="新增部门:" prop="dname">
          <el-input v-model="formData.dname"  placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="formData.dremark" />
        </el-form-item>
      </el-form>
      <div class="btns">
        <el-button type="success" plain @click="cancel()">取消</el-button>
        <el-button type="success" @click="btnSave('formData')">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import {addFun,updateFun,detailFun,departNameExit} from '@/api/system/userManagement/departmentManagement'
export default {
  name: 'AddPartment',
  data() {
    var checkDname = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入部门名称'))
      } else {
        if(value == this.copyDepart){
          callback()
        }else{
          departNameExit(value).then((res) => {
            if (res.code == 200) {
              if (res.data > 0) {
                callback(new Error('该部门名称已存在'))
              } else {
                callback()
              }
            } else {
              callback(new Error(res.msg))
            }
          })
        }
      }
    }
    return {
      formData: {
        dname: '',
        dremark: ''
      },
      // 校验规则
      rules: {
        dname: [{ required: true, trigger: 'blur', validator: checkDname }]
      },
      copyDepart:''
    }
  },
  mounted() {
    // 对表单进行重置
    this.$nextTick(() => {
      this.$refs['formData'].resetFields()
    })
    if (this.$route.query.state == 'edit') {
      this.detailInfo()
    }
  },
  methods: {
    addList() {
      addFun(this.formData).then(res => {
        if (res.code == 200) {
          this.$message.success('新增成功')
          this.$router.push({
            path: '/systemManagement/user/departmentManagement',
            query: {
              name:'DepartmentManagement'
            }
          })
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    updateList() {
      updateFun(this.formData).then(res => {
        if (res.code == 200) {
          this.$message.success('修改成功')
          this.$router.push({
            path: '/systemManagement/user/departmentManagement',
            query: {
              name:'DepartmentManagement'
            }
          })
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    detailInfo() {
      detailFun(this.$route.query.id).then(res => {
        if (res.code == 200) {
          this.formData = res.data
          this.copyDepart = res.data.dname
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    btnSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.$route.query.state == 'add') {
            this.addList()
          } else if (this.$route.query.state == 'edit') {
            this.updateList()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancel() {
      // window.history.go(-1)
      this.$router.push({
        path: '/systemManagement/user/departmentManagement',
        query: {
          name:'DepartmentManagement'
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
    .mainContainer{
        .title{
            margin-bottom:20px;
        }
        .btns{
            text-align:right;
        }
    }
</style>
<style scoped>
    .el-input{
        width:30%;
    }
</style>
