<template>
  <div>
    <Nav title="我的">
      <span class="right-icon" @click="outLogin"> 退出 </span>
    </Nav>
    <div class="browse-list">
      <div class="header-title">
        <h5>我的浏览</h5>
        <span @click="goToPage('/browseList')"
          >更多<van-icon name="arrow"
        /></span>
      </div>
      <van-swipe
        :loop="false"
        :width="(116 / 375) * width"
        :show-indicators="false"
      >
        <van-swipe-item v-for="(item, index) in list" :key="index">
          <div
            class="browse-item"
            @click="goToPage(`/videoPlay?id=${item.video?.id}`)"
          >
            <img class="cover" :src="item.video?.imgUrl" />
            <div class="info">
              <p>{{ item.video?.title }}</p>
              <div class="time">{{ formatTimer(item.time) }}</div>
            </div>
            <img
              v-if="item.video?.playType === 1"
              class="status"
              :src="getStatusIcon(item.video)"
              alt=""
            />
          </div>
        </van-swipe-item>
      </van-swipe>
      <Empty v-if="!list.length" text="暂无浏览～" />
    </div>

    <van-tabs v-model:active="active" shrink line-width="0.4rem">
      <van-tab
        title-class="tab"
        v-for="item in ['服务速递', '我的关注', '我的订阅', '我的订单']"
        :key="item"
        :title="item"
      >
        <ServerList v-if="active === 0" />
        <Attention v-else-if="active === 1" />
        <Subscription v-else-if="active === 2" />
        <Order v-else />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useWindowSize } from "@vueuse/core";
import Nav from "@/components/NavBar.vue";
import ServerList from "./components/ServerList.vue";
import Attention from "./components/Attention.vue";
import Subscription from "./components/Subscription.vue";
import Order from "./components/Order.vue";
import Empty from "@/components/Empty.vue";
import { formatTimer } from "@/utils/format";
import { getSubscribeList } from "@/api/index";
import useGetStatusIcon from "@/hooks/useGetStatusIcon";
import { useStore } from "vuex";
const { width } = useWindowSize();
const store = useStore();
const router = useRouter();
const getStatusIcon = useGetStatusIcon();

const active = ref(0);
const list = ref([]);
const onLoad = async () => {
  // 异步更新数据
  let ret = await getSubscribeList({ type: 2 });
  if (ret.code === 0) {
    list.value = ret.data.slice(0, 10);
  }
};
onLoad();

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

const outLogin = () => {
  store.commit("outLogin");
};
</script>
<style scoped lang="scss">
.browse-list {
  background: #f5f6f7;
  padding: 0 32px 40px;
  .header-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    h5 {
      color: #333333;
      font-size: 32px;
      font-style: normal;
      font-weight: 500;
      line-height: 92px;
    }
    span {
      color: #999999;
      font-size: 28px;
      font-style: normal;
      font-weight: 400;
    }
  }
  .browse-item {
    position: relative;
    margin-right: 24px;
    .cover {
      width: 208px;
      height: 280px;
      border-radius: 16px;
    }
    .status {
      position: absolute;
      left: 0;
      top: 0px;
      width: 114px;
      height: 40px;
    }
    .info {
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: left;
      padding: 0 16px 16px;
      box-sizing: border-box;
      p {
        color: #ffffff;
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: 44px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .time {
        color: #ffffffcc;
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
      }
    }
  }
}
::v-deep .van-tabs__line {
  background: #f02e18;
}
::v-deep .van-tabs {
  padding: 0 32px;
  .van-tabs__nav {
    padding-left: 0;
    padding-right: 0;
  }
  .van-tab__panel {
    padding: 24px 0;
  }
  .van-tabs__nav {
    padding-left: 0;
    padding-right: 0;
  }
  .tab {
    padding: 0 !important;
    margin-right: 48px;
  }
}
.right-icon {
  font-size: 28px;
  line-height: 28px;
}
</style>
