<template>
  <u-popup
    v-model="props.show"
    mode="center"
    closeable
    safe-area-inset-bottom
    width="600rpx"
    height=""
    border-radius="30"
    @close="handeClose"
  >
    <view class="personal-from">
      <view class="title">{{ title }}</view>
      <view v-if="field === 'FIMAGEFILESERVER'">
        <view v-if="!imgUrl">
          <view class="img-content" @tap="uploadImage">
            <u-image
              width="82rpx"
              height="72rpx"
              src="../../../static/img/icon-phto.png"
            />
          </view>
          <view class="img-text">请上传宽高比1 : 1的图片</view>
        </view>
        <u-image
          v-else
          width="188rpx"
          height="188rpx"
          :src="imgUrl"
          border-radius="24"
          mode="aspectFit"
          style="margin-left: 206rpx"
        />
      </view>
      <view
        v-else-if="field === 'FSEX'"
        style="display: flex; justify-content: center"
      >
        <u-radio-group v-model="radio">
          <u-radio
            @change="radioChange"
            v-for="(item, index) in radioList"
            :key="index"
            :name="item.name"
            :style="{ marginRight: index ? '' : '120rpx' }"
          >
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </view>
      <view v-else class="content">
        <u-input v-model="inputValue" :placeholder="'请输入' + title" />
      </view>
      <view class="btn" @tap="onConfirm(props.field)">确定</view>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
import { baseUrl } from "@/utils/request";
import { useStudentStore } from "@/stores/modules/studentStore";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "姓名",
  },
  field: {
    type: String,
    default: "",
  },
});

const emits = defineEmits(["update:show", "submit"]);
const globalStore = useStudentStore();
const imgUrl = ref();
const radio = ref();
const inputValue = ref();
const radioList = [
  {
    name: "男",
  },
  {
    name: "女",
  },
];
const uploadImage = () => {
  uni.chooseImage({
    count: 1,
    success(res: any) {
      imgUrl.value = res.tempFilePaths[0];
    },
  });
};
const radioChange = (e: string) => {};
const onConfirm = (field: string) => {
  switch (field) {
    case "FIMAGEFILESERVER":
      if (!imgUrl.value) return;
      uni.uploadFile({
        url:
          baseUrl +
          "/LQKJ.K3.PeiXunSystem.WebApi.WebApiEditService.UserImage,LQKJ.K3.PeiXunSystem.WebApi.common.kdsvc",
        filePath: imgUrl.value,
        fileType: "image",
        name: "image",
        formData: {
          studentId: globalStore.infoData.FSTUDENTID,
        },
        success: ({ data }) => {
          const uploadFileRes = JSON.parse(data);
          if (uploadFileRes.code == 200) {
            globalStore.setInfoData({
              ...globalStore.infoData,
              ...{ FIMAGEFILESERVER: uploadFileRes.data },
            });
          }
        },
      });
      break;
    case "FSEX":
      if (!radio.value) return;
      globalStore.setInfoData({
        ...globalStore.infoData,
        ...{ FSEX: radio.value == "男" ? "0" : "1" },
      });
      emits("submit");
      break;
    default:
      if (!inputValue.value) return;
      let data: any = JSON.parse(JSON.stringify(globalStore.infoData));
      data[field] = inputValue.value;
      globalStore.setInfoData(data);
      emits("submit");
      break;
  }
  handeClose();
};
const handeClose = () => {
  imgUrl.value = "";
  radio.value = "";
  inputValue.value = "";
  emits("update:show", false);
};
</script>

<style lang="scss" scoped>
.personal-from {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .title {
    text-align: center;
    width: 100%;
    margin-bottom: 32rpx;
    margin-top: 26rpx;
    height: 48rpx;
    font-size: 34rpx;
    font-weight: 500;
    color: #222222;
    line-height: 40rpx;
  }

  .content {
    padding: 0 32rpx;
  }

  .img-content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 188rpx;
    height: 188rpx;
    border-radius: 24rpx;
    border: 2rpx solid rgba(0, 0, 0, 0.1);
    margin-left: 206rpx;
  }

  .img-text {
    margin-top: 8rpx;
    width: 100%;
    font-size: 24rpx;
    font-weight: 500;
    color: #666666;
    text-align: center;
  }

  .btn {
    width: 336rpx;
    height: 84rpx;
    background: #04a7ff;
    border-radius: 16rpx;
    text-align: center;
    line-height: 84rpx;
    margin: 28rpx 0 28rpx 132rpx;
    font-weight: 600;
    color: #ffffff;
  }
}
</style>
