<template>
  <div class="page">
    <van-sticky class="sticky">
      <div class="header">
        <div class="back">
          <backIcon/>
        </div>
        <!-- 公告中心 -->
        {{ $t('tab.tab14') }}
      </div>
    </van-sticky>
    <div class="list">
      <div class="item flex" v-for="(item) in list" :key="item.id" @click="toDetail(item)">
        <img class="img" v-if="item.img" :src="item.img" alt="极度证券">
        <div class="right">
          <div class="top flex">
            <div class="left flex">
              <div class="title">{{ item.category }}</div>
              <div class="radius" v-if="item.unreade_count && (item.type == 4 || item.type == 5 || item.type == 6)">{{ item.unreade_count > 99 ? '99+': item.unreade_count }}</div>
            </div>
            <div class="time" v-if="item.created_at">{{ $parseTime(item.created_at, '{d}/{m}/{y}') }}</div>
          </div>
          <div class="text" v-if="item.type == 5">{{ actionTitle[item.action] }}</div>
          <div class="text" v-else>{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCmsCategoryList } from "@/api/notice";
export default {
  data () {
    return {
      list: [],
      actionTitle: {
        'Login': this.$t('inform.l10'),
        'withdrawCash': this.$t('inform.l24'),
        'closePosition': this.$t('inform.l4'),
        'openPosition': this.$t('inform.l4'),
        'updatePosition': this.$t('inform.l4'),
        'deleteEntrust': this.$t('inform.l4'),
        'openEntrust': this.$t('inform.l4'),
        'updateEntrust': this.$t('inform.l4'),
        'realUser': this.$t('inform.l25'),
        'TransactionToCash': this.$t('inform.l26'),
        'CashToTransaction': this.$t('inform.l26'),
        'CashToFollow': this.$t('inform.l26'),
        'FollowToCash': this.$t('inform.l26'),
        'UserExchange': this.$t('account.l8'),
        'depositCash': this.$t('inform.l27'),
        'updateNickName': this.$t('setting.ti1'),
        'insertCollectionAccount': this.$t('inform.l57'),
        'deleteCollectionAccount': this.$t('inform.l58'),
      }
    }
  },
  activated () {
    this.getCmsCategoryList()
  },
  created () {
    this.getCmsCategoryList()
  },
  methods: {
    getCmsCategoryList() {
      if (this.fullscreenLoading) {
        return
      }
      this.fullscreenLoading = true
      getCmsCategoryList({
        language: this.language
      }).then(res => {
        var categoryList = (res.list || []).filter(item => item.newsList && item.newsList.length);
        var list = [];
        categoryList.forEach(item => {
          item.newsList.forEach(li => {
            list.push({
              ...li,
              img: item.img,
              type: item.type,
              unreade_count: item.unreade_count,
              category: item.category,
              categoryId: item.id,
              created_at:  li.created_at ? new Date(li.created_at.replace(new RegExp(/-/gm), "/")).getTime() : (li.time || '')
            })
          })
        })
        this.list = list.sort((a, b) => b.created_at - a.created_at)
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false
      })
    },
    toDetail(item) {
      if (item.type == 5) {
        this.$router.push('/inform')
        return
      }
      this.$router.push(`/notice-list/${item.categoryId}?category=${item.category}`)
    }
  }
}
</script>
<style lang="less" scoped>
.sticky {
  background-color: var(--bg-);
}
.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;
  }
}
.list {
  padding: 4px 17px;
}
.item {
  border-radius: 8px;
  border: 1px solid #EAEAEA;
  padding: 6px;
  margin-bottom: 10px;
  min-height: 60px;
  align-items: flex-start;
  cursor: pointer;
  .img {
    width: 46px;
    margin-right: 7px;
  }
  .right {
    flex: 1;
    min-width: 10%;
    padding-top: 1px;
  }
  .top {
    justify-content: space-between;
    margin-bottom: 5px;
  }
  .left {
    flex: 1;
    min-width: 10%;
  }
  .title {
    font-size: 16px;
    line-height: 22px;
    min-width: 1%;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 4px;
  }
  .radius {
    border-radius: 999px;
    line-height: 17px;
    background-color: #F64747;
    text-align: center;
    font-size: 12px;
    color: #FFFFFF;
    min-width: 17px;
    padding: 0 5px;
  }
  .time {
    font-size: 11px;
    opacity: 0.37;
  }
  .text {
    color: #737474;
    font-size: 12px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>