<template>
  <view class="app-container">
    <HeaderBar :title="title" text-align="center" enable-back/>

    <view class="article-list">
      <view v-if="articleList.length > 0">
        <view
          v-for="item in articleList"
          :key="item.id"
          class="article-item"
          @click="goToDetail(item)"
        >
          <view class="article-title">{{ item.title }}</view>
          <view class="article-time">{{ item.createTime | dv }}</view>
        </view>
      </view>
      <view v-else class="no-data">
        <u-empty mode="data" text="暂无数据"></u-empty>
      </view>
    </view>
  </view>
</template>

<script>
import HeaderBar from '@/components/HeaderBar.vue'
import { appGetArticleList } from '@/api/app/article'
export default {
  components: {
    HeaderBar
  },
  data() {
    return {
      articleList: [],
      queryParams: {
        type: '2' // 帮助中心文章类型
      }
    }
  },
  computed: {
    title() {
      switch(this.queryParams.type) {
        case '2':
          return '帮助中心'
        case '1':
          return '通知公告'
        default:
          return '帮助中心'
      }
    }
  },
  onLoad(options) {
    if (options) {
      Object.assign(this.queryParams, options)
    }
  },
  onShow() {
    this.getArticleList()
  },
  methods: {
    getArticleList() {
      appGetArticleList(this.queryParams).then(res => {
        if (res.code === 200) {
          this.articleList = res.data
        }
      })
    },
    goToDetail(item) {
      uni.navigateTo({
        url: `/pages/article/detail?id=${item.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.article-list {
  padding: 20rpx;

  .article-item {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .article-title {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
    }

    .article-time {
      font-size: 24rpx;
      color: #999;
    }
  }

  .no-data {
    padding: 100rpx 0;
  }
}
</style>