<template>
  <view>
    <view class="wrapper">
      <!--      <view style="height: 256rpx" />-->
      <view style="height: 28rpx" />
      <view style="display: flex; justify-content: space-between; align-items: center; padding: 0 30rpx">
        <image class="logo" mode="widthFix" src="/static/text_sy_tit@2x.png" />
        <view class="address">
          <view class="address-text">{{ address }}</view>
          <image class="address-icon" mode="widthFix" src="/static/icon/ic_dizhi@2x.png" />
        </view>
      </view>

      <view style="height: 32rpx" />
      <view class="banner">
        <swiper class="banner-list" indicator-dots>
          <swiper-item v-for="(item, index) in bannerList" :key="item.id" class="banner-item">
            <image class="banner-img" mode="aspectFill" :src="item.img" />
          </swiper-item>
        </swiper>
      </view>

      <!-- 公告 -->
      <view style="height: 30rpx" />
      <view class="notice">
        <swiper display-multiple-items="3" :autoplay="false" :vertical="true" :circular="true" style="height: 100%">
          <swiper-item v-for="(item, index) in noticeList" :key="item.id" :catchtouchmove="false">
            <view class="notice-box">
              <view class="notice-content">{{ item.content }}</view>
              <view class="notice-right">
                <image mode="aspectFill" class="notice-right-icon" src="/static/icon/ic_jifen_zuo@2x.png" />
                <view class="notice-right-number">{{ item.get_points }}</view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>

      <view style="background-color: #f6f6f6; width: 100%; height: 20rpx" />
      <view class="article">
        <view class="article-list">
          <view class="article-item" v-for="(item, index) in articleTypeList" :key="item.id" @click="onArticleTypeClick(item, index)">
            <view :class="[articleTypeAction === index ? 'article-item-name--action' : 'article-item-name--none']">{{ item.name }}</view>
            <view :class="[articleTypeAction === index ? 'article-task-line--action' : 'article-task-line--none']" />
          </view>
        </view>
        <view v-for="(item, index) in articleList" :key="item.id" @click="onArticleClick(item, index)">
          <view v-if="index < 3" class="article-content">
            <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-icon-2" 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-icon-2" mode="aspectFill" src="/static/icon/ic_wz_guanzhu2@2x.png" />
                </view>
              </view>
            </view>
            <image class="article-img" mode="aspectFill" :src="item.img" />
            <!--              <navigator hover-class="none" class="article_container" url="/package-one/article-detail/article-detail?id={{item.id}}"> </navigator>-->
          </view>
        </view>
        <view class="look_more" @click="articleMore">查看更多</view>
      </view>

      <view style="background-color: #f6f6f6; width: 100%; height: 20rpx" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      address: '获取位置',
      bannerList: [],
      noticeList: [],
      articleTypeList: [],
      articleTypeAction: 0,
      articleTypeId: 0,
      articleList: [],
    };
  },

  onLoad(query) {
    this.fetchBannerData();
    this.fetchNoticeData();
    this.fetchArticleTypeData();
  },

  methods: {
    async fetchBannerData() {
      const { list } = await uni.$u.http.get('/api/app/banner/list');
      this.bannerList = list;
    },

    async fetchNoticeData() {
      const { list } = await uni.$u.http.get('/api/app/notice/list');
      this.noticeList = list;
    },

    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() {
      const { list } = await uni.$u.http.get('/api/article/list', {
        params: {
          article_type_id: this.articleTypeId,
        },
      });
      this.articleList = list;
    },

    selectAddress() {
      console.log('获取位置');
    },

    onArticleTypeClick(item, index) {
      if (this.articleTypeAction === index) return;
      this.articleTypeAction = index;
      this.articleTypeId = item.id;
      this.fetchArticleData();
    },

    articleMore() {
      uni.$u.route({ url: 'pages/article-list/index' });
    },

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

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