<!--
  @description: 全部消息
  @Modifier: wy
  @routerPath:
  @date: 2022-1-4 17:10
-->
<template>
  <div class="all-message">
    <message-table :table-data="tableData" />
    <!--  分页组件  -->
    <pagination :pagination-data="paginationData" @change="getMessageList" />
  </div>
</template>

<script>
/* 方法 */
import { ListMixin } from '@/mixins/ListMixin'// 分页
/* 组件 */
// import messageTable from './components/messageTable'
import pagination from '@/components/common/pagination/pagination'// 分页
export default {
  name: 'AllMessage',
  components: {
    // messageTable,
    pagination
  },
  mixins: [ListMixin],
  data() {
    return {
      tableData: [
        {
          themaName: '您的包裹已成功取出，运单编号：YT5345678567895',
          time: '2022-1-5',
          id: '111',
          type: '0'
        },
        {
          themaName: '您的包裹已成功取出，运单编号：YT5345678567896',
          time: '2022-1-4',
          id: '222',
          type: '1'
        },
        {
          themaName: '您的包裹已成功取出，运单编号：YT5345678567897',
          time: '2022-1-4',
          id: '333',
          type: '2'
        },
        {
          themaName: '您的包裹已成功取出，运单编号：YT5345678567898',
          time: '2022-1-4',
          id: '444',
          type: '3'
        }
      ]
    }
  },
  mounted() {
    // 初始化列表
    this.init()
  },
  methods: {
    // 进入页面时初始化数据
    init() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.getMessageList()
    },
    getMessageList() {
      // 获取消息列表
    }
  }
}
</script>

<style scoped lang="less">
.all-message {
  .inline-column-table {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .iconImg {
      display: flex;
      width: 50px;
      height: 50px;
      justify-content: center;
      align-items: center;
      background-color: #dadada;
      border-radius: 50%;
      margin-right: 20px;
      margin-left: 30px;

      img {
        width: 25px;
        height: 25px;
      }
    }
    .iconImg1 {
      background-color: #9fdd39;
    }
    .iconImg2 {
      background-color: #f9b72c;
    }
  }
}
</style>
