<template>
  <el-dialog v-model="showDialog" class="edit-person-dialog" title="编辑人员" width="800" destroy-on-close>
    <el-form :model="formData" ref="ruleFormRef" :rules="rules" label-position="top" class="edit-person-dialog__form">
      <el-form-item prop="positionId" label="岗位职责">
        <el-select v-model="formData.positionId" placeholder="请选择职位">
          <el-option
            v-for="position in props.positionOptions"
            :key="position.positionLevel"
            :label="position.title"
            :value="position.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="realname" label="姓名">
        <el-input v-model="formData.realname" />
      </el-form-item>
      <el-form-item prop="staffNo" label="员工号">
        <el-input v-model="formData.staffNo" />
      </el-form-item>
      <el-form-item prop="mobile" label="联系电话">
        <el-input v-model="formData.mobile" type="number" />
      </el-form-item>
      <el-form-item prop="department" label="部门">
        <el-input v-model="formData.department" />
      </el-form-item>
      <el-form-item prop="jobTitle" label="职务">
        <el-input v-model="formData.jobTitle" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
        <el-button @click="showDialog = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { storeToRefs } from 'pinia';
  import type { FormInstance, FormRules } from 'element-plus';
  import useTeamStore from '../../store/userTeam';
  import { PersonInfoType, PositionType, saveTeamPersonnel } from '@/api/emergency-organization/teams';

  const props = defineProps<{ positionOptions: PositionType[]; personInfo: PersonInfoType }>();

  type PersonInfo = {
    id: number;
    positionId: string;
    realname: string;
    staffNo: string;
    mobile: string;
    department: string;
    jobTitle: string;
  };

  const showDialog = ref(false);

  const { curTeam, loadingTeamInfo } = storeToRefs(useTeamStore());
  const { refreshCurTeamInfo } = useTeamStore();

  const formData = ref<PersonInfoType>({
    id: 0,
    userId: 0,
    positionId: '',
    realname: '',
    staffNo: '',
    mobile: '',
    department: '',
    jobTitle: '',
  });
  const ruleFormRef = ref<FormInstance>();
  const rules = ref<FormRules<PersonInfo>>({
    positionId: [{ required: true, message: '请选择岗位', trigger: 'blur' }],
    realname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    staffNo: [{ required: true, message: '请输入员工号', trigger: 'blur' }],
    mobile: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
  });

  function dialogShow() {
    showDialog.value = true;
  }

  async function submitForm() {
    await ruleFormRef.value!.validate(async (valid) => {
      if (valid) {
        loadingTeamInfo.value = true;
        showDialog.value = false;

        const data = {
          teamId: curTeam.value!.teamId,
          ...formData.value,
        };
        await saveTeamPersonnel(data);
        await refreshCurTeamInfo();

        loadingTeamInfo.value = false;
      }
    });
  }

  watch(
    () => showDialog.value,
    () => {
      if (showDialog.value) {
        formData.value = props.personInfo;
      }
    },
  );

  defineExpose({
    dialogShow,
  });
</script>

<style scoped lang="scss">
  .edit-person-dialog__header {
  }
  .edit-person-dialog__form {
    display: grid;
    grid-template-columns: repeat(2, 45%);
    justify-content: space-around;

    // 去掉el input右侧的小箭头
    :deep(input::-webkit-outer-spin-button),
    :deep(input::-webkit-inner-spin-button) {
      -webkit-appearance: none;
    }
  }

  :deep(.el-dialog__header) {
    text-align: left;
    font-weight: bold;
  }
</style>

<style>
  .edit-person-dialog {
    min-height: 0;
  }
</style>
