<template>
  <el-dialog
    :title="title"
    v-model="showDia"
    width="1200px"
    append-to-body
    class="dialog_box"
  >
    <el-form
      ref="diaRef"
      :model="form"
      label-width="100px"
      :rules="rules"
      :inline="true"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item
            v-if="useUserStore().showAllTenant"
            label="学校名称"
            prop="tenantId"
          >
            <SchoolSelect v-model="form.tenantId" @updateData="updateSchool" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="8">
          <el-form-item label="老师姓名:" prop="name">
            <el-input
              maxlength="20"
              placeholder="请输入"
              clearable
              v-model="form.name"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="教职工号:" prop="staNo">
            <el-input
              placeholder="请输入"
              clearable
              v-model="form.staNo"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别:" prop="sex">
            <el-select
              v-model="form.sex"
              placeholder="请选择"
              clearable
              style="width: 200px"
            >
              <el-option
                v-for="dict in selectOption.sexOption"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="8">
          <el-form-item label="部门:">
            <el-tree-select
              v-model="form.deptId"
              :data="deptList"
              :render-after-expand="false"
              :props="deptProps"
              placeholder="请选择"
              clearable
              style="width: 200px"
              @focus="handleFouseDeptSelect"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话:" prop="phone">
            <el-input
              placeholder="请输入"
              clearable
              v-model="form.phone"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证号:">
            <el-input
              maxlength="100"
              placeholder="请输入"
              clearable
              v-model="form.idNo"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="8">
          <el-form-item label="政治面貌:">
            <el-input
              maxlength="50"
              placeholder="请输入"
              clearable
              v-model="form.politicsStatus"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职称:">
            <el-input
              maxlength="50"
              placeholder="请输入"
              clearable
              v-model="form.staRank"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学科:" prop="politicsStatus">
            <el-select
              v-model="form.subject"
              placeholder="请选择"
              clearable
              style="width: 200px"
            >
              <el-option
                v-for="dict in selectOption.subjectOption"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="居住地址:" class="address_input">
        <el-input
          :rows="2"
          maxlength="200"
          type="textarea"
          placeholder="请输入"
          v-model="form.address"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { cloneDeep } from "lodash-es";
import { ElMessage } from "element-plus";
import {
  validatePhone,
  validateIdNumber,
  validatePositiveNum,
} from "@/utils/validate";
import {
  updateStaffApi,
  addStaffApi,
  getDeptListApi,
} from "@/api/smartCampus/index";
import { computed, watch } from "vue";
import useUserStore from "@/store/modules/user";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  detailInfo: {
    type: Object,
  },
  selectOption: {
    type: Object,
  },
});
const emits = defineEmits(["update:modelValue", "success", "cancel"]);
const { proxy } = getCurrentInstance();
const deptList = ref([]);
const deptProps = { label: "deptName", value: "id", children: "children" };
const form = ref({});
const title = ref();

const rules = ref({
  tenantId: [
    { required: true, message: "学校名称不能为空", trigger: "change" },
  ],
  name: [{ required: true, message: "老师姓名不能为空", trigger: "blur" }],
  staNo: [
    { required: true, message: "教职工号不能为空", trigger: "blur" },
    {
      required: true,
      validator: validatePositiveNum,
      trigger: "blur",
    },
  ],
  sex: [{ required: true, message: "性别不能为空", trigger: "change" }],
  phone: [
    { required: true, message: "联系电话不能为空", trigger: "blur" },
    {
      required: true,
      validator: validatePhone,
      trigger: "blur",
    },
  ],
  idNo: [
    { required: true, message: "身份证号不能为空", trigger: "blur" },
    {
      required: true,
      validator: validateIdNumber,
      trigger: "blur",
    },
  ],
});

const showDia = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits("update:modelValue", val);
  },
});

//重置
function reset() {
  form.value = {
    id: undefined,
    name: undefined,
    staNo: undefined,
    deptId: undefined,
    phone: undefined,
    sex: undefined,
    idNo: undefined,
    politicsStatus: undefined,
    staRank: undefined,
    roleId: undefined,
    subject: undefined,
    address: undefined,
    deptName: undefined,
  };

  proxy.resetForm("diaRef");
}
function updateSchool() {
  form.value.deptId = "";
  if (form.value.tenantId) {
    fetchSchoolDeptList();
  } else {
    // kong
    deptList.value = [];
  }
}
// 部门聚焦
function handleFouseDeptSelect() {
  if (useUserStore().showAllTenant && !form.value.tenantId) {
    ElMessage.warning("请选择学校名称");
  }
}
// 提交
function submitForm() {
  proxy.$refs["diaRef"].validate((valid) => {
    if (valid) {
      if (form.value.id !== undefined) {
        updateStaffApi(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          showDia.value = false;
          emits("success", false);
        });
      } else {
        addStaffApi(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          showDia.value = false;
          emits("success", false);
        });
      }
    }
  });
}

//取消
function cancel() {
  emits("cancel", false);
  reset();
}
// 获取部门列表
// 获取对应学校部门
function fetchSchoolDeptList() {
  if (useUserStore().showAllTenant) {
    if (form.value.tenantId) {
      getDeptListApi({ tenantId: form.value.tenantId }).then((res) => {
        if (res.code === 200) {
          deptList.value = res.data;
        }
      });
    } else {
      deptList.value = [];
    }
  } else {
    deptList.value = props.selectOption.deptOption;
  }
}

watch(
  () => props.detailInfo,
  (val) => {
    if (val && val.id !== undefined) {
      title.value = "教职工管理/编辑";
      form.value = { ...val };
      fetchSchoolDeptList();
    } else {
      title.value = "教职工管理/添加";
      fetchSchoolDeptList();
      reset();
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>
:deep(.el-input) {
  .el-input__wrapper {
    width: 220px !important;
  }
}
.el-select {
  width: 220px !important;
}
.dialog_box {
  .family_box {
    margin-bottom: 12px;
    padding: 12px 12px 12px 6px;
    border: 1px solid #ccc;
    .delete_btn {
      display: flex;
      justify-content: flex-end;
      cursor: pointer;
    }
  }
  .address_input {
    width: 100%;
  }
  .add_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
    span {
      cursor: pointer;
    }
  }
}
</style>
