<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" @click="onGetAddress">-->
        <!--          <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 autoplay :interval="2e3">
          <swiper-item v-for="(item, index) in bannerList" :key="item.id" class="banner-item" @click="onBannerClick(item, index)">
            <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" autoplay :interval="1500" style="height: 100%">
          <swiper-item v-for="(item, index) in noticeList" :key="item.id" :catchtouchmove="false">
            <view class="notice-box">
              <view style="font-size: 28rpx; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 40rpx">
                {{ item.content }}
              </view>
              <view class="notice-right">
                <image mode="aspectFill" class="notice-right-icon" src="/static/icon/ic_jifen@2x.png" />
                <view class="notice-right-number">{{ getPrice(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-if="articleDeepTypeList.length > 0" class="article-list">
          <view class="article-item" v-for="(item, index) in articleDeepTypeList" :key="item.id" @click="onArticleDeepTypeClick(item, index)">
            <view :class="[articleDeepTypeAction === index ? 'article-item-name--action' : 'article-item-name--none']">{{ item.name }}</view>
            <view :class="[articleDeepTypeAction === 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,

      articleDeepTypeList: [],
      articleDeepTypeAction: 0,
      articleDeepTypeId: 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
      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) {
      const { list } = await uni.$u.http.get('/api/article/list', {
        params: {
          article_type_id: id,
        },
      })
      this.articleList = list
    },

    selectAddress() {
      console.log('获取位置')
      console.log('中国制造')
    },

    onArticleTypeClick(item, index) {
      if (this.articleTypeAction === index) return
      this.articleTypeAction = index
      this.articleTypeId = item.id
      this.articleDeepTypeAction = 0
      this.fetchArticleDeepTypeData(item.id)
    },

    onArticleDeepTypeClick(item, index) {
      if (this.articleDeepTypeAction === index) return
      this.articleDeepTypeAction = index
      this.articleDeepTypeId = item.id
      this.fetchArticleData(item.id)
    },

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

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

    onGetAddress() {
      uni.chooseLocation({
        success: (result) => {
          this.address = result.address
        },
      })
    },

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

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