<!-- 
 * @Description: 人员表单
 * @Author: syy 
 * @Date: 2023-12-15 15:45:50
-->
<template>
  <div class="userManageForm">
    <div>
      <el-row :gutter="16">
        <el-col :span="24">
          <s-form-item label="人员姓名" prop="name">
            <s-input v-model="userInfo.name"></s-input>
          </s-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="24">
          <s-form-item label="上传人脸" prop="faces">
            <el-upload
              v-model:file-list="fileList"
              action="/api/business/personApi/uploadFile"
              list-type="picture-card"
              :on-success="handleAvatarSuccess"
              :on-error="handleAvatarError"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              accept=".jpg, .jpeg, .png"
              :headers="{
                Authorization: `${TokenEnum.TOKEN_PREFIX} ${accessToken}`
              }"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible" title="查看图片">
              <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" />
            </el-dialog>
          </s-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="16">
        <el-col :span="12">
          <s-form-item label="性别" prop="gender">
            <s-radio-group v-model="userInfo.gender" :options="genderOptions" />
          </s-form-item>
        </el-col>
        <el-col :span="12">
          <s-form-item label="年龄" prop="age">
            <s-input v-model="userInfo.age"></s-input>
          </s-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <s-form-item label="手机号" prop="phone">
            <s-input v-model="userInfo.phone"></s-input>
          </s-form-item>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { SysUserPersonnel, userManageKeyPersonApi } from "@/api";
import { Plus } from "@element-plus/icons-vue";
import { useUserStore } from "@/stores/modules";
import type { UploadProps } from "element-plus";
import { ElMessage } from "element-plus";
import { TokenEnum } from "@/enums";
// props
interface FormProps {
  modelValue: Partial<SysUserPersonnel.SysUserPerInfo>;
}
const emit = defineEmits(["update:modelValue"]); //定义emit
const props = defineProps<FormProps>(); //定义props
// 人员信息
const userInfo = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val)
});
/*  */
const userStore = useUserStore();
const { accessToken } = userStore;
const fileList = ref<any>([]);
const faces = ref<SysUserPersonnel.SysUserAvatar[]>([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const handleRemove: UploadProps["onRemove"] = (uploadFile: any) => {
  const index = faces.value.findIndex(item => item.uid === uploadFile.uid);
  if (index > -1) {
    faces.value.splice(index, 1);
  }
  userInfo.value.faces = faces.value;
  if (uploadFile.personId) {
    userManageKeyPersonApi.deleteFace({ personId: uploadFile.personId, faceIds: [uploadFile.uid] }).then(res => {});
  }
};

const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
  if (response.code === 200) {
    faces.value.push({ faceUrl: response.data, uid: uploadFile.uid });
    userInfo.value.faces = faces.value;
    ElMessage.success(response.msg);
  } else {
    ElMessage.error(response.msg);
    fileList.value = fileList.value.splice(0, fileList.value.length - 1);
  }
};
const handleAvatarError: UploadProps["onError"] = (error, uploadFile, uploadFiles) => {
  console.log(error, uploadFile, uploadFiles, "err");
};
// 通用状态选项
const genderOptions = ref([
  {
    label: "未知",
    value: "GENDER_UNKNOWN"
  },
  {
    label: "男",
    value: "GENDER_MALE"
  },
  {
    label: "女",
    value: "GENDER_FEMALE"
  }
]);

onMounted(() => {
  // 初始化
  userInfo.value.gender = userInfo.value.gender ? userInfo.value.gender : genderOptions.value[0].value;
  if (userInfo.value.personId) {
    if (userInfo.value.faces?.length > 0) {
      fileList.value = [
        ...JSON.parse(JSON.stringify(userInfo.value.faces)).map((item: any) => {
          return {
            url: item.faceUrl,
            uid: item.faceId,
            personId: userInfo.value.personId
          };
        })
      ];
      faces.value = [
        ...JSON.parse(JSON.stringify(userInfo.value.faces)).map((item: any) => {
          return {
            faceUrl: item.faceUrl,
            uid: item.faceId,
            personId: userInfo.value.personId
          };
        })
      ];
    }
  }
});
</script>

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
  width: 100% !important;
}
:deep(.el-date-editor.el-input) {
  width: 92% !important;
}
:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 100px !important;
  height: 100px !important;
}
:deep(.el-upload--picture-card) {
  width: 100px !important;
  height: 100px !important;
}
</style>
