<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>
    <view class="line"></view>
    <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,
      articleList: createList(),
      articleIdx: 0,
      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;
      this.articleTypeId = list[0]?.id ?? 0;
      this.fetchArticleData();
    },

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

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

    async changeArticle(item, index) {
      if (this.articleIdx === index) return;
      this.articleIdx = index;
      this.articleTypeId = item.id;
      this.articleList = createList();
      this.fetchArticleData();
    },

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

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