<template>
  <div class="h-screen flex flex-col">
    <HeaderTip :score="score" :batch-name="batchName" :subject-group="subjectGroup" :wishList="wishList" />
    <div class="flex-1 h-0 overflow-y-auto">
      <virtual-list v-model="wishList" data-key="sort" lock-axis="x" handle=".handle" chosen-class="choose-item">
        <template v-slot:item="{ record, index }">
          <CollegeItem :college="record" :college-index="index" :score="score" />
        </template>
      </virtual-list>
    </div>
    <div class="h-[16rpx] bg-[#f8f8f8]"></div>
    <div class="grid grid-cols-2 gap-[18rpx] items-center pb-safe px-[32rpx] pt-[32rpx]">
      <button class="flex items-center justify-center text-[#1580FF] text-[32rpx] font-normal rounded-[8rpx] font-normal border border-[#1580FF] h-[80rpx] bg-[#fff]" @click="handleReport">
        <img src="https://api.static.ycymedu.com/images/btn-bottom.png" class="w-[52rpx] h-[52rpx] mr-[8rpx]" alt="report">
        AI解读志愿
      </button>
      <button class="border-none flex-auto bg-[#1580FF] rounded-[8rpx] text-[#fff] text-[32rpx] font-normal h-[80rpx] flex items-center justify-center" @click="handleSave">
        保存
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import HeaderTip from "@/components/sort-college/HeaderTip.vue";
  import { useUserStore } from "@/store/user";
  import VirtualList from "vue-virtual-draglist";
  import CollegeItem from "@/components/sort-college/CollegeItem.vue";

  import api from "@/api/customAxios";

  const userStore = useUserStore();

  const vId = ref(0);
  const score = ref(0);
  const batchName = ref("");
  const subjectGroup = ref("");
  const locationCode = ref("");
  const wishList = ref([]);


  const handleSave = () => {
   
    uni.postMessage({
      data: {
        action: "message",
        message: JSON.stringify(wishList.value),
      },
    });
    uni.reLaunch({ url: '/pages-sub/ucenter/wishList/wishList' })
  };

  const removeCollege = (index:number) => {
    wishList.value.splice(index,1)
  }
  const removeMajor = (index:number,mIndex:number) => {
    (wishList.value[index] as {vItems:any[]}).vItems.splice(mIndex,1)
  }

  provide("sort",{
    removeCollege,
    removeMajor
  })

  
  const getWishList = () => {
    api.get(
      `https://api.v3.ycymedu.com/api/volunTb/get/${locationCode.value}`,
      { id: vId.value },
      (resp: any) => {
        if (resp.code == 200) {
          wishList.value = resp.result.tbDetails;
        }
      },
      (error: any) => {
        console.log(error);
      },
    );
  };

  const handleReport = () => {
    uni.navigateTo({ url: `/aiService-sub/index/index?fileId=${vId.value}&locationCode=${locationCode.value}` })
  }

  onBeforeMount(() => {
    let _mapParams: { [key: string]: any } = {};
    let params = decodeURIComponent(location.search).slice(1, location.search.length).split("&");
    params.forEach((param) => {
      let _param = param.split("=");
      _mapParams[_param[0]] = _param[1];
    });
    vId.value = _mapParams.id;

    userStore.setToken(_mapParams.token);

    score.value = +_mapParams.score;
    batchName.value = _mapParams.batchName;
    subjectGroup.value = _mapParams.subjectGroup;
    locationCode.value = _mapParams.location;

    getWishList();
  });
</script>

<style scoped>
.choose-item :deep(.handle) {
    color:#1580FF;
  }
</style>
