<template>
  <view>
    <view class="article_box">
      <view class="article_list">
        <view class="article_item" v-for="(item, index) in articleSort" @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="!articleList.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" :key="item.index" style="width: 100%">
        <navigator hover-class="none" url="/package-one/article-detail/article-detail?id=item.id" />
        <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>
    </view>
  </view>
</template>

<script>
import { articleSort, articleList } from '@/pages/article-list/mock';

export default {
  data() {
    return {
      articleSort,
      articleList,
      articleIdx: 0,
      id: null,
      ifShare: true,
      is_fabulous: null, // 点赞
      is_follow: null, // 关注
    };
  },
  methods: {
    async changeArticle(item, index) {
      if (this.articleIdx === index) return;
      this.articleIdx = index;
    },
  },
};
</script>

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