<template>
  <div class="serial-detail" v-if="![5, 6].includes(serial.status)">
    <Nav :title="serial.name" v-if="!$shieldConfig.nav">
      <div class="right-icon" @click="shareFn">
        <img src="@/assets/images/share-icon1.png" />
      </div>
    </Nav>
    <Container :authority-id="null" :auth="auth" :loading="loading">
      <div class="header">
        <div class="cover">
          <van-image :src="serial.coverImage" alt="" fit="contain" />
        </div>
        <div class="intro">合集介绍</div>
        <div class="info">
          <van-text-ellipsis rows="2" :content="serial.remark">
            <template #action="{ expanded }">
              <div class="expand">
                {{ expanded ? "收起" : "展开" }}
              </div>
            </template>
          </van-text-ellipsis>
        </div>
      </div>

      <div class="line"></div>

      <div class="watch-focus">
        <div class="header-title">全部内容</div>
        <van-list
          v-model:loading="loading"
          v-model:error="loadError"
          finished
          error-text="加载错误，请点击重新加载"
        >
          <div class="list" v-if="list.length">
            <VideoItem
              v-for="(item, index) in list"
              :key="index"
              :item="item"
            />
          </div>
          <Empty v-else text="精彩直播正在路上..." />
        </van-list>
      </div>
    </Container>

    <Share ref="shareRef" :detail="{ resizeUrl }" />
  </div>
  <NoLookTip v-else text="该合集已下架" />
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { showDialog } from "vant";

import Nav from "@/components/NavBar.vue";
import VideoItem from "@/components/VideoItem2.vue";
import Empty from "@/components/Empty.vue";
import Share from "@/components/Share";

import { querySerialDetail, querySerialContentDetail } from "@/api/serial";
import Container from "@/components/Container.vue";
import useShieldConfig from "@/hooks/useShieldConfig";
import NoLookTip from "@/components/NoLookTip.vue";

const serial = ref({});
const list = ref([]);
const loading = ref(false);
const loadError = ref(false);
const route = useRoute();
const router = useRouter();
const shareRef = ref();
const resizeUrl = location.href;
const auth = ref(false);
const $shieldConfig = useShieldConfig();

const shareFn = () => {
  if (!shareRef.value) return;
  shareRef.value.showPopup = true;
};

const getSerialDetailFn = async () => {
  try {
    loading.value = true;
    const [ret] = await Promise.all([
      querySerialDetail({ id: route.query.id }),
    ]);
    serial.value = ret.data || {};
    auth.value = serial.value.hasAuthority;
    document.title = serial.value.name;

    const authResultVo = ret.data.authResultVo || { auth: false };

    auth.value = authResultVo.auth;

    if (authResultVo.auth) {
      if (authResultVo.riskUrl) {
        showDialog({
          title: "提示",
          message: `您当前订单尚未完成风险测评，无法查看产品服务内容，请点击完成风险测评`,
          confirmButtonText: "去测评",
        })
          .then(() => {
            location.href =
              authResultVo.riskUrl +
              `&callbackUrl=${encodeURIComponent(location.href)}`;
          })
          .catch(() => {
            router.go(-1);
          });
      } else if (authResultVo.contractUrl) {
        showDialog({
          title: "提示",
          message: `您当前订单尚未完成合同签署，无法查看产品服务内容，请点击完成合同签署`,
          confirmButtonText: "去签署",
        })
          .then(() => {
            location.href =
              authResultVo.contractUrl +
              `&contractCallbackUrl=${encodeURIComponent(location.href)}`;
          })
          .catch(() => {
            router.go(-1);
          });
      }
    }

    if (auth.value) {
      querySerialContentDetail({ id: route.query.id }).then((listRet) => {
        if (listRet.code !== 0) loadError.value = true;
        list.value = (listRet.data || []).map((item) => {
          if (item.type === 2) {
            item.video = item.video ? item.video : {};
            item.video.type = item.type;
            return item.video;
          } else {
            item.shortVideo = item.shortVideo ? item.shortVideo : {};
            item.shortVideo.type = item.type;
            return item.shortVideo;
          }
        });
      });
    }
  } catch (e) {
    console.log(e);
  } finally {
    console.log(loading);
    loading.value = false;
    console.log(loading);
  }
};
getSerialDetailFn();
</script>
<style scoped lang="scss">
.serial-detail {
  .right-icon {
    img {
      width: 48px;
      height: 48px;
    }
  }

  .header {
    .cover {
      height: 422px;

      & > div {
        height: 100%;
        width: 100%;
      }
    }

    .intro {
      padding-left: 32px;
      height: 92px;
      background: linear-gradient(
          90deg,
          rgba(255, 218, 165, 0.4) 0%,
          rgba(255, 218, 165, 0) 60%
        ),
        rgba(255, 255, 255, 1);

      color: rgba(51, 51, 51, 1);
      font-weight: 500;
      font-size: 36px;
      line-height: 92px;
      text-align: left;
    }

    .info {
      font-weight: 400;
      font-size: 28px;
      line-height: 44px;
      margin: 16px 32px;
      padding: 0px;
      background: rgba(255, 255, 255, 1);
      color: rgba(51, 51, 51, 1);
      text-align: left;

      .expand {
        text-align: center;
      }
    }
  }

  .line {
    height: 12px;
    background: rgba(245, 246, 247, 1);
  }

  .watch-focus {
    padding: 32px;
    background: #fff;

    .header-title {
      text-align: left;
      color: rgba(51, 51, 51, 1);
      font-weight: 500;
      font-size: 36px;
      line-height: 36px;
    }
  }
}
</style>
