<template>
  <z-paging ref="paging" v-model="list" @query="handleQuery" @on-refresh="handleRefresh">
    <view v-if="list.length" class="p-30">
      <tree-view :tree-data="list" @leaf-click="handleLeafClick">
        <template #icon="{ deep }">
          <uv-icon v-if="deep == 0" name="arrow-right" />
        </template>
        <template #node="{ node, deep }">
          <view v-if="deep == 0" class="flex-1 fx-col gap-5">
            <text class="text-main font-[PingFang]">{{ node.label }}</text>
          </view>
          <view v-else class="flex-1 fx-row items-center gap-10">
            <uv-icon :name="node.img" width="40" height="40" img-mode="cover" class="rounded-[20px] overflow-hidden" />
            <text class="text-main text-sm font-[PingFang]">{{ node.name }}</text>
          </view>
        </template>
        <template #command="{ node, deep }">
          <uv-button v-if="deep > 0" type="primary" shape="circle" text="播放" icon="play-circle"
            icon-color="(--primary-color)" plain :custom-style="{ height: '32px' }" @click="handleVideoPlay(node)" />
        </template>
      </tree-view>
    </view>
  </z-paging>
</template>

<script setup>
import { ref } from 'vue'
import { OPEN_VIP_POPUP } from '@/types/injectionSymbols';
import TreeView from "@/pagesOther/pages/topic-center/index/components/tree-view.vue";
import { useCacheStore } from "@/hooks/useCacheStore";
import { cacheActions } from "@/hooks/defineCacheActions";
import { empty } from "@/uni_modules/uv-ui-tools/libs/function/test";
import { useTransfer } from "@/hooks/useTransfer";
import mxConst from "@/common/mxConst";
import { useUserStore } from '@/store/userStore';
const userStore = useUserStore();
const openVipPopup = inject(OPEN_VIP_POPUP);
const props = defineProps({
  subject: {
    type: Object,
    default: () => ({})
  }
})
const list = ref([])
const { dispatchCache, removeCache } = useCacheStore()
const { transferTo } = useTransfer()
const paging = ref(null)

const handleQuery = async () => {
  try {
    const { code: subject } = props.subject
    const res = await dispatchCache(cacheActions.getVideoKnowledge, { subject })
    // 默认收起，因为有缓存，防止用户之前打开过多引起渲染缓慢
    res.rows.forEach(k => k.expanded = false)
    // completeByNoMore 非标准返回，后台未分页
    paging.value.completeByNoMore(res.rows, true)
  } catch {
    paging.value.complete(false)
  }
}

const handleRefresh = async () => {
  // 知识点树可以精准清除
  const { code: subject } = props.subject
  removeCache(cacheActions.getVideoKnowledge, { subject })
  // 视频只能全清，但因为缓存结果有挂在知识点上所以，旁边的tab见效没有那么快
  removeCache(cacheActions.getVideoOfKnowledge)
}

const handleLeafClick = async ({ node, deep }) => {
  if (deep === 0) {
    node.expanded = !!!node.expanded // 强制展开
    if (empty(node.children)) {
      if (!node.loading) {
        node.loading = true
        try {
          const payload = { subject: props.subject.code, knowledge: node.code, pageNum: 1, pageSize: 100 }
          const res = await dispatchCache(cacheActions.getVideoOfKnowledge, payload)
          node.children = res.rows
        } catch (e) {
          node.expanded = false // 异常强制关闭
        } finally {
          node.loading = false
        }
      }
    }
  }
}

const handleVideoPlay = async (node) => {
  // 尝试传递更多数据，不使用playVideo，启用usingCache
  // playVideo(node.aliId, node.aliIdType, node.name)
  const isVip = await userStore.checkVip();
  if (isVip) {
    const nodeWithKnowledge = list.value.find(n => n.children?.includes(node))
    transferTo(mxConst.routes.videoPlay, {
      aliId: node.aliId,
      aliIdType: node.aliIdType,
      title: node.name,
      node: nodeWithKnowledge
    }, null, true)
  } else {
    openVipPopup();
  }

}
</script>

<style scoped></style>