<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: 'AI智能填报',
  },
  needLogin: true,
}
</route>
<template>
  <view class="bg-[#FAFAFA] h-screen flex flex-col">
    <view class="text-[#000] text-[24rpx] p-[32rpx]">
      {{ userInfo.estimatedAchievement.expectedScore }}分 &nbsp;&nbsp;{{
        userInfo.estimatedAchievement.subjectGroup.split(',').join('/')
      }}
    </view>
    <view class="mx-[32rpx] h-[426rpx] bg-[#fff] rounded-[16rpx]">
      <l-echart ref="echart"></l-echart>
    </view>
    <view class="mt-[32rpx] mx-[32rpx] bg-[#fff] rounded-[16rpx] p-[32rpx]">
      <text class="text-[#000] text-[24rpx]">
        {{ pieChartData.reduce((total, cur) => total + cur.value, 0) }}所适合我的大学
      </text>
      <view class="pl-[30rpx] mt-[22rpx] grid grid-cols-3 gap-x-[150rpx] gap-y-[30rpx]">
        <view
          class="flex flex-col items-center gap-[8rpx]"
          v-for="item in universities"
          :key="item.name"
        >
          <text class="text-[56rpx] text-[#1F2329] font-semibold">{{ item.count }}</text>
          <text class="text-[24rpx] text-[#B6B6B6]">{{ item.name }}</text>
        </view>
      </view>
    </view>
    <view class="mt-[32rpx] mx-[32rpx] bg-[#FEF0F0] rounded-[16rpx] p-[32rpx]">
      <view
        class="text-[#F56C6C] text-[28rpx] flex items-center gap-[8rpx] mb-[16rpx] font-semibold"
      >
        <view class="i-carbon-volume-down text-[32rpx]"></view>
        说明
      </view>
      <view class="text-[22rpx] text-[#F56C6C] flex flex-col leading-[1.5]">
        <text>
          1.
          本平台基于历史分数及等效位次进行志愿推荐和风险评估，由于志愿填报本身存在不确定性，请谨慎参考。
        </text>
        <text>
          2.在正式填报时，院校/专业名称及代码请务必与官方信息平台核对，若发现差异则以官方数据为准，本平台数据仅供参考。
        </text>
      </view>
    </view>

    <view class="mt-auto bg-[#fff] p-[32rpx] box-shadow px-[32rpx] pt-[32rpx] pb-safe">
      <view
        class="text-[#fff] text-[32rpx] rounded-[8rpx] bg-[#1580FF] text-center h-[80rpx] flex items-center justify-center"
        @click="navigatorTo"
      >
        智能选校
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/user'
import { aiPreview } from '@/service/index/api'

import lEchart from '@/pages-evaluation-sub/uni_modules/lime-echart/components/l-echart/l-echart.vue'
import { renderEchart } from './echartRender'
const echarts = require('../uni_modules/lime-echart/static/echarts.min')

const userStore = useUserStore()

const userInfo = computed(() => userStore.userInfo)

const echart = ref<any>(null)

const pieChartData = ref<any[]>([])
const universities = ref<any[]>([])
onLoad(() => {
  aiPreview({
    location: userInfo.value.estimatedAchievement.provinceCode,
    p: userInfo.value.estimatedAchievement.sp,
    score: userInfo.value.estimatedAchievement.expectedScore,
    subjects: userInfo.value.estimatedAchievement.subjectGroup.split(','),
  }).then((res) => {
    let _result = res.result as {
      pieChats: { name: string; value: number }[]
      universities: { name: string; count: number }[]
    }
    pieChartData.value = _result.pieChats
    universities.value = _result.universities
    renderEchart({ echart, echarts, pieChartData })
  })
})

const navigatorTo = () => {
  uni.navigateTo({
    url: '/pages-sub/home/wishesList/index?typeName=智能填报&editType=add',
  })
}

onBeforeMount(() => {
  if (echart.value) {
    echart.value.dispose()
  }
})

onShow(() => {
  userStore.clearWishListId()
  userStore.clearWishList()
})
</script>

<style lang="scss" scoped>
.box-shadow {
  box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(225, 225, 225, 0.2);
}
</style>
