<template>
  <view style="position: relative">
    <u-image
      width="100%"
      height="750rpx"
      :src="baseUrl + '/' + globalStore.infoData?.FIMAGEFILESERVER"
    />
    <view class="my-container">
      <view class="my-info">
        <text class="name">{{ globalStore.infoData?.FNAME }}</text>
        <view class="info">
          <text>{{ globalStore.infoData?.FWORKUNIT1 }}</text>
          <u-line
            color="#ffffff"
            direction="col"
            length="30rpx"
            :hair-line="false"
            margin="0 20rpx"
          />
          <text>{{ globalStore.infoData?.FDUTIES }}</text>
        </view>
      </view>
      <view class="my-list">
        <view
          class="my-item"
          @tap="showPersonal('FIMAGEFILESERVER', '上传头像')"
        >
          <text>头像</text>
          <u-image
            width="72rpx"
            height="72rpx"
            shape="circle"
            :src="baseUrl + '/' + globalStore.infoData?.FIMAGEFILESERVER"
          />
        </view>
        <view class="my-item" @tap="showPersonal('FNAME', '姓名')">
          <text>姓名</text>
          <text>{{ globalStore.infoData.FNAME }}</text>
        </view>
        <view class="my-item" @tap="showPersonal('FSEX', '性别')">
          <text>性别</text>
          <text>{{ globalStore.infoData.FSEX == "1" ? "女" : "男" }}</text>
        </view>
        <view class="my-item" @tap="showPersonal('FMOBILE', '电话')">
          <text>电话</text>
          <text>{{ globalStore.infoData.FMOBILE }}</text>
        </view>
        <view class="my-item" @tap="showPersonal('FWORKUNIT1', '单位')">
          <text>单位</text>
          <text>{{ globalStore.infoData.FWORKUNIT1 }}</text>
        </view>
        <view class="my-item" @tap="showPersonal('FDUTIES', '职务')">
          <text>职务</text>
          <text>{{ globalStore.infoData.FDUTIES }}</text>
        </view>
        <u-line :hair-line="true" />
        <view class="logout" @tap="logout">
          <text>退出登录</text>
          <u-icon name="arrow-right" />
        </view>
      </view>
    </view>
  </view>
  <personalPopup
    v-model:show="show"
    :title="title"
    :field="field"
    @submit="submit"
  />
</template>

<script setup lang="ts">
import { useStudentStore } from "@/stores/modules/studentStore";
import { register } from "@/api/login";
import { zconfirm, toast } from "@/utils/util";
import { baseUrl } from "@/utils/request";
import personalPopup from "./components/personalPopup.vue";

const globalStore = useStudentStore();

const show = ref(false);
const field = ref();
const title = ref();

const toPersonalData = () => {
  uni.navigateTo({
    url: "/pages/my/personalData",
  });
};

const showPersonal = (fieldStr: string, titleStr: String) => {
  field.value = fieldStr;
  title.value = titleStr;
  show.value = true;
};

const updateImage = () => {
  uni.chooseImage({
    count: 1,
    success(res: any) {
      uni.uploadFile({
        url:
          baseUrl +
          "/LQKJ.K3.PeiXunSystem.WebApi.WebApiEditService.UserImage,LQKJ.K3.PeiXunSystem.WebApi.common.kdsvc",
        filePath: res.tempFilePaths[0],
        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 },
            });
          }
        },
      });
    },
  });
};

const submit = async () => {
  const state = {
    type: 0,
    parmeters: {
      NeedUpDateFields: [
        "FName",
        "FSex",
        "FMobile",
        "FDuties",
        "FRemark",
        "FOPENID",
        "FWorkUnit",
      ],
      IsDeleteEntry: "false",
      Model: {
        FName: globalStore.infoData.FNAME, //姓名
        FSex: globalStore.infoData.FSEX, //性别0男1女
        FMobile: globalStore.infoData.FMOBILE, //手机
        FDuties: globalStore.infoData.FDUTIES, //职务
        FOPENID: globalStore.openId, //openid
        FWorkUnit: globalStore.infoData.FWORKUNIT1, //工作单位
        FRemark: "", //备注
        FSTUDENTID: globalStore.infoData.FSTUDENTID,
      },
    },
  };
  const { data: res }: any = await register(state);
  if (res.code == 200) {
    globalStore.setInfoData(res.data[0]);
    toast("保存成功");
  }
};

const logout = () => {
  zconfirm("是否退出登录?", (result: boolean) => {
    if (result) {
      globalStore.setInfoData({});
      uni.reLaunch({
        url: "/pages/home/index",
      });
    }
  });
};
</script>

<style lang="scss" scoped>
page {
  background: rgba(255, 255, 255, 0.9);
}

.my-container {
  box-sizing: border-box;
  position: absolute;
  top: 63%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .my-info {
    display: flex;
    flex-direction: column;
    color: #ffffff;
    margin-bottom: 36rpx;
    padding: 0 64rpx;
    .name {
      color: #ffffff;
      font-size: 34rpx;
      font-weight: 500;
      margin-top: 24rpx;
    }

    .info {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      font-weight: 400;
      margin-top: 16rpx;
    }
  }

  .my-list {
    padding: 48rpx 0 100rpx;
    background: #fdfdfd;
    // background: linear-gradient(
    //   to bottom,
    //   rgba(255, 255, 255, 0.5) 20%,
    //   #fdfdfd 80%
    // );
    border-radius: 48rpx 48rpx 0rpx 0rpx;
    width: 100%;
    .my-item {
      padding: 0 64rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
    }

    .my-item:active {
      background-color: #f5f7fa;
    }
    .logout {
      padding: 0 64rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 112rpx;
    }
    .logout:active {
      background-color: #f5f7fa;
    }
  }
}
</style>
