<template>
  <div class="course-detail" v-if="![5, 6].includes(course.status)">
    <Nav :title="course.name" v-if="!$shieldConfig.nav">
      <div class="right-icon" @click="shareFn">
        <img src="@/assets/images/share-icon1.png" />
      </div>
    </Nav>
    <Container auth :authority-id="null" :mask="mask">
      <div>
        <div class="cover">
          <van-image :src="course.coverImage" alt="" fit="contain" />
        </div>
      </div>

      <div class="container">
        <van-tabs v-model:active="active" shrink line-width="0.4rem">
          <van-tab title="课程介绍">
            <AuthContainer
              :no-auth="true"
              :auth="auth"
              :authority-id="null"
              @submit="submit"
            >
              <div class="course-info" v-html="course.remark"></div>
              <div class="detail" v-html="course.detail"></div>
            </AuthContainer>
          </van-tab>
          <van-tab title="课程目录">
            <AuthContainer :auth="auth" :authority-id="null" @submit="submit">
              <div class="sub-container">
                <div class="sub-header">
                  <span
                    class="sub-tab"
                    :class="{ active: active2 === 0 }"
                    @click="active2 = 0"
                    >合集</span
                  >
                  <span
                    class="sub-tab"
                    :class="{ active: active2 === 1 }"
                    @click="active2 = 1"
                    >直播课</span
                  >
                </div>
                <div>
                  <div class="course-list" v-show="active2 === 0">
                    <van-list
                      v-model:loading="loading"
                      v-model:error="loadError.error0"
                      error-text="加载错误，请点击重新加载"
                      finished
                    >
                      <serial-item
                        v-for="(item, index) in serialList"
                        :key="index"
                        :item="item"
                      ></serial-item>
                      <empty text="暂无内容" v-if="!serialList.length" />
                    </van-list>
                  </div>
                  <div class="video-list" v-show="active2 === 1">
                    <van-list
                      v-model:loading="loading"
                      v-model:error="loadError.error1"
                      error-text="加载错误，请点击重新加载"
                      finished
                    >
                      <video-item
                        v-for="(item, index) in videoList"
                        :key="index"
                        :item="item"
                      ></video-item>
                      <empty text="暂无内容" v-if="!videoList.length" />
                    </van-list>
                  </div>
                </div>
              </div>
            </AuthContainer>
          </van-tab>
        </van-tabs>
      </div>
    </Container>
    <Share ref="shareRef" :detail="{ resizeUrl }" />
  </div>
  <NoLookTip v-else text="该课程已下架" />
</template>

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

import Nav from "@/components/NavBar.vue";
import Container from "@/components/Container.vue";
import Empty from "@/components/Empty.vue";
// import VideoItem from "@/components/VideoItem.vue";
// import Empty from "@/components/Empty.vue";
import { queryCourseDetail, queryCourseContentDetail } from "@/api/course";
import SerialItem from "./components/SerialItem.vue";
import VideoItem from "./components/VideoItem.vue";
import Share from "@/components/Share";
import AuthContainer from "@/components/AuthContainer.vue";
import useShieldConfig from "@/hooks/useShieldConfig";
import NoLookTip from "@/components/NoLookTip.vue";

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

const course = ref({});
const serialList = ref([]);
const videoList = ref([]);
const loading = ref(false);
const loadError = reactive({
  error0: false,
  error1: false,
});
const mask = ref(false);
const auth = ref(false);

const active = ref(0);
const active2 = ref(0);

const shareRef = ref();
const resizeUrl = location.href;

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

const submit = () => {
  if (course.value.paymentUrl) {
    // 支付页
    window.open(course.value.paymentUrl);
  } else if (course.value.page) {
    // 落地页
    router.push({ path: "/page", query: { id: route.query.id } });
  } else {
    router.push({ path: route.path, query: { ...route.query, mask: true } });
  }
};

const getCourseListFn = async () => {
  try {
    const listRet = await queryCourseContentDetail({ id: route.query.id });
    if (listRet.code !== 0) loadError[`error${active2.value}`] = true;
    const list = listRet.data || [];

    serialList.value = list
      .filter((item) => item.serial)
      .map((item) => ({ ...item.serial, list: item.serialContentList }));
    videoList.value = list
      .filter((item) => item.video)
      .map((item) => item.video);
  } catch (e) {
    console.log(e);
  }
};

const getcourseDetailFn = async () => {
  try {
    loading.value = true;
    const ret = await queryCourseDetail({ id: route.query.id });
    course.value = ret.data || {};
    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);
          });
      }
    }

    document.title = course.value.name;
    if (route.query.mask) {
      mask.value = true;
    } else if (auth.value) {
      await getCourseListFn();
    }
  } catch (e) {
    console.log(e);
  } finally {
    console.log(loading);
    loading.value = false;
    console.log(loading);
  }
};
getcourseDetailFn();
</script>
<style scoped lang="scss">
.course-detail {
  .right-icon {
    img {
      width: 48px;
      height: 48px;
    }
  }

  .cover {
    height: 422px;

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

  .w-full {
    width: 100%;
  }

  .container {
    .van-tabs {
      padding: 0 32px;
    }

    ::v-deep .van-tabs__line {
      background: #f02e18;
      bottom: 36px;
    }

    ::v-deep .van-tabs__wrap {
      height: 96px;
      margin-bottom: 24px;
      border-bottom: 1px solid rgba(235, 236, 237, 1);

      .van-tabs__nav {
        padding-left: 0;
        padding-right: 0;
      }

      .tab {
        padding: 0 !important;
        margin-right: 48px;
      }
    }

    .course-info {
      text-align: justify;
      color: rgba(51, 51, 51, 1);
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 28px;
      line-height: 44px;
      margin-bottom: 30px;
    }
    .detail {
      font-size: 24px;
      line-height: 44px;
      text-align: left;
      padding-bottom: 150px;
      ::v-deep img {
        max-width: 100%;
      }
    }

    .sub-container {
      .sub-header {
        display: flex;
      }

      .active.sub-tab {
        border: 1px solid rgba(240, 46, 24, 0.2);
        background: linear-gradient(
            rgba(240, 46, 24, 0.04),
            rgba(240, 46, 24, 0.04)
          ),
          rgba(255, 255, 255, 1);
        color: rgba(240, 46, 24, 1);
      }

      .sub-tab {
        width: 120px !important;
        height: 52px !important;
        border-radius: 12px;
        box-sizing: border-box;
        text-align: center;
        color: rgba(102, 102, 102, 1);
        background: rgba(248, 249, 250, 1);
        border: 1px solid rgba(248, 249, 250, 1);

        font-weight: 400;
        font-size: 28px;
        line-height: 52px;
      }

      .sub-tab + .sub-tab {
        margin-left: 24px;
      }
    }

    .course-list,
    .video-list {
      padding-bottom: 24px;
    }
  }
}
</style>
