<template>
  <!-- 收藏版块 -->
  <div class="collect">
    <!-- 未收藏 -->
    <div v-if="favoriteHeadList.length == 0" class="notCollect">
      <img class="notCollect-img" src="~assets/img/collect/notCollect.png" alt="未收藏" />
      <div class="collect-text">收藏你感兴趣的版块，迅速浏览相应的帖子</div>
      <router-link to="/allSections" class="flexcenter collect-btn">

        <div class="collect-btn-text">马上收藏</div>
        <svg-icon icon-class="collect-btn" class-name="icon-collect"></svg-icon>
      </router-link>
    </div>
    <!-- 已收藏 -->
    <div v-else>
      <!-- 热门版块 -->
      <div class="hot-box" v-if="favoriteHeadList.length > 0">
        <div class="hot-label" :class="{ active: fid == 0 }" @click="hotLabelClick(0)">全部</div>
        <div class="hot-label" :class="{ active: fid == item.fid }" v-for="(item, index) in favoriteHeadList" :key="index"
          @click="hotLabelClick(item.fid)">
          {{ item.name }}
        </div>
        <!-- 设置按钮 -->
        <div class="setting flexcenter" @click="settingClick">
          <img src="~assets/img/icon/setting.png" alt="设置" />
          设置
        </div>

        <!-- 设置  收藏版块弹窗 -->
        <div class="setting-window" :class="{ 'setting-show': settingShow == true }" @click="settingClose">
          <div class="setting-container" @click.stop>
            <div class="setting-title">设置收藏版块</div>
            <div class="setting-total">
              <div class="setting-num">共收藏<b> {{ favoriteHeadList.length }} </b>个版块</div>
              <router-link to="/allSections" class="flexcenter setting-add">
                <svg-icon icon-class="settingAdd" class-name="setting-add-img"></svg-icon>添加
              </router-link>
            </div>
            <!-- 弹窗收藏版块内容 -->
            <div class="setting-sections">
              <div v-for="(item, index) in favoriteHeadList" :key="index">
                <div class="setting-item" @click.stop="cancelFavoritesSection(item.fid, index)">
                  <div class="setting-item-title one-line">{{ item.name }}</div>
                  <div class="setting-star"></div>
                </div>
              </div>
            </div>
            <!-- 关闭弹窗 -->
            <div class="setting-close" @click="settingClose">关闭</div>
          </div>
        </div>
      </div>

      <!-- 路径 -->
      <template v-if="fid != 0">
        <plate-navigation :fid="plate.fid" :stairname="plate.stairname"
          :subsectionsname="plate.subsectionsname"></plate-navigation>
      </template>

      <!-- 内容区域 -->
      <section>
        <template v-if="favorite.list.length != 0 || loading">
          <index-list :list="favorite.list"></index-list>
          <div class="paging flexcenter" v-if="!loading">
            <el-pagination small background layout="prev, pager, next" @current-change="currentChange"
              :current-page.sync="favorite.page" :page-size="favorite.limit" :total="favorite.count">
            </el-pagination>
          </div>
        </template>


      </section>
    </div>
  </div>
</template>

<script>
import plateNavigation from '@/components/PlateNavigation'
import indexList from '@/components/IndexList'

export default {
  name: "Collect",
  data() {
    return {
      allForumList: [],  // 所有板块得数据
      favoriteHeadList: [],
      favoriteHeadIdList: [],
      fid: 0, // 选中的收藏板块
      collect: [1],
      settingShow: false, //弹窗显示
      settingStar: false,
      plate: {
        stairname: "",// 一级版块名称
        subsectionsname: "",// 子版块名称
        fid: 0, // 一级板块的id
      },
      favorite: { // 收藏板块
        list: [],
        limit: 20,
        page: 1,
        count: 0
      },
      loading: null,


    };
  },

  watch: {
    "$store.state.allForumList": {
      handler(newV, oldV) {
        if (!Array.isArray(newV)) return
        this.allForumList = newV
        if (this.favoriteHeadList.length != 0) this.handleFavoriteHeadList()
      },
      immediate: true
    },

    favoriteHeadIdList: {
      handler(newV, oldV) {
        if (!Array.isArray(newV)) return
        this.favoriteHeadList = newV
        if (this.allForumList.length != 0) this.handleFavoriteHeadList()

      },
      immediate: true 
    },
  },
  mounted() {
    let { page, fid } = this.$route.query
    if (page) this.favorite.page = Number(page)
    if (fid) this.fid = fid

    this.init()
  },

  methods: {
    init() {
      let { homeRequestState, favoriteList } = this.$store.state
      if (!homeRequestState) {
        setTimeout(() => {
          this.init()
        }, 300);
      } else {
        this.favoriteHeadIdList = favoriteList
        this.getCollectList()
      }

    },

    // 获取收藏列表数据
    getCollectList() {
      if (this.favoriteHeadIdList.length == 0) return
      let favoriteHeadIdList = this.favoriteHeadIdList

      if (!favoriteHeadIdList.includes(Number(this.fid))) {
        this.fid = 0
      }
      this.$startupUnderLoading(this)
      this.$http.get("/api/home/threadList", {
        limit: this.favorite.limit,
        page: this.favorite.page,
        fid: this.fid,
        type: "fav"
      }).then(res => {
        if (res.code != 200) return
        let data = res.data

        this.favorite.list = data.data
        this.favorite.page = data.page
        this.favorite.limit = data.limit
        this.favorite.count = data.count

      }).finally(() => {
        this.$closeUnderLoading(this)
      })
    },

    // 处理获取收藏板块的值
    handleFavoriteHeadList() {
      let allForumList = this.allForumList
      let favoriteHeadIdList = this.favoriteHeadIdList

      let favoriteHeadList = []



      allForumList.forEach((el, index) => {
        if (!Array.isArray(el.data)) return
        el.data.forEach(elememt => {
          if (elememt.fid == this.fid) {
            this.plate.stairname = el.name
            this.plate.subsectionsname = elememt.name
            this.plate.fid = el.fid
          }

          if (favoriteHeadIdList.includes(elememt.fid)) {
            favoriteHeadList.push({
              fid: elememt.fid,
              name: elememt.name,
            })
          }
        })

      })

      this.favoriteHeadList = favoriteHeadList
    },

    currentChange() {
      let query = {
        page: this.favorite.page,
      }
      if (this.fid) query['fid'] = this.fid

      this.$router.push({ path: `/collect`, query })
    },

    hotLabelClick(fid) {
      let query = {
        page: 1,
        fid
      }
      this.$router.push({ path: `/collect`, query })
    },
    // 点击显示弹窗
    settingClick() {
      this.settingShow = true;
    },
    // 点击弹窗以外区域隐藏按钮、关闭弹窗
    settingClose() {
      this.settingShow = false;
    },
    // 处理取消收藏板块
    cancelFavoritesSection(fid, index) {
      let url = "/api/operation/unforumFav"

      this.$http.post(url, {
        fid
      }).then(res => {
        if (res.code != 200) return

        let list = this.$store.state.allForumList

        this.$store.commit('setAllForumList', list)

        if (this.fid == fid) {
          this.fid = 0
          this.getCollectList()
          this.$updateURLSearchParams({ page: 1, fid: 0 })
        }

        this.favoriteHeadList.splice(index, 1)

        this.$Message.success(res.message)
      }).finally(() => {
        this.$store.commit('setHomeRequestState', false)
        this.$store.dispatch('getUserInfo', this)

      })


    }

  },
  components: {
    plateNavigation,
    indexList
  },
};
</script>

<style lang="scss" scoped>
.setting {
  width: 1.44rem;
  height: 0.72rem;
  border-radius: 2.56rem;
  border: 0.013333rem solid rgba(127, 127, 127, 1);
  font-size: 0.3rem;
  color: #333;

  img {
    width: 0.32rem;
    height: 0.32rem;
  }
}

//设置弹窗
.setting-window {
  display: none;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 7;

  // 显示设置弹窗
  &.setting-show {
    display: block;
  }

  .setting-container {
    // position: absolute;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    max-height: 90%;
    min-height: 28%;
    border-radius: 0.8rem 0.8rem 0 0;
    overflow: hidden;
    display: inline-grid;
    align-content: flex-start;
  }

  //弹窗标题
  .setting-title {
    text-align: center;
    padding: .64rem 0 1.06rem;
    font-size: 0.48rem;
    font-weight: bolder;
    color: #000;
  }

  // 设置收藏弹窗版块量
  .setting-total {
    display: flex;
    justify-content: space-between;
    // margin: 0.25rem 0.4rem 0 0.5rem;
    // margin: 0 0.4rem 0 0.5rem;
    margin-right: .32rem;
    margin-left: .64rem;

    b {
      font-weight: bolder;
    }
  }

  .setting-num,
  .setting-add {
    font-size: 0.32rem;
    color: #000;
    font-weight: 400;
    color: #333;
    font-size: .32rem;
  }

  .setting-add-img {
    width: 0.4rem;
    height: 0.4rem;
    margin-right: .16rem;
  }

  // 设置收藏内容区域
  .setting-sections {
    width: 100%;
    overflow-y: scroll;
    // display: inherit;
    // margin-top: 0.45rem;
    margin-top: .8rem;
    max-height: 58vh;
    margin-bottom: .7733rem;

    .setting-item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      // margin-left: 0.87rem;
      margin-left: 1.04rem;
      border-bottom: 0.013333rem solid #eee;
      position: relative;
      // padding: 0.5rem 0;
      padding: .58rem 0;
      font-size: .36rem;

      &::before {
        content: "";
        width: 0.12rem;
        height: 0.32rem;
        border-radius: 0.16rem;
        position: absolute;
        // top: 0.6rem;
        top: 50%;
        transform: translateY(-50%);
        left: -0.4rem;
        background-color: #62b1ff;
      }

      .setting-item-title {
        font-size: 0.36rem;
      }

      &:last-child {
        border: none;
      }

      .setting-star {
        width: 0.48rem;
        height: 0.48rem;
        background-size: contain;
        background-image: url("assets/img/allSections/star.png");
        background-repeat: no-repeat;
        margin-right: 0.4rem;
      }
    }
  }

  .setting-close {
    width: 50%;
    margin: 0 auto .72rem;
    border: 0.013333rem solid #ccc;
    height: 1.28rem;
    line-height: 1.28rem;
    border-radius: 0.67rem;
    text-align: center;
    // position: fixed;
    // bottom: 0;
    // left: 25%;
  }
}

// 未收藏样式
.notCollect {
  height: 80vh;
  border-radius: 0.32rem;
  box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.67rem 0.35rem;
  background-color: #fff;

  .notCollect-img {
    width: 2.04rem;
    margin: 4rem 0 0.5rem 0;
  }

  .collect-text {
    font-size: 0.3rem;
    color: #7f7f7f;
  }

  .collect-btn {
    display: flex;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;

    .collect-btn-text {
      color: #000;
      font-weight: 650;
      font-size: 0.4rem;
    }

    //图标
    .icon-collect {
      width: 0.48rem;
      height: 0.48rem;
      margin-left: 0.25rem;
    }
  }
}

.paging {
  margin-top: .48rem;
  padding-bottom: 1rem;

  ::v-deep {
    .el-pagination.is-background .el-pager li:not(.disabled).active {
      background: rgba(98, 177, 255, 1);
      border-radius: 50%;
    }

    .el-pagination .btn-next .el-icon,
    .el-pagination .btn-prev .el-icon {
      font-size: .4rem;
    }
  }
}
</style>
