<template>
  <div>
    <div style="display: flex;align-items: flex-end;">
      <img src="@/assets/message/message.png" alt style="width: 26px;height: 26px;">
      <span style="font-size: 18px;font-weight: bold;color: #333333;line-height: 26px;margin-left:5px">{{ $t('notice.header') }}</span>
    </div>
    <div style="display: flex;align-items: flex-end;margin-top: 5px;">
      <div style="width: 75px;height: 4px;background: #396FFF;" />
      <div style="width: 75px;height: 1px;background: #FFF;border: 1px solid #ACACAC;" />
    </div>
    <div v-for="item in messageList" :key="item.id" style="margin-top: 30px;margin-left: 20px;font-size: 14px;">
      <div style="display: flex;justify-content: space-between;">
        <div style="display: flex;cursor: pointer;" @click="detail(item.id)">
          <img v-if="item.status==0" src="@/assets/message/close.png" alt style="width: 26px;height: 26px;">
          <img v-else src="@/assets/message/open.png" alt style="width: 26px;height: 26px;">
          <span style="font-size: 18px;font-weight: bold;color: #333333;line-height: 26px;margin-left:5px">{{ item['title'+apiLang] }}</span>
        </div>
        <div><span>{{ parseTime(item.createTime) }}</span></div>
      </div>
      <div style="margin-top: 20px;">
        <span v-html="item['content'+apiLang]">{{ item['content'+apiLang] }}</span>
      </div>
    </div>
    <pagination
      v-show="messageTotal > 0"
      :total="messageTotal"
      :page.sync="messageParams.page"
      :limit.sync="messageParams.rows"
      @pagination="getList"
    />
    <div style="text-align: center;margin-top: 30px;">
      <img src="@/assets/message/botton.png" alt object-fit="cover" style="width: 320px;height: 200px;">
    </div>
  </div>
</template>

<script>
import { getNoticeList } from '@/api/message'
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      parseTime,
      messageList: {},
      messageTotal: 0,
      // 查询参数
      messageParams: {
        page: 1,
        rows: 10,
        titleZh: null,
        titleEn: null,
        sort: null,
        status: null
      },
      notTatal: 0,
      status: [],
      apiLang: '',
      langData: { zh_CN: '', en_US: 'En' }
    }
  },
  computed: {
    language: {
      get() {
        return this.$store.getters.language
      },
      set(val) {
        this.$i18n.locale = val
        this.$store.dispatch('app/setLanguage', val)
      }
    }
  },
  watch: {
    language() {
      this.apiLang = this.langData[this.language]
    }
  },
  created() {
    this.apiLang = this.langData[this.language]
    this.getList()
  },
  methods: {
    getList() {
      getNoticeList(this.messageParams).then(r => {
        this.messageList = r.data.list
        this.messageTotal = r.data.total
      })
    },
    detail(val) {
      this.$router.push('/jiedao/jd-notice/jd-noticedetail?id=' + val)
    }
  }
}
</script>

<style>

</style>
