<template>
  <div class="header-wrap">
    <div class="swipe-wrap">
      <van-swipe
        :loop="false"
        :width="(48 / 375) * width"
        :show-indicators="false"
      >
        <van-swipe-item
          v-for="(item, index) in list"
          :key="index"
          @click="toLiveRoom(item.videoId)"
        >
          <div class="phone">
            <img :src="item.avatar" alt="" />
            <i></i>
          </div>
          <h4 class="tg-name">
            {{ item.advisorName }}
          </h4>
        </van-swipe-item>
      </van-swipe>
      <!-- <span class="close" @click="router.go(-1)"></span> -->
    </div>

    <div class="header">
      <!-- <div
        class="tg-info"
        @click="router.push(`/tg?id=${detail.advisorBasic?.id}`)"
      > -->
      <div class="tg-info">
        <img :src="detail.advisorBasic?.avatar" alt="" />
        <div class="info">
          <p>{{ detail.advisorBasic?.showName }}</p>
          <label>{{
            [
              $liveStatusObj.InLive,
              $liveStatusObj.PausePlay,
              ,
              $liveStatusObj.FinishPlay,
            ].includes(props.detail.liveStatus)
              ? `${online}观众`
              : detail.advisorBasic?.deptName
          }}</label>
        </div>
        <button
          class="add"
          @click.stop="subAdvisor"
          v-if="!$shieldConfig.tgLive"
        >
          {{ detail.isSubAdvisor === 1 ? "取消关注" : "关注" }}
        </button>
      </div>
      <!-- <span class="close" @click="router.go(-1)"></span> -->
    </div>
    <!-- <div class="tags">
        <div>红艳艳1号组合 专属服务</div>
        <div>定向开播</div>
        <div class="risk">低风险</div>
      </div> -->
    <div class="intro-wrap">
      <div class="intro">
        <div class="into-content">
          <h4 :class="[openInfo ? 'open' : 'close']">
            {{ detail.title }}
          </h4>
          <p v-if="openInfo">
            {{ detail.viewPoint }}
            <span @click="openInfo = false"
              >收起<img src="@/assets/images/up.png"
            /></span>
          </p>
        </div>

        <span v-if="!openInfo" @click="openInfo = true"
          >简介<van-icon name="arrow"
        /></span>
      </div>
      <!-- <div class="more attention">
        <div class="more-live">
            <img src="@/assets/images/more.png" /><span>更多直播</span>
          </div>
        <div class="your-attention">
          <img src="@/assets/images/more.png" /><span>你关注的</span>
        </div>
        <van-icon name="arrow" />
      </div> -->
    </div>
    <div
      class="discounts-num"
      v-if="
        couponDetail &&
        couponDetail.sendTotalNumber - couponDetail.sendGottenNumber > 0
      "
      @click="showDiscountCoupon"
    >
      <!-- <p>
        仅剩{{ couponDetail.sendTotalNumber - couponDetail.sendGottenNumber }}份
      </p> -->
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, onBeforeUnmount, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useWindowSize } from "@vueuse/core";
import {
  queryTgLiveList,
  sendFollowMessage,
  queryLiveCoupon,
} from "@/api/video";
import { attentionTg } from "@/api/index";
import emitter from "@/utils/emitter";
import useGetLiveStatusObj from "@/hooks/useGetLiveStatusObj";
import useShieldConfig from "@/hooks/useShieldConfig";
import useDisableScroll from "@/hooks/useDisableScroll";

const { addScrollEvent } = useDisableScroll();
const $shieldConfig = useShieldConfig();

const $liveStatusObj = useGetLiveStatusObj();

const { width } = useWindowSize();
const router = useRouter();

const props = defineProps({
  detail: {
    type: Object,
    default: () => ({}),
  },
  online: {
    type: Number,
    default: 0,
  },
});

const openInfo = ref(false);

const list = ref([]);
async function getTgLiveList() {
  let ret = await queryTgLiveList({ videoId: props.detail.id });
  if (ret.code === 0 && ret.data) {
    console.log("ret.data", ret.data);
    list.value = ret.data;
    console.log("ret.data", list.value);
  }
}
getTgLiveList();
// 进入别的直播间
function toLiveRoom(id) {
  router.push(`./videoPlay?id=${id}`);
}

// 关注投顾
async function subAdvisor() {
  let ret = await attentionTg({
    advisorId: props.detail.advisorBasic?.id,
    channel: 2,
    option: props.detail.isSubAdvisor === 1 ? 2 : 1,
    videoId: props.detail.id,
  });
  if (ret.code === 0) {
    emitter.emit("updateVideoDetail", {
      isSubAdvisor: props.detail.isSubAdvisor === 1 ? 2 : 1,
    });
    props.detail.isSubAdvisor === 1 &&
      [
        $liveStatusObj.InLive,
        $liveStatusObj.PausePlay,
        $liveStatusObj.FinishPlay,
      ].includes(props.detail.liveStatus) &&
      sendFollowMessage({
        id: props.detail.id,
        option: props.detail.isSubAdvisor === 1 ? 2 : 1,
      });
  }
}

const couponDetail = ref();
// 获取最新的优惠券对象
emitter.on("getCouponDetail", (value) => {
  couponDetail.value = value;
});

const showDiscountCoupon = () => {
  emitter.emit("showDiscountCoupon", couponDetail.value);
};

const getLiveCoupon = async () => {
  let ret = await queryLiveCoupon({
    liveId: props.detail.id,
  });
  if (ret.code === 0 && ret.data && ret.data.length) {
    couponDetail.value = ret.data[0];
    couponDetail.value.couponType = Number(couponDetail.value.couponType);
    couponDetail.value.sendCouponId = couponDetail.value.id;
  }
};
if (props.detail.liveStatus !== $liveStatusObj.FinishPlay) {
  getLiveCoupon();
}

onMounted(() => {
  addScrollEvent(".intro");
});

onBeforeUnmount(() => {
  emitter.off("getCouponDetail");
});
</script>
<style scoped lang="scss">
.header-wrap {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  z-index: 1;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .close {
    display: block;
    width: 48px;
    height: 48px;
    background: url(../../../assets/images/close.png) no-repeat center;
    background-size: contain;
  }
}
.tg-info {
  display: flex;

  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  border-radius: 32px;
  padding: 0px 12px 0px 4px;
  img {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
  }
  .info {
    text-align: left;
    height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 12px;
    p {
      height: 24px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 24px;
      color: #ffffff;
      letter-spacing: 0;
      line-height: 24px;
      margin-bottom: 10px;
    }
    label {
      height: 18px;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      letter-spacing: 0;
      line-height: 24px;
    }
  }
  .add {
    height: 40px;
    border-radius: 20px;
    color: #fff;
    // border: 1px solid rgba(46, 120, 250, 0.8);
    font-weight: 400;
    font-size: 24px;
    color: #ffffff;
    text-align: center;
    line-height: 40px;
    background: none;
    background-size: 20px auto;
    background: rgba(240, 46, 24, 1);
    padding: 0 16px;
  }
  .attention {
    height: 40px;
    background-image: linear-gradient(270deg, #2e78fa 0%, #45acff 100%);
    border-radius: 20px;
    font-weight: 400;
    font-size: 24px;
    color: #ffffff;
    padding: 0 16px;
    margin-left: 8px;
  }
}
.tags {
  display: flex;
  font-weight: 400;
  font-size: 22px;
  color: #ff6f16;
  line-height: 22px;
  margin-top: 8px;
  & > div {
    display: flex;
    align-items: center;
    height: 36px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 18px;
    padding: 0 16px;
    margin-right: 8px;
  }
  .risk {
    color: rgba(154, 164, 182, 1);
  }
}
.intro-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 16px;
  .more {
    display: flex;
    align-items: center;
    font-size: 28px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 28px 0 0 28px;
    padding: 0 8px;
    height: 56px;
    &.attention {
      background: linear-gradient(90deg, #f02e1880 0%, #f02e1826 100%),
        #0000004d;
    }
    img {
      width: 32px;
      height: 32px;
      margin-right: 6px;
    }
    .your-attention {
      img {
        border-radius: 50%;
      }
    }
  }
}
.intro {
  display: flex;
  justify-content: space-between;
  padding: 8px 20px;
  width: 470px;
  border-radius: 28px;
  background: rgba(0, 0, 0, 0.3);
  font-weight: 500;
  font-size: 28px;
  color: #ffffff;
  max-height: 500px;
  overflow-y: scroll;
  .into-content {
    flex: 1;
    width: 0;
  }
  h4 {
    text-align: left;
    color: #ffffff;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px;
  }
  p {
    text-align: left;
    padding: 8px 0;
    color: #ffffff;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    span {
      color: #9abfff;
      img {
        width: 20px;
        height: 10px;
        margin-left: 4px;
      }
    }
  }
  .open {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .close {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center;
  }
  & > span {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
  }
}
.phone {
  position: relative;
  width: 56px;
  margin: 0 auto 8px;
  img {
    width: 56px;
    height: 56px;
    border: 1px solid #f02e18;
    border-radius: 50%;
  }
  i {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: url(../../../assets/images/play-icon1.gif) no-repeat center;
    background-size: contain;
  }
}
.tg-name {
  font-size: 24px;
  color: #fff;
  font-weight: 400;
  text-align: center;
}
.van-swipe {
  margin-bottom: 16px;
  margin-right: 72px;
  position: relative;
  z-index: 2;
  // background: rgba(255, 255, 255, 0.1);
  // box-shadow: 20px -40px 40px 50px rgba(255, 255, 255, 0.1);
}
.swipe-wrap {
  position: relative;
  .close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 12px;
    z-index: 10000000;
    display: block;
    width: 48px;
    height: 48px;
    background: url(../../../assets/images/close1.png) no-repeat center;
    background-size: 48px 48px;
    // background-color: rgba(255, 255, 255, 0.1);
    // box-shadow: -10px -5px 20px 20px rgba(255, 255, 255, 0.1);
  }
}

.discounts-num {
  margin-top: 16px;
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 24px;
  background-color: rgba(0, 0, 0, 0.3);
  background-image: url(../../../assets/images/discounts.png);
  background-position: top 10px center;
  background-size: 72px 64px;
  background-repeat: no-repeat;
  overflow: hidden;
  p {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 40px;
  }
}
</style>
