<template>
  <div class="tab">
    <span v-for="(item, index) in listData" :key="index" @click="details(item)">
      {{ item.created_time | formatDate(item.created_time) }}
      {{ item.title }}
    </span>
  </div>
</template>

<script>
import cAction from '@action'

export default {
  name: 'tab',
  data() {
    return {
      isloading: false,
      listData: [],
      quiuse: {
        page: 1,
        per_page: 1,
        project_id: 1005
      }
    }
  },
  filters: {
    formatDate(data) {
      const date = new Date(data.replace(/-/g, '/'))
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return m + '.' + d + ''
    }
  },
  methods: {
    details(item) {
      this.$router.push({
        name: 'details-recent-news',
        params: { id: item.id }
      })
    },
    setDate() {
      this.isloading = true
      cAction.News.newsList(this.quiuse)
        .then(data => {
          this.listData = data.map(k => {
            k.hover = false
            return k
          })
          this.isloading = false
        })
        .catch(e => {
          this.isloading = false
          console.log(e)
        })
    }
  },
  created() {
    this.setDate()
  }
}
</script>

<style lang="scss" scoped>
.tab {
  height: 40px;
  background: #af1b40;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: 14px;
  justify-content: center;
  span {
    cursor: pointer;
  }
}
</style>
