<template>
  <div class="video-detail-page">
    <div @click="getUserInfo" class="detail-header">
      <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"></video-detail>
    </div>

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

<script setup>
import { mainStore } from '@/store'
import { storeToRefs } from 'pinia'
import icon_avatar from '@images/que-touxiang@2x.png'

import VideoDetail from '@/components/VideoDetail/index.vue'
import { ref, reactive, onMounted, watch } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import axios from '@/utils/axios';
import $ from 'jquery'
import { Toast } from 'vant';
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 = ({ title }) => {
  // console.warn(title);
};
// 监听路由变化
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(() => {
  // 检查$route.path判断tab默认值
  if ($route.path === '/client/videoDetail') {
     active.value = 0;
  } else {
     active.value = 1;
  }
  /**
   * 获取视频详情
   */
  axios.get('/srv/?a=prod_info', {
    params: {
      prod_id: $route.query.prod_id
    }
  })
  .then(res => {
    if (res.data.code === 1) {
      videoInfo.value = res.data.data;
      // 动态调整留言数量
      store.changeCommentNum(res.data.data.comment_num);
    } else {
      console.warn(res);
      if (!res.data.show) return false;
      Toast({
        icon: 'close',
        message: res.data.msg
      });
    }
  })
  .catch(err => {
    console.error(err); 
  });
})

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

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

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  data() {
    return {

    }
  },
  mounted() {
  },
  methods: {

  }
}
</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;
    }
  }
}
</style>