<template>
  <el-dialog v-dialogDrag :title="isEdit?'编辑部门':'新增部门'" :visible.sync="addStatus" :close-on-click-modal="false" :before-close="cancel"
    class="dialogClass" width="45%">
    <div class="addDia">
      <el-form :model="form" ref="diaform" :rules="rules" class="diaform" label-width="80px">
        <el-form-item label="部门名称" prop="deptname">
          <el-input size="small" v-model.trim="form.deptname"></el-input>
        </el-form-item>
        <el-form-item label="部门编码">
          <el-input size="small" v-model.trim="form.deptcode"></el-input>
        </el-form-item>
        <el-form-item label="部门描述">
          <el-input type='textarea' size="small" v-model.trim="form.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :loading="btnloading" icon="el-icon-circle-check" size="mini" @click="sumbit('diaform')" type="primary">保存</el-button>
          <el-button icon="el-icon-circle-close" size="mini" @click="cancel" type="info">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    props: {
      addStatus:{
        type:Boolean,
        default:()=>false
      },
      form: {
        type: Object,
        default: () => {},
      },
      isEdit:{
        type:Boolean,
        defalut:()=>false
      },
      selectId: {
        type: Number,
        default: () => null,
      },
    },
    data(){
      return {
        btnloading: false,
        rules:{
          deptname:[
            {
              required:true,
              message:'请输入部门名称',
              trigger:'blur'
            }
          ]
        }
      }
    },
    methods: {
      sumbit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnloading = true;
            if (!this.isEdit) { // 新增
              this.$store.dispatch("dept/DeptAdd", this.form).then((res) => {
                this.btnloading = false;
                this.$emit("getData");
              }).catch(err => {
                this.btnloading = false;
              })
            } else {
              this.form.id = this.selectId;
              this.$store
                .dispatch("dept/DeptEdit", this.form)
                .then((res) => {
                  this.btnloading = false;
                  this.$emit("getData");
                }).catch(err => {
                  this.btnloading = false;
                })
            }
          }
        });
      },
      cancel() {
        this.$emit("cancel");
      },
    },
  };

</script>
<style lang="scss" scoped>
  .addDia {
    padding: 0 5%;
    .diaform {

      ::v-deep .el-form-item__label {
        font-weight: 500;
      }
    }

    ::v-deep.el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }

</style>
