<template>
  <div class="video-detail-page">
    <div class="detail-header" @click="getUserInfo">
      <van-row>
        <van-col span="4">
          <van-image v-if="videoInfo.avatar" round width="3rem" height="3rem" :src="videoInfo.avatar" />
          <van-image v-else round width="3rem" height="3rem" :src="icon_avatar" />
        </van-col>
        <van-col style="line-height: 3rem;">
          <div class="name-info">{{ videoInfo.name }}</div>
        </van-col>
      </van-row>
      <div class="other-info">{{ videoInfo.kg_name }} ｜ {{ videoInfo.localism_type }}</div>
    </div>

    <div class="video-player">
      <video-detail :item="videoInfo" @on-click="onVideoDetail" />
    </div>

    <div class="video-main">
      <van-row>
        <van-col span="24" style="padding-top: 0.2rem;">
          <van-tabs v-model:active="active" sticky :color="styleColor.baseColor" background="#F7F7F7"
            title-active-color="#222222" title-inactive-color="#777777" @click-tab="onClickTab">
            <van-tab title="简介" :title-style="tabClass">
              <div class="intro">{{ videoInfo.note }}</div>
              <div style="height: 5rem;" />
              <donate-bar donate-type="C">为TA助力</donate-bar>
            </van-tab>
            <!-- <van-tab :title="'留言 ' + comment_num" :title-style="tabClass"
              :to="'/client/videoDetail/comment?prod_id=' + $route.query.prod_id + '&book_id=' + $route.query.book_id + '&type=' + $route.query.type">
              <router-view />
            </van-tab> -->
            <van-tab :title="'留言 ' + comment_num" :title-style="tabClass">
              <router-view />
            </van-tab>
          </van-tabs>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { storeToRefs, mainStore } from '@/utils/generatePackage'
import { VideoDetail, DonateBar } from '@/utils/generateModules'
import { icon_avatar } from '@/utils/generateIcons'
import { styleColor } from '@/constant.js';
import { prodInfoAPI } from '@/api/C/prod.js'
import { sharePage } from '@/composables/useShare.js'

// TAG：微信分享
sharePage({});

const $route = useRoute();
const $router = useRouter();

const getUserInfo = () => {
  // 从个人头像进入的，不能再往下级进入
  if ($route.query.type !== 'read-only') {
    $router.push({
      path: '/client/personIndex',
      query: {
        perf_id: videoInfo.value.perf_id
      }
    })
  }
}

const active = ref(0); // index 0 为简介，1 为留言
const onClickTab = ({ name }) => {
  // 适配read-only情况
  if (name) {
    $router.push({
      path: '/client/videoDetail/comment',
      query: {
        prod_id: $route.query.prod_id,
        book_id: $route.query.book_id,
        type: $route.query.type,
      }
    })
  }
  
};
// 监听路由变化
watch(() => $route.path, (v) => {
  if (v === '/client/videoDetail') { // 返回详情主页面的时候激活第一个选中项
    active.value = 0;
  }
})

const tabClass = {
  fontSize: '1rem'
}

// 处理主路由的留言数量问题
const store = mainStore();
const { comment_num } = storeToRefs(store);

const videoInfo = ref('');
onMounted(async () => {
  // 检查$route.path判断tab默认值
  $route.path === '/client/videoDetail' ? active.value = 0 : active.value = 1;
  /**
   * 获取视频详情
   */
  const { data } = await prodInfoAPI({ prod_id: $route.query.prod_id });
  videoInfo.value = data;
  // 动态调整留言数量
  store.changeCommentNum(data.comment_num);
})

const onVideoDetail = (v) => {
  // 缓存作品信息，给其他页使用
  store.changeVideoDetail(v);
}

onBeforeRouteLeave(async () => {
  // 缓存作品信息，给其他页使用
  const { data } = await prodInfoAPI({ prod_id: $route.query.prod_id });
  videoInfo.value = data;
  store.changeVideoDetail(videoInfo.value);
})

// 删除个人首页的keep-alive缓存
if (!$route.query.type) { // read-only 页不能删除
  store.removeThisPage('personIndex');
  store.changeScrollTopPerson(0); // 清空个人首页记录位置
}
</script>

<style lang="less" scoped>
.video-detail-page {
  background-color: #FFFFFF;

  .detail-header {
    padding: 1rem;

    .name-info {
      color: #222222;
      font-size: 1.15rem;
    }

    .other-info {
      color: #999999;
    }
  }

  .video-player {
    height: auto;
  }

  .video-main {
    height: auto;

    .intro {
      padding: 1rem;
      color: #333333;
      line-height: 1.75;
    }
  }
}
</style>