<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('message.title') }}</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 style="display: flex;margin-top: 20px;">
      <span style="font-size: 14;font-weight: 400;color: #999;">{{ $t('message.notTatal1') }} <span style="color: #B62222;">{{ notTatal }}</span> {{ $t('message.notTatal2') }}</span>
      <div style="margin-left: 20px;">
        <el-checkbox-group v-model="status" @change="changeStatus">
          <el-checkbox :label="1">{{ $t('message.read') }}</el-checkbox>
          <el-checkbox :label="0">{{ $t('message.unread') }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </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 }}</span>
        </div>
        <div><span>{{ parseTime(item.createTime) }}</span></div>
      </div>
      <div style="margin-top: 20px;">
        <span>{{ item.content.length>10?item.content.slice(0,60)+'......':item.content }}</span>
      </div>
    </div>
    <pagination
      v-show="messageTotal > 0"
      :total="messageTotal"
      :page.sync="messageParams.page"
      :limit.sync="messageParams.rows"
      @pagination="getList"
    />
    <div v-if="messageList.length == 0" 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 { getMessageList, getNotReadInternalMessageTotal } 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: []
    }
  },
  created() {
    this.getList()
    getNotReadInternalMessageTotal().then(r => {
      this.notTatal = r.data
    })
  },
  methods: {
    getList() {
      getMessageList(this.messageParams).then(r => {
        this.messageList = r.data.list
        this.messageTotal = r.data.total
      })
    },
    changeStatus(val) {
      if (val.length === 1) {
        this.messageParams.status = val[0]
      } else {
        this.messageParams.status = null
      }
      this.getList()
    },
    detail(val) {
      this.$router.push('/jiedao/jd-message/jd-messagedetail?id=' + val)
    }
  }
}
</script>

<style>

</style>
