<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-32 flex items-center justify-between">
      <view class="text-32 text-fore-title font-bold">我的定向院校</view>
    </view>
    <view class="relative">
      <view class="px-30">
        <l-drag ref="dragRef" :list="sortList" :column="1" gridHeight="104px" :touchHandle="touchHandle" ghost handle
          @change="changeSort">
          <!-- // 每一项的插槽 grid 的 content 您传入的数据 -->
          <template #grid="{ active, content, index }">
            <!-- // grid.active 是否为当前拖拽项目 根据自己需要写样式 -->
            <view class="bg-white rounded-10 py-28 pl-30 pr-20 relative flex items-center gap-x-16 mb-20"
              :class="{ 'border border-solid border-primary': active }">
              <view
                class="w-44 text-64 text-primary font-bold absolute top-6 left-14 italic leading-[1] opacity-30 z-1">
                {{ index + 1 }}
              </view>
              <view slot="handle" @touchstart="touchHandle = true" @touchend="touchHandle = false">
                <ie-image src="/pagesStudy/static/image/icon-drag.png" custom-class="w-46 h-46" mode="aspectFill" />
              </view>
              <view class="flex-1 min-w-1 flex items-center gap-x-20">
                <ie-image :src="content.universityLogo" custom-class="w-96 h-96" mode="aspectFill" />
                <view class="flex-1 min-w-1">
                  <view class="text-28 text-fore-title font-bold">{{ content.universityName }}</view>
                  <view class="mt-8 w-fit text-20 text-primary border border-solid border-primary rounded-4 px-10 py-4">
                    {{ content.majorName }}
                  </view>
                  <view class="flex items-center justify-between text-20">
                    <view class="mt-8  text-fore-light">{{ content.majorAncestors }}</view>
                    <view v-if="index === 0"
                      class="flex items-center gap-x-4 text-white bg-gradient-to-r from-[#FED448] to-[#F9942F] rounded-full px-12 py-4">
                      <ie-image src="/pagesStudy/static/image/icon-check-white.png" custom-class="w-24 h-24" />
                      <text>定向学习中</text>
                    </view>
                    <view v-else class="flex items-center gap-x-4 text-22 text-primary px-12 py-4"
                      @click="handleSetDirectedSchool(content, index)">
                      <text>设置定向</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </template>
          <template #ghots></template>
        </l-drag>
      </view>
      <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>
    </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 { 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 touchHandle = ref(false)
const { directedSchoolList } = toRefs(userStore);
const handleSetDirectedSchool = async (item: DirectedSchool, index: number) => {
  // 将该院校设置为第一个
  const list = [...directedSchoolList.value];
  list.splice(index, 1);
  list.unshift(item);
  save(list);
}
const dragRef = ref();
const handleAdd = () => {
  transferTo('/pagesStudy/pages/targeted-add/targeted-add', {
    data: {}
  });
}

const changeSort = (e: any) => {
  const list = e.map((item: any) => item.content);
  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>
