<template>
  <ie-page bg-color="#F6F8FA" :fix-height="true">
    <ie-navbar title="定向刷题" />
    <view class="p-32 bg-white flex items-center justify-between">
      <view class="">
        <text class="text-32 text-fore-title font-bold">添加定向院校</text>
        <text class="ml-10 text-32 text-fore-title font-bold">({{ directedSchoolList.length }}/3)</text>
      </view>
    </view>
    <view class="px-48 pt-52 pb-20 flex items-center justify-between">
      <view class="text-28 text-fore-title font-bold">当前学习目标</view>
    </view>
    <template v-if="directedSchoolList.length > 0">
      <view class="px-30">
        <directed-school-item :data="currentDirectedSchool" :active="true" @choose="handleChoose"
          @delete="handleDelete" />
      </view>
      <view v-if="directedSchoolList.length > 1" class="px-48 pt-40 pb-30">
        <view class="text-28 text-fore-title font-bold">其他备选目标</view>
        <view class="mt-4 text-24 text-fore-light">切换定向学习院校后将影响为你推荐的学习内容和题目！</view>
      </view>
      <view class="px-30">
        <directed-school-item v-for="(item, index) in otherDirectedSchoolList" :key="index" :data="item"
          :active="false" @choose="handleChoose" @delete="handleDelete" />
      </view>
    </template>
    <view v-if="sortList.length === 0" class="flex-1 flex flex-col items-center justify-center gap-y-50">
      <ie-image src="/pagesStudy/static/image/icon-empty.png" custom-class="w-364 h-252 mx-auto" mode="aspectFill" />
      <text class="text-30 text-fore-light text-center">目前暂无定向院校～</text>
    </view>

    <ie-safe-toolbar v-if="directedSchoolList.length < 3" :height="84" :shadow="false">
      <view class="px-46 pt-24">
        <ie-button type="primary" @click="handleAdd">添加</ie-button>
      </view>
    </ie-safe-toolbar>
  </ie-page>
</template>

<script lang="ts" setup>
import DirectedSchoolItem from './components/directed-school-item.vue';
import { useTransferPage } from '@/hooks/useTransferPage';
import { DirectedSchool } from '@/types/study';
import { useUserStore } from '@/store/userStore';

const userStore = useUserStore();
const { transferTo } = useTransferPage();
const loading = ref(true);
const sortList = ref<DirectedSchool[]>([]);
const { directedSchoolList } = toRefs(userStore);
const currentDirectedSchool = computed(() => directedSchoolList.value[0]);
const otherDirectedSchoolList = computed(() => directedSchoolList.value.slice(1));

const handleAdd = () => {
  transferTo('/pagesStudy/pages/targeted-add/targeted-add', {
    data: {}
  });
}
const handleChoose = (data: DirectedSchool) => {
  const otherList = directedSchoolList.value.filter(item => item.code !== data.code);
  const list = [data, ...otherList];
  save(list);
}
const handleDelete = (data: DirectedSchool) => {
  uni.$ie.showModal({
    title: '提示',
    content: '如删除该定向记录，关联的数据有变化，是否继续？',
    showCancel: true,
    confirmText: '确定',
    cancelText: '取消'
  }).then((confirm: boolean) => {
    if (confirm) {
      const list = [...directedSchoolList.value];
      list.splice(list.indexOf(data), 1);
      save(list);
    }
  });
}
const save = async (list: DirectedSchool[]) => {
  uni.$ie.showLoading();
  await userStore.saveDirectedSchoolList(list);
  await refresh();
  uni.$ie.hideLoading();
  uni.$ie.showSuccess('设置成功');
  loading.value = false;
}
const refresh = async () => {
  sortList.value = [...directedSchoolList.value];
}
onShow(() => {
  nextTick(() => {
    refresh();
  });
});
</script>

<style lang="scss" scoped></style>
