<template>
  <div>
    <el-dialog title="已发消息" :visible.sync="msgHistoryDialog" @open="dialogOpen" class="message-history-dialog">
      <el-table :data="msgHistoryTable" ref="datatable" :data-read-url="getData" :page-size="10" tooltip-effect="dark" highlight-current-row @selection-change="msgHistorySelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column width="55" align="center">
          <template slot-scope="scope">
            <i class="fa fa-envelope-o" aria-hidden="true"></i>
          </template>
        </el-table-column>
        <el-table-column prop="subject" show-overflow-tooltip min-width="50%" label="标题"></el-table-column>
        <el-table-column prop="toUser" show-overflow-tooltip min-width="20%" label="接收人"></el-table-column>
        <el-table-column prop="addTime" show-overflow-tooltip min-width="30%" label="发送时间">
          <template slot-scope="scope">
            {{scope.row.addTime | fixDateTime}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="right" min-width="15%">
          <template slot-scope="scope">
            <el-button @click.stop="lookMsgHistoryDetail(scope.row)" type="text" title="查看">
              <i class="fa fa-search f16"></i></el-button>
            <el-button @click.stop="deleteClick(scope.row)" type="text" title="删除">
              <i class="fa fa-remove f16"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="msgHistoryDialog = false" type="primary">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 双击查看消息详情 -->
    <msgdetail-dialog :showLookMessageShow.sync="showLookMessageShow" :tmpMessageDetail="tmpMessageDetail" :userType="userType"></msgdetail-dialog>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import messageDetail from './messageDetailDialog.vue'
export default {
  filters: {
    fixDateTime: function(val) {
      if (!val) {
        return ''
      }
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      sortField: 'addTime',
      selectedRows: [],
      msgHistoryTable: [],
      showLookMessageShow: false,
      tmpMessageDetail: {
        toUser: '',
        fromUser: '',
        addTime: '',
        subject: '',
        content: ''
      },
      userType: 'FromUser'
    }
  },
  computed: {
    msgHistoryDialog: {
      get() {
        return this.msgHistoryShow
      },
      set(val) {
        this.$emit('update:msgHistoryShow', val)
      }
    }
  },
  components: {
    'msgdetail-dialog': messageDetail
  },
  methods: {
    dialogOpen() {
      this.$nextTick(() => {
        this.getMsgHistoryData()
      })
    },
    // 当前行
    msgHistorySelectionChange(selection) {
      this.selectedRows = selection
    },
    getData() {
      return [
        '/ui/message/sendlist', {
          params: {
            sortField: this.sortField
          }
        }]
    },
    // 已发消息列表数据
    getMsgHistoryData() {
      this.$refs.datatable.getData()
    },
    // 查看已发消息
    lookMsgHistoryDetail(row) {
      this.showLookMessageShow = true
      this.tmpMessageDetail = Object.assign({}, row)
    },
    // 已发消息删除事件
    async deleteClick(data) {
      try {
        await this.$confirm('确认删除所选的消息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let isArray = Array.isArray(data)
        let rowIds = isArray ? util.getSelectedIDs(data) : [data.ID]
        let res = await axios.delete(`/ui/message/${rowIds}?userType=${this.userType}`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.getMsgHistoryData()
        }
      } catch (e) {

      }
    }
  },
  props: ['msgHistoryShow']
}
</script>
<style>
/* 在一般情况下dialog宽为800像素，在逻辑分辨率480像素以下dialog宽为96% */
.message-history-dialog .el-dialog {
  width: 800px;
}
@media (max-width: 480px) {
  .message-history-dialog .el-dialog {
    width: 96%;
  }
}
</style>
