<template>
  <div class="page">
    <!-- <Nav title="投顾主页">
      <div class="right-icon" @click="shareFn" v-if="!$shieldConfig.share">
        <img src="@/assets/images/share-icon1.png" />
      </div>
    </Nav> -->
    <div class="tg-info">
      <img class="avatar" :src="detail.avatar" />
      <div class="user-info">
        <div class="name">
          <h4>{{ detail.showName }}</h4>
          <p>执业编号：{{ detail.license }}</p>
        </div>
        <ul class="tag">
          <li v-for="(item, index) in detail.tagList || []" :key="index">
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
    <div class="intro">
      <p :class="[!openActive ? 'ellipsis' : '']">简介:{{ detail.profile }}</p>
      <button
        @click="openProfile"
        :class="[openActive ? 'rotate180' : '']"
      ></button>
    </div>
    <div class="not-play" v-if="notPlayObj && notPlayObj.videoId">
      <div class="video-info">
        <h3>{{ notPlayObj.title }}</h3>
        <p>{{ notPlayObj.startTime }}直播</p>
      </div>
      <button
        @click="setSubLiveVideo"
        :disabled="disableSub || notPlayObj.isSubscribe !== 2"
      >
        {{ notPlayObj.isSubscribe === 1 ? "已预约" : "预约" }}
      </button>
    </div>
    <div class="van-list">
      <van-tabs v-model:active="active" shrink line-width="0.4rem">
        <van-tab
          title-class="tab"
          v-for="(item, index) in tabList"
          :key="index"
          :name="item.productType"
          :title="item.showName"
        >
          <LivePlayList v-if="active === 3" :id="route.query.id" />
          <ShotVideoList v-else-if="active === 35" :id="route.query.id" />
          <CircleList v-else-if="active === 41" :id="route.query.id" />
          <Empty text="暂无内容" v-else />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { useRoute } from "vue-router"
// import Nav from "@/components/NavBar.vue";
import LivePlayList from "./components/LivePlayList.vue"
// import ServerPackList from "./components/ServerPackList";
import ShotVideoList from "./components/ShotVideoList.vue"
import { queryTgInfo, queryTgTab } from "@/api/tg"
import { queryNotPlay, subLiveVideo } from "@/api/video"
// import { attentionTg } from "@/api/index";
import { showToast } from "vant"
// import useShieldConfig from "@/hooks/useShieldConfig";
import Empty from "@/components/Empty.vue"
import CircleList from "./components/CircleList.vue"

// const $shieldConfig = useShieldConfig();

const route = useRoute()
const active = ref(0)

const tabList = ref([])

const detail = ref({})
const getTgInfo = async () => {
  let ret = await queryTgInfo({ id: route.query.id })
  if (ret.code === 0) {
    detail.value = ret.data || {}
  }
}
getTgInfo()

const getTgTab = async () => {
  let ret = await queryTgTab({ id: route.query.id })
  if (ret.code === 0) {
    tabList.value = ret.data
  }
}

getTgTab()

// 关注投顾
// async function subAdvisor() {
//   let ret = await attentionTg({
//     advisorId: detail.value.id,
//     channel: 2,
//     option: detail.value.isFollow === 1 ? 2 : 1,
//   });
//   if (ret.code === 0) {
//     detail.value.isFollow = detail.value.isFollow === 1 ? 2 : 1;
//   }
// }

// const shareFn = () => {
//   showToast("Demo版本暂不支持");
// };

const openActive = ref(false)
const openProfile = () => {
  openActive.value = !openActive.value
}

const notPlayObj = ref({})
const getNotPlay = async () => {
  let ret = await queryNotPlay({ advisorId: route.query.id })
  if (ret && ret.code === 0) {
    notPlayObj.value = ret.data
  }
}
getNotPlay()

const disableSub = ref(false)
const setSubLiveVideo = async () => {
  if (disableSub.value) return
  disableSub.value = true
  let ret = await subLiveVideo({
    id: notPlayObj.value.videoId,
    option: notPlayObj.value.isSubscribe === 1 ? 2 : 1,
    saleUserId: route.query.saleUserId,
  }).catch(() => {
    disableSub.value = false
  })
  disableSub.value = false
  if (ret.code === 0) {
    showToast(notPlayObj.value.isSubscribe === 1 ? "已取消预约" : "预约成功！")
    notPlayObj.value.isSubscribe = notPlayObj.value.isSubscribe === 1 ? 2 : 1
  }
}
</script>
<style scoped lang="scss">
.page {
  height: 100%;
  background: #fff;
}
.right-icon {
  img {
    width: 48px;
    height: 48px;
  }
}
.tg-info {
  display: flex;
  background-image: linear-gradient(#fc632f, #fea203, #fff);
  background-size: cover;
  text-align: left;
  padding: 32px 32px 0;
  height: 320px;
  .avatar {
    display: block;
    width: 144px;
    height: 144px;
    border-radius: 50%;
    margin-right: 24px;
  }
  .user-info {
    .name {
      display: flex;
      align-items: center;
      margin-bottom: 24px;
      h4 {
        font-size: 40px;
        color: #fff;
        margin-right: 16px;
      }
      p {
        font-size: 24px;
        color: #fff;
      }
    }
    .tag {
      display: flex;
      align-items: center;
      li {
        padding: 8px 12px;
        border-radius: 4px;
        border: 1px solid #fff;
        font-size: 20px;
        margin-right: 16px;
        color: #fff;
      }
    }
  }
}
.intro {
  position: relative;
  z-index: 1;
  padding: 24px;
  margin: -140px 32px 0;
  background: #fff;
  border-radius: 20px;
  p {
    color: #666666;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 44px;
    text-align: left;
    margin-bottom: 20px;
    &.ellipsis {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3; /* 显示的行数，可以根据需要修改 */
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  button {
    width: 48px;
    height: 24px;
    display: block;
    margin: 0 auto;
    background: url(../../assets/images/open.png) no-repeat center;
    background-size: cover;
  }
  button.rotate180 {
    transform: rotate(180deg);
  }
}
.van-list {
  ::v-deep(.van-tabs__wrap),
  ::v-deep(.van-tabs__content) {
    padding: 0 32px;
    background: #fff;
  }
  ::v-deep(.van-tabs__wrap) {
    margin-bottom: 10px;
  }
  ::v-deep(.van-tabs__content) {
    background: #fff;
    padding-top: 20px;
  }
}
::v-deep .van-tabs__wrap {
  margin-bottom: 20px;
  // border-bottom: 0.5px solid rgba(235, 236, 237, 1);
  padding-bottom: 8px;
  .van-tabs__nav {
    padding-left: 0;
    padding-right: 0;
    background: none;
  }
  .tab {
    padding: 0 !important;
    margin-right: 48px;
  }
}
::v-deep .van-tabs__line {
  background: #f02e18;
}

.not-play {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: url(../../assets/images/not-play-bg.png) no-repeat center;
  background-size: cover;
  height: 120px;
  margin: 24px 32px;
  padding: 24px;
  box-sizing: border-box;
  border-radius: 16px;
  overflow: hidden;
  .video-info {
    flex: 1;
    text-align: left;
    width: 0;
  }
  h3 {
    font-size: 32px;
    color: #fff;
    margin-bottom: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }
  p {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.8);
  }
  button {
    background: #fff;
    height: 56px;
    font-size: 24px;
    color: #000;
    width: 142px;
    border-radius: 28px;
  }
}
</style>
