<template>
  <div class="page" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <van-sticky class="sticky">
      <div class="header">
        <div class="back">
          <backIcon/>
        </div>
        {{ category }}
      </div>
    </van-sticky>
    <!-- 没有更多了 -->
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="list.length ? $t('common.l5') : ''"
      @load="onLoad"
    >
      <div class="item flex" v-for="item in list" :key="item.id" @click="toDetail(item)">
        <img class="img" v-if="categoryInfo.img" :src="categoryInfo.img" alt="极度证券">
        <div class="right">
          <div class="title">{{ item.title }}</div>
          <div class="time" v-if="item.created_at">{{ $parseTime(item.created_at, '{d}/{m}/{y}') }}</div>
        </div>
      </div>
    </van-list>
    <!-- 暂无消息 -->
    <NoData v-if="!loading && list.length == 0" :title="$t('inform.l23')"/>
    <van-popup v-model="detailPop" :style="{ width: '324px' }">
      <detailPop v-if="detailPop" @cancel="detailPop = false" :targetData="targetData" :symbolList="symbolList" />
    </van-popup>
  </div>
</template>
<script>
import { getCmsNewsList, getCmsCategoryList } from "@/api/notice";
import bus from '@/utils/bus'
import detailPop from "./components/detailPop.vue";
export default {
  components: {
    detailPop
  },
  data () {
    return {
      loading: false,
      finished: false,
      pageNum: 0,
      pageSize: 15,
      category: '',
      categoryId: '',
      categoryInfo: {},
      list: [],
      symbolList: [],
      detailPop: false,
      targetData: {}
    }
  },
  created () {
    this.categoryId = this.$route.params.category || ''
    this.category = this.$route.query.category || ''
    this.getCmsCategoryList()
  },
  methods: {
    onLoad() {
      this.pageNum += 1;
      getCmsNewsList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        category: this.categoryId
      }).then((res) => {
        var list = res.list || []
        list.forEach(item => {
          item.extras = item.extras ? JSON.parse(item.extras) : null
          item.created_at = new Date(item.created_at.replace(new RegExp(/-/gm), "/")).getTime()
        })
        if (this.pageNum == 1) {
          this.list = list
        } else {
          this.list = this.list.concat(list)
        }
        this.loading = false;
        if (this.list.length >= res.total) {
          this.finished = true;
        }
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      })
    },
    getCmsCategoryList() {
      this.fullscreenLoading = true
      getCmsCategoryList({
        category: this.category
      }).then(res => {
        var list = res.list || []
        this.categoryInfo = list[0] || {}
      }).catch(() => {
      }).finally(() => {
        this.fullscreenLoading = false
      })
    },
    toDetail(item) {
      if (item.extras) {
        var data = item.extras.data || {}
        if (this.language != 'zh-CN' && (item.extras.data_en && item.extras.data_en.title)) {
          data = item.extras.data_en
        }
        if (this.language == 'zh-TW' && (item.extras.data_tw && item.extras.data_tw.title)) {
          data = item.extras.data_tw
        }
        if (data.product && data.product[0]) {
          this.symbolList = data.product.map(item => item.symbol)
          bus.$emit("alterProductData", {
            getData: this.symbolList,
            subscribeList: this.symbolList,
          });
        }
        this.targetData = data
        this.detailPop = true
        return
      }
      this.$router.push(`/notice-detail/${item.id}`)
    }
  }
}
</script>
<style lang="less" scoped>
.header {
  position: relative;
  font-size: 18px;
  font-weight: 600;
  padding: 15px 9px 17px;
  background-color: var(--bg-);
  text-align: center;
  .back {
    position: absolute;
    top: 11px;
    left: 9px;
  }
}
.van-list {
  padding: 4px 17px;
}
.item {
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #EAEAEA;
  padding: 10px 28px 10px 7px;
  &+.item {
    margin-top: 10px;
  }
  .img {
    width: 46px;
  }
  .right {
    flex: 1;
    min-width: 10%;
    padding-left: 7px;
  }
  .title {
    font-size: 16px;
    line-height: 22px;
  }
  .time {
    margin-top: 8px;
    font-size: 12px;
    color: #737474;
  }
}
</style>