<template>
    <div>
      <BaseDialog
        width="400px"
        :isShow.sync="isEditDeptDialog"
        :title="dialogTitle"
        @close="close"
        @submit="submitForm"
        :appendToBody="true"
        :confirmStatus="false"
      >
        <div class="content">
        <el-form
            label-position="right"
            label-width="80px"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
          >
            <el-form-item :label="dialogTitle === '新增部门' ? '部门简称': '子级简称'" prop="departmentName">
              <el-input
                v-model="ruleForm.departmentName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item :label="dialogTitle === '新增部门' ? '部门全称': '子级全称'" prop="departmentFullName">
              <el-input
                v-model="ruleForm.departmentFullName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="registeredContacts">
              <el-input
                v-model="ruleForm.registeredContacts"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="departmentPhone">
              <el-input
                v-model="ruleForm.departmentPhone"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="departmentRemarks">
              <el-input
                type="textarea"
                :rows="5"
                v-model="ruleForm.departmentRemarks"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </BaseDialog>
    </div>
  </template>
  
  <script>
  import { addDepartment, updateDepartment } from '@/api/company'
  export default {
    data() {
      return {
        rules: {
          departmentName: [{ required: true, message: "请输入", trigger: "blur" }]
        },
        ruleForm: {},
        isEditDeptDialog: false,
        dialogTitle: '新增',
        listData: []
      };
    },
  
    mounted() {},
  
    methods: {
        openBoxs(row, type) {
          this.isEditDeptDialog = true
          if(type === 'addDept') {
            this.dialogTitle = '新增部门'
            this.ruleForm = {
              companyId: row.companyId
            }
          } else if(type === 'addSub') {
            this.dialogTitle = '新增子级'
            this.ruleForm = {
              companyId: row.companyId,
              departmentId: row.departmentId
            }
          } else {
            this.dialogTitle = '修改'
            this.ruleForm = row
          }
          console.log(this.ruleForm)
        },
        close() {
          this.$emit('refresh')
        },
        submitForm() {
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                  const _request = this.dialogTitle === "修改" ? updateDepartment : addDepartment;
                  _request(this.ruleForm).then(res => {
                    this.$message.success(res.msg);
                    this.isEditDeptDialog = false;
                    this.$emit('refresh')
                  }).finally(() => {
                    return false;
                  })
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
    },
  };
</script>
  
<style lang="scss" scoped>

</style>
  