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

<script>
import cAction from '@action'

export default {
  name: 'HeaderNews',
  data() {
    return {
      loading: false,
      listData: [],
      params: { page: 1, per_page: 1, project_id: 1021 }
    }
  },
  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: {
    handleClick(item) {
      this.$router.push({ name: 'details-recent-news', params: { id: item.id } })
    },
    fetchList() {
      this.loading = true
      cAction.News.newsList(this.params)
        .then(data => {
          this.listData = data
          this.loading = false
        })
        .catch(e => {
          this.loading = false
        })
    }
  },
  mounted() {
    this.fetchList()
  }
}
</script>

<style lang="scss" scoped>
.header-news {
  height: 40px;
  background: #005596;
  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>
