<script lang="ts" setup>
import { useUserStore } from '@/store';
import { storeToRefs } from 'pinia';
import MxUpload from "@/pages-sub/components/upload/index.vue"
import MxRadio from "@/pages-sub/components/radio/index.vue"
import { getAreaList, getGradeList, saveUserInfo } from '@/service';

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
definePage({
  style: {
    navigationBarTitleText: '个人信息',
    navigationBarBackgroundColor: "#fff"
  },
  excludeLoginPath: true,
})


const genderClassification = [{ label: '男', value: "1" }, { label: '女', value: "2" }]
const gradeClassification = ref([])
const areaList = ref([])

const handleChange = (value: any[]) => {
  userInfo.value.avatar = value[0].url
}

const handleSave = () => {
  let params = {
    Avatar: userInfo.value.avatar,
    nickName: userInfo.value.nickName,
    gradeId: userInfo.value.userExtend.gradeId,
    gradeName: userInfo.value.userExtend.gradeName,
    areaName: userInfo.value.userExtend.area,
    schoolName: userInfo.value.userExtend.schoolName,
    sex: userInfo.value.sex
  }
  saveUserInfo({ data: params }).then((resp) => {
    if (resp.code === 200) {
      uni.showToast({
        title: '保存成功',
        icon: 'success',
        mask: true
      })
    }
  })
}

const navigateToSchool = () => {
  uni.navigateTo({ url: `/pages-sub/wishlist/school?region=${userInfo.value.userExtend.area}` })
}

const activeType = ref("")
const visible = ref(false)
const formData = ref({
  genderLabel: genderClassification.filter(item => item.value == userInfo.value.sex)[0]?.label,
})

const onOverlayClick = () => {
  visible.value = false
}

const handleOpenPopup = (type: string) => {
  visible.value = true
  activeType.value = type
}

const getTitle = (type: string) => {
  const title = { "gender": '请选择性别', "grade": '请选择年级', "examinationArea": '请选择中考所在地', }
  return title[type];
}


onShow(() => {
  getGradeList().then(resp => {
    if (resp.code === 200) {
      gradeClassification.value = resp.result
    }
  })

  getAreaList().then(resp => {
    if (resp.code === 200) {
      areaList.value = resp.result
    }
  })

})
</script>

<template>
  <view class="flex flex-col bg-[#f8f8f8] h-screen">
    <view class="mx-[32rpx] bg-[#fff] rounded-[20rpx] mt-[32rpx] text-[28rpx] text-[#303030] font-bold">
      <view class="flex items-center justify-between mr-[16rpx] ml-[32rpx] py-[28rpx] not-last-child">
        <text class="text-[30rpx] text-[#404142] font-400">头像</text>
        <MxUpload :custom-upload="true" :hiddenPreview="true" @change="handleChange" :signal="true"
          :outer-file-list="[{ url: `${userInfo.avatar}` }]">
          <template #default="{ fileList }">
            <view class="flex items-center gap-[16rpx]">
              <view class="w-[96rpx] h-[96rpx] rounded-full">
                <image :src="fileList[0].url" mode="scaleToFill" class="w-[96rpx] h-[96rpx] rounded-full" />
              </view>
              <view class="i-carbon-chevron-down rotate-270 text-[#BFBFBF]"></view>
            </view>
          </template>
        </MxUpload>
      </view>
      <view class="flex items-center justify-between mx-[32rpx] py-[28rpx] not-last-child">
        <text class="text-[30rpx] text-[#404142] font-400">学生姓名</text>
        <view class="flex items-center">
          <input type="text" v-model="userInfo.nickName" class="text-right">
        </view>
      </view>

      <view class="flex items-center justify-between mx-[32rpx] py-[28rpx] not-last-child">
        <text class="text-[30rpx] text-[#404142] font-400">性别</text>
        <view class="flex items-center" @click="handleOpenPopup('gender')">
          <text>{{ formData.genderLabel }}</text>
          <view class="i-carbon-chevron-down rotate-270 text-[#BFBFBF]"></view>
        </view>
      </view>

      <view class="flex items-center justify-between mx-[32rpx] py-[28rpx]">
        <text class="text-[30rpx] text-[#404142] font-400">年级</text>
        <view class="flex items-center" @click="handleOpenPopup('grade')">
          <text>{{ userInfo.userExtend.gradeName }}</text>
          <view class="i-carbon-chevron-down rotate-270 text-[#BFBFBF]"></view>
        </view>
      </view>

      <view class="flex items-center justify-between mx-[32rpx] py-[28rpx]">
        <text class="text-[30rpx] text-[#404142] font-400">就读学校</text>
        <view class="flex items-center" @click="navigateToSchool">
          <text>{{ userInfo.userExtend.schoolName }}</text>
          <view class="i-carbon-chevron-down rotate-270 text-[#BFBFBF]"></view>
        </view>
      </view>

      <view class="flex items-center justify-between mx-[32rpx] py-[28rpx]">
        <text class="text-[30rpx] text-[#404142] font-400">中考所在区</text>
        <view class="flex items-center" @click="handleOpenPopup('area')">
          <text>{{ userInfo.userExtend.area }}</text>
          <view class="i-carbon-chevron-down rotate-270 text-[#BFBFBF]"></view>
        </view>
      </view>
    </view>

    <view class="text-white text-[32rpx] text-center mx-[96rpx] bg-[#1580FF] rounded-full py-[22rpx] mt-[80rpx]"
      @click="handleSave">保存
    </view>

    <sar-popup :visible="visible" effect="slide-bottom" @overlay-click="onOverlayClick">
      <view class="bg-white rounded-[24rpx_24rpx_0_0] px-[30rpx] pb-safe pt-[30rpx] min-h-[492rpx]">
        <view class="text-[34rpx] font-500 flex items-center justify-between mb-[30rpx]">
          <view>{{ getTitle(activeType) }}</view>
          <view class="w-[36rpx] h-[36rpx] flex items-center" @click="onOverlayClick">
            <image src="https://lwzk.ycymedu.com/img/tianbao/tb_guanbi.png" mode="scaleToFill"
              class="w-[36rpx] h-[36rpx]" />
          </view>
        </view>
        <MxRadio v-model:value="userInfo.sex" v-model:label="formData.genderLabel" v-if="activeType == 'gender'"
          :options="genderClassification" label-key="label" value-key="value"
          custom-root-cols-class="grid grid-cols-2 items-center gap-[16rpx]"
          custom-root-class="px-[30rpx] pt-[22rpx] pb-[20rpx]" custom-item-class="py-[12rpx] text-center "
          active-item-class="bg-[#e7f2ff] text-[#1580FF] border-none" />

        <MxRadio v-model:value="userInfo.userExtend.gradeId" v-model:label="userInfo.userExtend.gradeName"
          v-if="activeType == 'grade'" :options="gradeClassification" label-key="label" value-key="value"
          custom-root-cols-class="grid grid-cols-3 items-center gap-[16rpx]"
          custom-root-class="px-[30rpx] pt-[22rpx] pb-[20rpx]" custom-item-class="py-[12rpx] text-center "
          active-item-class="bg-[#e7f2ff] text-[#1580FF] border-none" />

        <MxRadio v-model:value="userInfo.userExtend.area" v-if="activeType == 'area'" :options="areaList"
          label-key="label" value-key="value" custom-root-cols-class="grid grid-cols-3 items-center gap-[16rpx]"
          custom-root-class="px-[30rpx] pt-[22rpx] pb-[20rpx]" custom-item-class="py-[12rpx] text-center "
          active-item-class="bg-[#e7f2ff] text-[#1580FF] border-none" />

      </view>
    </sar-popup>
  </view>
</template>

<style lang="scss" scoped>
.not-last-child {
  border-bottom: 2rpx solid #f8f8f8;
}
</style>