<template>
  <div>
    <el-dialog :title="title" width="80%" v-model="props.modelValue" :before-close="closeDialog">
      <div class="config">
        <el-form class="mosty-from-wrap" ref="dialogFormRef" :inline="true" label-position="top" :model="dialogForm"
          :rules="rules">
          <el-form-item class="ww25" label="部门名称" :rules="[{ required: true, message: '请填写部门名称' }]" prop="orgName">
            <el-input placeholder="请填写部门名称" v-model="dialogForm.orgName" show-word-limit maxlength="30"></el-input>
          </el-form-item>
          <el-form-item class="ww25" label="部门全称" :rules="[{ required: true, message: '请填写部门全称' }]" show-word-limit
            maxlength="30" prop="orgQc" required>
            <el-input placeholder="请填写部门全称" v-model="dialogForm.orgQc" show-word-limit maxlength="30"></el-input>
          </el-form-item>
          <el-form-item class="ww25" label="部门简称" :rules="[{ required: true, message: '请填写部门简称' }]" prop="orgJc"
            required>
            <el-input placeholder="请填写部门简称" v-model="dialogForm.orgJc" show-word-limit maxlength="30"></el-input>
          </el-form-item>
          <el-form-item class="ww25" label="部门类型" :rules="[{ required: true, message: '请选择部门类型' }]" prop="orgType"
            required label-width="140px">
            <el-select style="width: 100%" v-model="dialogForm.orgType" class="m-4" placeholder="请选择部门类型">
              <el-option v-for="item in D_ORG_ORGTYPE" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item class="ww25" label="部门代码" :rules="[{ required: true, message: '请填写部门代码' }]" prop="orgCode"
            required label-width="140px">
            <el-input placeholder="请填写部门代码" show-word-limit maxlength="30" v-model="dialogForm.orgCode"
              :disabled="dialogForm.id"></el-input>
          </el-form-item> -->
          <el-form-item class="ww25" label="部门等级" :rules="[{ required: true, message: '请选择部门等级' }]" prop="orgLevel"
            required label-width="140px">
            <el-select style="width: 100%" v-model="dialogForm.orgLevel" class="m-4" placeholder="请选择部门等级">
              <el-option v-for="dict in D_ORG_ORGLEVEL" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item class="ww25" label="部门顺序号">
            <el-input-number style="width: 100%" v-model="dialogForm.orgNo" class="mx-4" placeholder="请填写部门顺序号" :min="1"
              :max="100" controls-position="right" />
          </el-form-item>
          <el-form-item class="ww25" label="部门电话" prop="linkTel">
            <el-input v-model="dialogForm.linkTel" placeholder="请填写部门电话"></el-input>
          </el-form-item>
          <el-form-item class="ww25" label="部门业务类型" :rules="[{ required: true, message: '请选择部门业务类型' }]"
            prop="orgBizType" required>
            <el-select style="width: 100%" v-model="dialogForm.orgBizType" class="m-4" placeholder="请选择部门业务类型">
              <el-option v-for="item in D_ORG_ORGBIZTYPE" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item class="ww25" label="部门联系人电话" prop="linkManTel">
            <el-input placeholder="请填写部门联系人电话" v-model="dialogForm.linkManTel"></el-input>
          </el-form-item>
          <el-form-item class="ww25" label="部门联系人">
            <el-input show-word-limit placeholder="请填写部门联系人" maxlength="30" v-model="dialogForm.linkMan"></el-input>
          </el-form-item>
          <el-form-item class="ww25" label="部门所属行政区划">
            <el-input show-word-limit placeholder="请填写部门所属行政区划" maxlength="50" v-model="dialogForm.xzqh"></el-input>
          </el-form-item>
          <el-form-item class="ww100" label="部门地址">
            <el-input show-word-limit placeholder="请填写部门地址" maxlength="200" v-model="dialogForm.address"
              :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"></el-input>
          </el-form-item>
          <el-form-item class="ww100" label="备注" label-width="140px">
            <el-input v-model="dialogForm.bz" show-word-limit maxlength="200" :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" :loading="loading" @click="handleSave(dialogFormRef)">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button @click="closeDialog" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import * as rule from "@/utils/rules.js";
import { addSysDept, updateSysDept } from "@/api/user-manage";
const { proxy } = getCurrentInstance();
const { D_ORG_ORGBIZTYPE, D_ORG_ORGLEVEL, D_ORG_ORGTYPE } = proxy.$dict("D_ORG_ORGBIZTYPE", "D_ORG_ORGLEVEL", "D_ORG_ORGTYPE");
const emits = defineEmits(["changeAddVi"]);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  editObj: {
    type: Object,
    default: () => { }
  },
});
const rules = ref({
  ...rule.phoneRule({ validator: true, require: false }, "linkTel"),
  ...rule.phoneRule({ validator: true, require: false }, "linkManTel"),
  ...rule.emailRule({ validator: true, require: false, }, "email"),

});
const loading = ref(false); //新增保存按钮截流
const title = ref("新增");
const dialogFormRef = ref();
const dialogForm = ref({
  orgNo: 1
});
watch(() => props.modelValue, (val) => {
  if (val) {
    dialogForm.value = JSON.parse(JSON.stringify(props.editObj));
    title.value = props.editObj && props.editObj?.id ? '修改' : '新增';
  }
}, { deep: true });
// 保存
const handleSave = async (dialogFormRef) => {
  if (!dialogFormRef) return;
  await dialogFormRef.validate((valid) => {
    if (valid) {
      if (title.value == "新增") {
        addSysDept(dialogForm.value).then(() => {
          loading.value = false;
          ElMessage.success("新增成功");
          emits("changeAddVi", true);
        })
      } else {
        updateSysDept(dialogForm.value).then(() => {
          loading.value = false;
          ElMessage.success("修改成功");
          emits("changeAddVi", true);
        })
      }
    } else {
      ElMessage.error("请输入必填项");
    }
  });
};
// 关闭
const closeDialog = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      loading.value = false;
      dialogForm.value = { orgNo: 1 };
      dialogFormRef.value.clearValidate();
      emits("changeAddVi", false);
    })
    .catch(() => {
      // catch error
    })

};
</script>

<style lang="scss" scoped>
.config {
  .el-form {
    padding: 10px 40px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .el-form-item {
    text-align: center;
  }
}
</style>