<template>
  <div class="page">
    <Nav title="直播视频">
      <div class="right-icon">
        <img src="@/assets/images/search.png" @click="goToPage('/search')" />
        <img src="@/assets/images/my.png" @click="goToPage('/my')" />
      </div>
    </Nav>
    <div class="wrap">
      <div
        class="choiceness choiceness-video"
        v-if="choicenessVideoList.length"
      >
        <h3>精选视频</h3>
        <ul>
          <li
            v-for="(item, index) in choicenessVideoList"
            :key="index"
            @click="goToPage(`/videoPlay?id=${item.id}`)"
          >
            <p>{{ item.title }}</p>
            <img
              v-if="item.liveStatus === $liveStatusObj.InLive"
              src="@/assets/images/play.gif"
              alt=""
              srcset=""
            />
          </li>
        </ul>
      </div>
      <div class="play-list" v-if="livePlanList.length">
        <div class="title">
          <h3>直播计划</h3>
          <span @click="goToPage('/playPlan')"
            >更多<van-icon name="arrow"
          /></span>
        </div>
        <ul class="list-wrap">
          <li
            class="live"
            v-for="(item, index) in livePlanList"
            :key="index"
            @click="goToPage(`/videoPlay?id=${item.id}`)"
          >
            <img
              class="status-icon"
              :src="
                liveIconObj[
                  item.liveStatus === $liveStatusObj.FinishPlay &&
                  item.libraryList &&
                  item.libraryList.length
                    ? 5
                    : item.liveStatus
                ]
              "
              alt=""
              srcset=""
            />
            <div class="content">
              <h5 v-if="item.liveStatus === $liveStatusObj.NotStart">
                {{ item.subscribeUserCount }}人预约
              </h5>
              <h5 v-else>{{ item.readCount }}次观看</h5>
              <p>{{ item.title }}</p>
              <div class="info">
                <div class="user-name">
                  <img :src="item.advisorBasic?.avatar" alt="" />
                  <p>{{ item.advisorBasic?.showName }}</p>
                </div>
                <span v-if="item.columnId">专栏</span>
              </div>
            </div>
            <div class="time-line">{{ item.startTime }}<i></i></div>
          </li>
          <!-- <li class="await">
            <img class="status-icon" :src="liveIconObj[2]" alt="" srcset="" />
            <div class="content">
              <h5>151次观看</h5>
              <p>情冲击下电池板块投资机会分析</p>
              <div class="info">
                <div class="user-name">
                  <img src="" alt="" />
                  <p>赵晓磊</p>
                </div>
                <span>专栏</span>
              </div>
            </div>
            <div class="time-line">04-09 13:00<i></i></div>
          </li> -->
        </ul>
      </div>
      <div class="choiceness choiceness-column" v-if="mainColumnList.length">
        <div class="title">
          <h3>精品专栏</h3>
          <span @click="goToPage('/column')"
            >更多<van-icon name="arrow"
          /></span>
        </div>
        <ul>
          <li
            v-for="(item, index) in mainColumnList.slice(0, 6)"
            :key="index"
            @click="goToPage(`/columnDetail?id=${item.id}`)"
          >
            <p>{{ item.name }}</p>
            <img
              v-if="item.status && item.status === $liveStatusObj.InLive"
              src="@/assets/images/play.gif"
              alt=""
              srcset=""
            />
          </li>
        </ul>
      </div>
      <div>
        <van-tabs v-model:active="active" shrink line-width="0.4rem">
          <van-tab
            title-class="tab"
            v-for="(item, index) in tagList"
            :key="index"
            :title="item.name"
          >
            <ListView :tagId="item.id" />
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import Nav from "@/components/NavBar.vue";
import ListView from "./components/ListView.vue";
import {
  queryMainColumnList,
  queryLivePlan,
  queryVideoTagList,
  queryRecommendList,
} from "@/api/index";
import dayjs from "dayjs";
import useGetLiveStatusObj from "@/hooks/useGetLiveStatusObj";
const $liveStatusObj = useGetLiveStatusObj();
/**
 * 路由实例
 */
const router = useRouter();

const goToPage = (page) => {
  router.push(page);
};

const liveIconObj = ref({
  1: require("@/assets/images/live-icon.gif"), // 直播中
  2: require("@/assets/images/await-icon.png"), // 未开始
  3: require("@/assets/images/pause-status.png"), // 暂停中
  4: require("@/assets/images/over-icon.png"), // 已结束
  5: require("@/assets/images/back-icon.png"), // 回放中
});

// 获取精选专栏
const mainColumnList = ref([]);
const getMainColumnList = async () => {
  let ret = await queryMainColumnList({});
  if (ret.code === 0) {
    mainColumnList.value = ret.data;
  }
};
getMainColumnList();

// 直播计划
const livePlanList = ref([]);
const getLivePlan = async () => {
  let ret = await queryLivePlan({
    size: 3,
    cuurent: 1,
    planTime: dayjs(new Date()).format("YYYY-MM-DD"),
    type: 1,
  });
  if (ret.code === 0 && ret.data) {
    livePlanList.value = ret.data.list;
  }
};
getLivePlan();

// 精选视频和视频列表
const choicenessVideoList = ref([]); // 精选视频
const getRecommendList = async (productType) => {
  let ret = await queryRecommendList({ productType });
  if (ret.code === 0 && ret.data) {
    choicenessVideoList.value = ret.data.slice(0, 6);
  }
};
getRecommendList(3);

// 查询栏目列表
const active = ref(0);

// 获取视频标签
const tagList = ref([
  {
    name: "全部",
    id: "",
  },
]);
const getVideoTagList = async () => {
  let ret = await queryVideoTagList();
  if (ret.code === 0) {
    tagList.value = tagList.value.concat(ret.data);
  }
};
getVideoTagList();
</script>
<style scoped lang="scss">
.page,
::v-deep .van-nav-bar {
  background: url(../../assets/images/bg.png) #fff no-repeat top center;
  background-size: 100% auto;
}
.right-icon {
  display: flex;
  img {
    width: 48px;
    height: 48px;
    margin-left: 40px;
  }
}
.wrap {
  padding: 0 32px;
}
.choiceness {
  padding: 0 18px 18px;
  border-radius: 24px;
  margin-bottom: 36px;
  &.choiceness-video {
    background: url(../../assets/images/choiceness-bg1.png) no-repeat center;
    background-size: cover;
    h3 {
      color: #fff;
    }
    li {
      background: #fff1f1;
    }
  }
  &.choiceness-column {
    background: url(../../assets/images/choiceness-bg2.png) no-repeat center;
    background-size: cover;
    h3 {
      color: #546d96;
    }
    li {
      background: #f8f9fa;
    }
  }
  h3 {
    font-size: 32px;
    line-height: 88px;
    text-align: left;
  }
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      color: #727272;
      font-size: 28px;
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    background: #fff;
    padding: 10px 20px;
    border-radius: 16px;
    li {
      display: flex;
      align-items: center;
      width: calc(50% - 10px);

      border-radius: 8px;
      margin: 10px 0;
      font-weight: 500;
      font-size: 28px;
      line-height: 44px;
      color: #333;
      padding: 8px 16px;
      box-sizing: border-box;
      img {
        width: 32px;
        height: 32px;
      }
      p {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    li:nth-child(2n + 1) {
      margin-right: 20px;
    }
  }
}
.play-list {
  background: url(../../assets/images/planBg.png) no-repeat center;
  background-size: cover;
  border-radius: 24px;
  padding: 0 18px 18px;
  margin-bottom: 36px;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      color: #bb4e2b;
      font-size: 32px;
      line-height: 88px;
      text-align: left;
    }
    span {
      color: #727272;
      font-size: 28px;
    }
  }
  .list-wrap {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

    li {
      position: relative;
      flex: 0 0 auto;
      width: 320px;
      margin-right: 20px;
      .status-icon {
        position: absolute;
        top: 0;
        left: 0;
        background-size: 114px;
        height: 40px;
      }

      .content {
        border-radius: 16px;
        padding: 8px 10px 10px;
      }
      &.live {
        h5 {
          color: #bb4e2b;
        }
        .content {
          background: url(../../assets/images/liveBg.png) no-repeat center;
          background-size: cover;
          .info span {
            background: #ffd4c8;
            color: #f02e18;
          }
        }
      }
      &.await {
        h5 {
          color: #859ebd;
        }
        .content {
          background: url(../../assets/images/awaitBg.png) no-repeat center;
          background-size: cover;
          .info span {
            background: #c9defe;
            color: #2e78fa;
          }
        }
      }

      h5 {
        font-size: 24px;
        text-align: right;
        margin-bottom: 20px;
        padding-right: 10px;
      }
      p {
        color: #bb4e2b;
        font-size: 28px;
        line-height: 44px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          padding: 6px 8px 6px 8px;
          font-size: 22px;
          border-radius: 8px;
        }
        .user-name {
          display: flex;
          align-items: center;
          img {
            width: 32px;
            height: 32px;
            margin-right: 8px;
            border-radius: 50%;
          }
        }
      }
      .time-line {
        display: flex;
        align-items: center;
        font-size: 24px;
        color: #999999;
        text-align: left;
        height: 24px;
        padding: 20px 0;
        i {
          flex: 1;
          height: 1px;
          background: #ebeced;
          margin-left: 10px;
        }
      }
    }
    li:last-child {
      margin-right: 0;
    }
  }
}
::v-deep .van-tabs__line {
  background: #f02e18;
}
::v-deep .van-tabs__wrap {
  margin-bottom: 20px;
  .van-tabs__nav {
    padding-left: 0;
    padding-right: 0;
  }
  .tab {
    padding: 0 !important;
    margin-right: 48px;
  }
}
</style>
