<template>
  <view>
    <view class="article_box">
      <view class="article_list">
        <view class="article_item" v-for="(item, index) in articleTypeList" @click="changeArticle(item, index)" :key="item.name">
          <view :class="[articleIdx === index ? 'article_active' : 'article_item_name']">{{ item.name }}</view>
          <view :class="[articleIdx === index ? 'task_line' : 'task_line_none']"></view>
        </view>
      </view>
      <view v-if="articleDeepTypeList.length > 0" class="article_list">
        <view class="article_item" v-for="(item, index) in articleDeepTypeList" @click="changeDeepArticle(item, index)" :key="item.name">
          <view :class="[articleDeepIdx === index ? 'article_active' : 'article_item_name']">{{ item.name }}</view>
          <view :class="[articleDeepIdx === index ? 'task_line' : 'task_line_none']"></view>
        </view>
      </view>
    </view>
    <view class="line" />
    <view v-if="!articleLoading && !articleList.data.length" class="data_none">
      <image mode="aspectFill" class="data_img" src="/static/pic_wushuju@2x.png" />
      <view class="data_title">暂无数据</view>
    </view>
    <view class="article_boxs">
      <view v-for="(item, index) in articleList.data" :key="item.index" style="width: 100%" @click="onArticleClick(item, index)">
        <view class="article_container" style="width: 100%">
          <view class="article_left">
            <view class="article_title">{{ item.title }}</view>
            <view class="article_date">{{ item.created }}</view>
            <view class="article_other">
              <view class="browse">
                <image class="browse_icon" mode="aspectFill" src="/static/icon/ic_wz_kanguo@2x.png" />
                <view class="browse_number">{{ item.views_num }}</view>
              </view>

              <!--              <view class="browse" catchtap="fabulous">-->
              <!--                <image v-if="!item.like_status" class="browse_icon" mode="aspectFill" src="/static/icon/ic_wz_dianzan1@2x.png" />-->
              <!--                <image v-else class="browse_icon2" mode="aspectFill" src="/static/icon/ic_wz_dianzan2@2x.png" />-->
              <!--                <view class="browse_number">{{ item.likes_num }}</view>-->
              <!--              </view>-->

              <!--              <view class="browse" catchtap="follow">-->
              <!--                <image v-if="!item.follow_status" class="browse_icon" mode="aspectFill" src="/static/icon/ic_wz_guanzhu1@2x.png" />-->
              <!--                <image v-else class="browse_icon2" mode="aspectFill" src="/static/icon/ic_wz_guanzhu2@2x.png" />-->
              <!--              </view>-->
            </view>
          </view>
          <image class="article_img" mode="aspectFill" :src="item.img" />
        </view>
      </view>

      <LoadMore :status="articleList.status" />
    </view>
  </view>
</template>

<script>
import { getList, createList } from '@/utils/list'
import LoadMore from '@/components/LoadMore'

export default {
  components: { LoadMore },
  data() {
    return {
      articleTypeList: [],
      articleTypeId: 0,
      articleIdx: 0,

      articleDeepTypeList: [],
      articleDeepTypeId: 0,
      articleDeepIdx: 0,

      articleList: createList(),
      articleLoading: true,
      id: null,
      ifShare: true,
      is_fabulous: null, // 点赞
      is_follow: null, // 关注
    }
  },

  onLoad(query) {
    this.fetchArticleTypeData()
  },

  onReachBottom() {
    this.fetchArticleData()
  },

  methods: {
    async fetchArticleTypeData() {
      const { list } = await uni.$u.http.get('/api/app/articletype/list')
      this.articleTypeList = list
      if (list.length <= 0) return
      const firstId = list[0]?.id ?? 0
      this.fetchArticleDeepTypeData(firstId)
    },

    async fetchArticleDeepTypeData(id) {
      const url = `/api/backend/articletype/list?parent_id=${id}`
      const { list } = await uni.$u.http.get(url)
      this.articleDeepTypeList = list
      if (list.length <= 0) return this.fetchArticleData(id)
      this.articleDeepTypeId = list[0]?.id
      this.fetchArticleData(this.articleDeepTypeId)
    },

    async fetchArticleData(id) {
      this.articleLoading = true
      const articleTypeId = this.articleTypeId
      const articleDeepTypeId = this.articleDeepTypeId

      await getList(
        this,
        'articleList',
        [
          '/api/article/list',
          {
            article_type_id: id,
          },
        ],
        {
          abandon: () => articleTypeId !== this.articleTypeId || articleDeepTypeId !== this.articleDeepTypeId,
        }
      )
      this.articleLoading = false
    },

    async changeArticle(item, index) {
      if (this.articleIdx === index) return
      this.articleIdx = index
      this.articleTypeId = item.id
      this.articleDeepIdx = 0
      this.articleList = createList()
      this.fetchArticleDeepTypeData(this.articleTypeId)
    },

    async changeDeepArticle(item, index) {
      if (this.articleDeepIdx === index) return
      this.articleDeepIdx = index
      this.articleDeepTypeId = item.id
      this.articleList = createList()
      this.fetchArticleData(item.id)
    },

    onArticleClick(item, index) {
      uni.$u.route({ url: 'pages/article-detail/index', params: { id: item.id } })
    },
  },
}
</script>

<style scoped lang="scss">
@import 'index.scss';
</style>
