<template>
  <view>
    <view class="wrapper">
      <view style="height: 256rpx" />
      <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">
          <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" bindtap="articleMore">查看更多</view>
      </view>

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

<script>
import { articleList, articleTypeList, bannerList, noticeList } from '@/pages/index/mock';

export default {
  data() {
    return {
      address: '获取位置',
      bannerList,
      noticeList,
      articleTypeList,
      articleTypeAction: 0,
      articleList,
    };
  },
  onLoad(query) {},
  methods: {
    selectAddress() {
      console.log('获取位置');
    },

    onArticleTypeClick(item, index) {
      if (this.articleTypeAction === index) return;
      this.articleTypeAction = index;
    },
  },
};
</script>

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