<template>
  <a-modal
    title="库内消息"
    :visible="visible"
    :footer="null"
    :width="1200"
    @cancel="handleCancel">
    <div class="table-page-search-wrapper" style="margin-bottom: 15px;">
      <a-input v-model="msgContent" @keyup.enter.native="initData" placeholder="请输入消息内容" clearable style="width: 200px;margin-right: 10px;"/>
      <a-button type="primary" @click="initData">查询</a-button>
      <a-button style="margin-left: 5px;" @click="reset">重置</a-button>
    </div>
    <a-table rowKey="msgId" bordered :rowClassName="rowClassName" :data-source="data" :columns="columns" :pagination="ipagination" @change="handleTableChange"/>
  </a-modal>
</template>
<script>
import { postAction, getAction } from '@/api/manage'
export default {
  data() {
    return {
      visible: false,
      url: '/bigSunmmary/getMessageDetail',
      ipagination:{
        current: 1,
        pageSize: 4,
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        total: 0
      },
      msgContent: '',
      data: [],
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 70,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '消息类型',
          dataIndex: 'msgTitle'
        },
        {
          title: '推送内容',
          dataIndex: 'msgContent',
        },
        {
          title: '推送时间',
          dataIndex: 'sendTime',
        },
      ],
    };
  },
  methods: {
    rowClassName (record, index) {
      let className = "light-row";
      if (index % 2 === 1) className = "dark-row"
      if (record === this.activeWarehouse) className += " table_active"
      if (record === this.activeGoods) className += " table_active"
      return className
    },
    reset() {
      this.msgContent = undefined
      this.initData()
    },
    initData() {
      var params = {}
      params.pageNo = this.ipagination.current;
      params.pageSize = this.ipagination.pageSize;
      params.msgContent = this.msgContent
      getAction(this.url, params).then(res => {
        this.data = res.data.records;
        this.ipagination.total = res.data.totalRows - 0;
      })
    },
    handleCancel(e) {
      this.visible = false;
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      this.initData();
    },
  },
};
</script>


<style>
.light-row {
  background-color: #fff;
}
.dark-row {
  background-color: #fafafa;
}
/* table选中样式 */
.table_active {
  background-color: #e6f7ff;
}
</style>
