<!--
  @description: 消息中心
  @Modifier: haoFx
  @routerPath: /userMessage/userMessage-list
  @date: 2019/10/25-17:52
-->
<template>
  <div>
    <table-crud
      ref="tableCrud"
      :search-form="searchForm"
      :tabs="tabs"
      @on-load="loadData"
    >
      <template v-slot:header>
        消息中心
      </template>
      <template v-slot:search="search">
        <!--标题-->
        <el-form-item label="标题">
          <el-input
            v-model.trim="searchForm.title"
            placeholder="标题"
            @keyup.enter.native="onSearch"
          />
        </el-form-item>
        <!--发送人-->
        <el-form-item label="发送人">
          <el-select
            v-model="searchForm.mailSourceType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in mailSourceTypeList"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
        <!--发送时间-->
        <el-form-item ref="date" label="发送时间 " prop="date">
          <el-date-picker
            v-model="createTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="createTimeChange"
          />
        </el-form-item>
        <!-- 状态 -->
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.purchaseOrganization"
            placeholder="请选择"
          >
            <el-option
              v-for="item in messageListStatus"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
      </template>
      <template v-slot:GXTable>
        <el-table :data="tableData">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60"
          />
          <el-table-column
            prop="title"
            label="标题"
            header-align="center"
            align="left"
            min-width="230"
          />
          <el-table-column
            label="类型"
            header-align="center"
            align="center"
            min-width="80"
          >
            <template slot-scope="scope">
              {{ filterDictText(messageTypStatus, scope.row.mailType) }}
            </template>
          </el-table-column>
          <el-table-column
            label="发送人"
            header-align="center"
            align="center"
            min-width="80"
          >
            <template slot-scope="scope">
              {{ filterDictText(mailSourceTypeList, scope.row.mailSourceType) }}
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            label="发送时间"
            align="center"
            width="180"
          >
            <template slot-scope="scope">
              {{ scope.row.createTime&&$Moment(scope.row.createTime).format(momentSaveFormat) }}
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            header-align="center"
            align="center"
            min-width="80"
          >
            <template slot-scope="scope">
              {{ filterDictText(messageListStatus, scope.row.viewState) }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="80"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click.stop="messageDetail(scope.row)">
                [查看]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </table-crud>
    <!-- 查看消息记录弹框 -->
    <userMessageDialog ref="userMessage" />
  </div>
</template>
<script>
/* 接口*/
import { getMailToastList } from '@api/common/desk'
/* 公用方法*/
import { filterDictText } from '@/assets/js/utils'// 常用方法
/* 混合开发 */
import { userMessageGrounpMixin } from './mixins/userMessageGrounpMixin' // 字典信息
// 组件
import userMessageDialog from './userMessage-dialog' // 查看消息详情弹框
export default {
  name: 'UserMessageList',
  components: {
    userMessageDialog
  },
  mixins: [userMessageGrounpMixin],
  data() {
    return {
      // tab切换
      tabs: [
        { name: '未查看', code: '00' },
        { name: '全部', code: '' }
      ],
      loading: true,
      createTime: '', // 发送时间-前端处理
      searchForm: {
        title: '', // 标题
        createTimeBegin: '', // 发送开始时间
        createTimeEnd: '', // 发送结束时间
        mailSourceType: '', // 消息来源(发送人)01系统消息 02采购方
        viewState: '00' //  00未查看  nul/空 全部 01 已查看
      },
      tableData: []
    }
  },
  methods: {
    filterDictText, // 字典值替换文本通用方法
    // 发送时间选择
    createTimeChange(val) {
      this.searchForm.createTimeBegin = val[0]// 开始日期
      this.searchForm.createTimeEnd = val[1]// 结束日期
    },
    // 获取数据
    loadData(params, callback, tab) {
      params.viewState = tab.code // 00未查看  nul/空 全部 01 已查看
      getMailToastList(params).then((res) => {
        // 获取消息数据
        this.tableData = res.data.records
        callback(res.data.total)
      }).catch(() => {
        this.loading = false
      })
    },
    // 查看消息
    messageDetail(row) {
      // 打开消息弹框
      this.$refs.userMessage.open(row.id)
    }
  }
}
</script>
<style lang="less" scoped>

</style>
