<script setup lang="ts">
import { onMounted, ref, computed,onActivated } from "vue";
import { Api } from "../../assets/api/api";
import { useRouter, onBeforeRouteUpdate } from "vue-router";
import {useStoriesStore} from "@/stores/index"
import {storeToRefs }from 'pinia'
//控制书本类型
const conIndex = ref(0);
//控制登录前后，页面样式
const loginStatus = ref(false);
//收藏书本
const booksData = ref([]);
const booksDataFlag = ref(false);

// vue3自带方法
const router = useRouter();

//跳转上一页
const goBack = () => {
  router.push("/");
};
//跳转首页
const goPage = () => {
  router.push("/");
};
//跳转登录页
const goLoginView = () => {
  router.push("/login");
};
//跳转vip页
const goVip = () => {
  router.push("/vip");
};
//获取登录状态
const getLoginStatus = () => {
  if (localStorage.getItem("LoginStatus")) {
    loginStatus.value = JSON.parse(localStorage.getItem("LoginStatus")!);
  }
};
const monitorLoginStatus = computed(() => {
  return loginStatus.value;
});
//获取余额
const price = computed(() => {
  return JSON.parse(localStorage.getItem("price") as any);
});
//获取vip状态 pinia 相关操作
// const vipStart = computed(() => {
//   return JSON.parse(localStorage.getItem("vip") as any);
// });
const {vip} = storeToRefs(useStoriesStore());

//获取收藏书本
const getBooks = () => {
  if (localStorage.getItem("LoginStatus")) {
    if (JSON.parse(localStorage.getItem("LoginStatus")!)) {
      if (localStorage.getItem("collect")) {
        booksData.value = JSON.parse(localStorage.getItem("collect") as any);
        booksDataFlag.value = true;
      } else {
        booksDataFlag.value = false;
      }
    }
  }
};
//跳转详情页
const goDetailView = (id:String) =>{
  let newId = id;
  router.push({
    name:"detail",
    params:{
      id:newId as any
    }
  })
}

onMounted(() => {
  getLoginStatus();
  getBooks();

});
onActivated(()=>{
  getLoginStatus();
  getBooks();
})
</script>

<template>
  <div class="bookshelf">
    <nav>
      <div class="app" @click="goBack"></div>
      <h1>我的书架</h1>
      <div class="sourch">
        <p @click="goPage">首页</p>
      </div>
    </nav>
    <main>
      <!-- 登录  -->
      <div
        class="login"
        :class="{ before: !monitorLoginStatus, after: monitorLoginStatus }"
      >
        <div class="head_phtot">
          <div class="img">
            <div class="van_image_box">
              <van-image width="60" height="60" src="/img/home/headPhoto.png" />
            </div>
            <!-- 登录后 -->
            <div class="info" v-if="monitorLoginStatus">
              <h6>
                <span>134****2984</span>
                <van-image width="18" height="13" src="/img/home/vip.png" />
                <a href="javascript:;" @click="goVip">{{
                  vip == true ? "已开通" : "开通"
                }}</a>
              </h6>
              <p style="margin-bottom: 3px">
                余额：<span>{{ price }}</span
                ><a href="javascript:;">书币</a>
              </p>
              <p>
                vip：<a href="">{{ vip == true ? "已购买" : "未购买" }}</a>
              </p>
            </div>
          </div>

          <!-- 登录前 -->
          <div class="info" v-if="!monitorLoginStatus">
            <h1>未登录</h1>
            <p>登录账号同步书架</p>
          </div>
          <!-- 登录后 -->
          <button v-if="monitorLoginStatus">切换帐号</button>
        </div>
        <!-- 登录前 -->
        <button v-if="!monitorLoginStatus" @click="goLoginView">登录</button>
        <!-- 登录后 -->
        <div v-if="monitorLoginStatus" class="btns">
          <button @click="router.push('/personalCenter')">个人中心</button>
          <button @click="router.push('/voucherCenter')">快速充值</button>
        </div>
      </div>
      <!-- 功能 -->
      <div class="function">
        <ul class="function_ul1">
          <li
            class="function_li1"
            :class="{ con: conIndex == 0 }"
            @click="conIndex = 0"
          >
            最近阅读
          </li>
          <li
            class="function_li1"
            :class="{ con: conIndex == 1 }"
            @click="conIndex = 1"
          >
            收藏
          </li>
          <li
            class="function_li1"
            :class="{ con: conIndex == 2 }"
            @click="conIndex = 2"
          >
            购买
          </li>
          <li
            class="function_li1"
            :class="{ con: conIndex == 3 }"
            @click="conIndex = 3"
          >
            追书
          </li>
        </ul>
        <!-- 最近阅读  -->
        <div class="record" v-if="conIndex == 0">
          <div class="existence">
            <div class="img">
              <van-image
                width="44"
                height="58"
                src="/img/home/notBookHistory.png"
              />
            </div>
            <h1>您还没有阅读历史</h1>
            <p>最近阅读过的图书可以来这里继续阅读哦！~</p>
          </div>
          <div v-if="false" class="potential_history">
            <ul>
              <li>
                <van-image
                  width="100%"
                  height="80"
                  src="https://easyreadfs.nosdn.127.net/kLIz2uuOpyk5tJbZMLLbPw==/8796093025009675084"
                />
                <p>34123412</p>
              </li>
            </ul>
          </div>
        </div>
        <!-- 收藏历史 -->
        <div class="record" v-if="conIndex == 1">
          <div class="existence">
            <div class="img" v-if="!booksDataFlag">
              <van-image
                width="44"
                height="58"
                src="/img/home/notBookHistory.png"
              />
            </div>
            <h1 v-if="!booksDataFlag">您还没有收藏历史</h1>
            <p v-if="!booksDataFlag">登录后收藏记录才会显示在这里哦~</p>
          </div>
          <div v-if="booksDataFlag" class="potential_history">
            <ul>
              <li  
              @click="goDetailView(item.id)"
              v-for="(item, index) in booksData" 
              :key="index">
                <van-image width="100%" height="142" :src="item.img" />
                <p>{{ item.author }}</p>
              </li>
            </ul>
          </div>
        </div>
        <!-- 购买 -->
        <div class="record" v-if="conIndex == 2">
          <div class="existence">
            <div class="img">
              <van-image
                width="44"
                height="58"
                src="/img/home/notBookHistory.png"
              />
            </div>
            <h1>您还没有购买历史</h1>
            <p>登录后购买记录才会显示在这里哦~</p>
          </div>
          <div v-if="false" class="potential_history">
            <ul>
              <li>
                <van-image
                  width="100%"
                  height="80"
                  src="https://easyreadfs.nosdn.127.net/kLIz2uuOpyk5tJbZMLLbPw==/8796093025009675084"
                />
                <p>34123412</p>
              </li>
            </ul>
          </div>
        </div>
        <!-- 追书 -->
        <div class="record" v-if="conIndex == 3">
          <div class="existence">
            <div class="img">
              <van-image
                width="44"
                height="58"
                src="/img/home/notBookHistory.png"
              />
            </div>
            <h1>您还没有追书历史</h1>
            <p>登录后追书记录才会显示在这里哦~</p>
          </div>
          <div v-if="false" class="potential_history">
            <ul>
              <li>
                <van-image
                  width="100%"
                  height="80"
                  src="https://easyreadfs.nosdn.127.net/kLIz2uuOpyk5tJbZMLLbPw==/8796093025009675084"
                />
                <p>34123412</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </main>
    <br /><br />

    <footer>
      <p>©2022天浪小说</p>
      <!-- <p>京ICP备 11009265号-5</p> -->
    </footer>
    <br />
  </div>
</template>

<style lang="scss" scoped>
nav {
  display: flex;
  justify-content: space-between;
  background-color: #f7f7f7;
  border-bottom: 1px solid #cbcbcb;
  .app {
    width: 17px;
    height: 17px;
    background: url("/public/img/home/left.png") no-repeat 12px 0px;
    background-size: 8px 13px;
    margin-top: 13px;
    padding-left: 11px;
    padding-right: 44px;
  }
  h1 {
    font-size: 17px;
    color: #333333;
    padding-top: 12px;
    padding-bottom: 10px;
    font-weight: normal;
  }
  .sourch {
    display: flex;
    width: 60px;
    padding-right: 12px;
    justify-content: flex-end;
    align-items: center;
    p {
      font-size: 12px;
      color: #999999;
    }
    .img {
      width: 16px;
      height: 16px;
      background: url(https://img.xmkanshu.com/operateimg/img/img/18697/18697.png)
        no-repeat center center;
      background-size: cover;
    }
  }
}
.login {
  &.before {
    display: flex;
    padding-top: 15px;
    padding-bottom: 19px;
    background-color: #fff;
    justify-content: space-between;
    padding-right: 10px;
    margin-bottom: 10px;
    .img {
      width: 60px;
      height: 60px;
      padding: 0 10px;
    }
    .info {
      h1 {
        font-size: 14px;
        color: #000000;
        font-weight: normal;
        margin-top: 1px;
        margin-bottom: 5px;
      }
      p {
        font-size: 12px;
        color: #9f9f9f;
      }
    }
    button {
      width: 65px;
      height: 35px;
      color: #fff;
      background-color: #d3270f;
      border-radius: 2px;
      border: none;
    }
  }
  &.after {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #fff;
    margin-bottom: 10px;
    .img {
      display: flex;
      & > img {
        width: 60px;
        height: 60px;
      }
    }
    .van_image_box {
      padding: 0 10px;
    }
    .info {
      h6 {
        font-size: 14px;
        width: 145px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 3px;
        a {
          color: #d3270f;
          font-weight: normal;
        }
      }
      & > p {
        font-size: 14px;
        color: #000000;
        span {
          color: #db270f;
        }
        a {
          color: #9f9f9f;
        }
      }
    }
    .head_phtot {
      & > button {
        width: 60px;
        height: 34px;
        border: 1px solid #e3e3e3;
        font-size: 12px;
        color: #999999;
        background-color: #f7f7f7;
        margin-top: 10px;
        margin-right: 10px;
      }
    }
    .btns {
      display: flex;
      margin-top: 12px;
      justify-content: space-evenly;
      button {
        &:nth-of-type(1) {
          width: 174px;
          height: 36px;
          border: 1px solid #aaaaaa;
          background-color: #f7f7f7;
          border-radius: 2px;
          font-size: 14px;
          color: #555555;
        }
        &:nth-of-type(2) {
          width: 171px;
          height: 36px;
          background-color: #f54b41;
          color: #ffffff;
          border-radius: 2px;
          font-size: 14px;
          border: none;
        }
      }
    }
  }
  .head_phtot {
    display: flex;
    justify-content: space-between;
  }
}
.function {
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 14px;
  .function_ul1 {
    display: flex;
    width: 94%;
    margin: 0 auto;
    border: 1px solid #bbbbbb;
    border-radius: 2px;
    margin-bottom: 21px;
    .function_li1 {
      height: 35px;
      border-right: 1px solid #bbbbbb;
      background-color: #f1f1f1;
      font-size: 15px;
      text-align: center;
      line-height: 35px;
      color: #666666;
      flex: 1;
      &.con {
        color: #ff0020;
        background-color: #fff;
      }
      &:nth-last-of-type(1) {
        border: none;
      }
    }
  }
  .img {
    text-align: center;
    margin-bottom: 8px;
    border-radius: 1px;
    overflow: hidden;
  }
  .record {
    h1 {
      font-size: 15px;
      text-align: center;
      color: #000000;
      margin-bottom: 7px;
      font-weight: normal;
    }
    p {
      font-size: 12px;
      color: #666666;
      text-align: center;
    }
  }
}
.potential_history {
  background-color: #fff;
  ul {
    width: 93.6%;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    border: none;
  }
  li {
    width: 30.484%;
    margin-bottom: 20px;
    margin-right: 15px;
    &:nth-of-type(3n) {
      margin-right: 0;
    }
    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
      color: #000000;
      text-align: center;
    }
  }
  h2 {
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 14px;
    color: #333333;
    font-weight: normal;
    background-color: #fff;
    margin-bottom: 10px;
    & > span {
      display: inline-block;
      width: 5px;
      height: 10px;
      background: url(https://img.xmkanshu.com/operateimg/img/img/15000/15000.png);
      background-size: cover;
    }
  }
}
footer {
  p {
    text-align: center;
    font-size: 12px;
    color: #999999;
    margin-bottom: 10px;
  }
}
</style>