<template>
  <div>
    <el-dialog title="短消息列表" :visible.sync="messageDialog" @open="dialogOpen" class="short-message-dialog">
      <el-toolbar>
        <el-button @click="addMessageClick"><i class="fa fa-plus"></i>新建</el-button>
        <!-- <el-button :disabled="selectedRows.length ===0 || selectedRows[0].fromUser === 'SYSTEM'" @click="replyMessageClick"><i class="fa fa-edit"></i>回复</el-button> -->
        <!-- <el-button :disabled="selectedRows.length === 0" @click="deleteMessageClick(selectedRows)"><i class="fa fa-remove"></i>删除</el-button>
        <el-button :disabled="selectedRows.length === 0" @click="markReadClick(selectedRows)"><i class="fa fa-bookmark"></i>标记为已读</el-button> -->
        <el-button @click="sendMessageClick"><i class="fa fa-send" aria-hidden="true"></i>已发消息</el-button>
      </el-toolbar>
        <el-table ref="messageTable" :data-read-url="getData" :page-size="10" tooltip-effect="dark" highlight-current-row @selection-change="messageSelectionChange">
          <el-table-column type="selection" width="45"></el-table-column>
          <el-table-column show-overflow-tooltip width="45">
            <template slot-scope="scope">
              <i :class="scope.row.readFlag ? 'fa fa-envelope-open-o' : 'fa fa-envelope'"></i>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="标题">
            <template slot-scope="scope">
              <span v-html="scope.row.subject" class="subject-div"></span>
            </template>
          </el-table-column>
          <el-table-column prop="fromUser" show-overflow-tooltip width="100" label="发送人"></el-table-column>
          <el-table-column prop="addTime" show-overflow-tooltip width="160" label="发送时间">
            <template slot-scope="scope">
               {{scope.row.addTime | fixDateTime}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="right" width="140">
            <template slot-scope="scope">
              <el-button @click.stop="edit(scope.row)" type="text" title="编辑" v-show="scope.row.redirectURL !== '' && scope.row.redirectURL !== null">
                <i class="fa fa-edit f16"></i></el-button>
              <el-button @click.stop="markReadClick(scope.row)" type="text" title="标记为已读">
                <i class="fa fa-bookmark f16"></i></el-button>
              <el-button @click.stop="lookMessage(scope.row)" type="text" title="查看">
                <i class="fa fa-search f16"></i></el-button>
              <el-button @click.stop="replyMessageClick(scope.row)" type="text" title="回复" v-show="scope.row.fromUser !== 'SYSTEM'">
                <i class="fa fa-reply f16"></i></el-button>
              <el-button @click.stop="deleteMessageClick(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="messageDialog = false" type="primary">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 新建消息dialog -->
    <msgadd-dialog :messageAddShow.sync="messageAddShow" @callback="getMessageData"></msgadd-dialog>
    <!-- 回复 -->
    <msgreply-dialog :messageReplyShow.sync="messageReplyShow" :tmpMessage="tmpMessageReply"></msgreply-dialog>
    <!-- 已发消息 -->
    <msghistory-dialog :msgHistoryShow.sync="msgHistoryShow"></msghistory-dialog>
    <!-- 双击查看消息详情 -->
    <msgdetail-dialog :showLookMessageShow.sync="showLookMessageShow" :tmpMessageDetail="tmpMessageDetail" :userType="userType"></msgdetail-dialog>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import message from './messageDialog.vue'
import messageReply from './messageReplyDialog.vue'
import messageHistory from './messageHistory.vue'
import messageDetail from './messageDetailDialog.vue'
export default {
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      sortField: 'addTime',
      selectedRows: [], // 消息列表当前行
      messageAddShow: false, // 新建消息dialog显示状态
      messageReplyShow: false, // 回复dialog显示状态
      msgHistoryShow: false, // 已发消息dialog显示状态
      showLookMessageShow: false,
      tmpMessageDetail: {
        toUser: '',
        fromUser: '',
        addTime: '',
        subject: '',
        content: ''
      },
      userType: 'FromUser',
      tmpMessageReply: {
        toUser: '',
        subject: '',
        content: ''
      }
    }
  },
  computed: {
    messageDialog: {
      get() {
        return this.messageShow
      },
      set(val) {
        this.$emit('update:messageShow', val)
      }
    }
  },
  components: {
    'msgadd-dialog': message,
    'msgreply-dialog': messageReply,
    'msghistory-dialog': messageHistory,
    'msgdetail-dialog': messageDetail
  },
  methods: {
    dialogOpen() {
      this.$nextTick(() => {
        this.getMessageData()
      })
    },
    edit(row) {
      if (row.redirectURLData){
        let path = `/contentEditor/${row.redirectURLData.contentID}?type=${row.redirectURLData.type}&cid=${row.redirectURLData.cid}`
        this.messageDialog = false
        window.open('contentEditor.html#' + path)
      }
    },
    // 新建
    addMessageClick() {
      this.messageAddShow = true
    },
    // 回复点击
    replyMessageClick(row) {
      this.tmpMessageReply = Object.assign({}, row)
      this.messageReplyShow = true
    },
    // 已发消息
    sendMessageClick() {
      this.msgHistoryShow = true
    },
    getData() {
      return [
        '/ui/message',
        {
          params: {
            sortField: this.sortField
          }
        }
      ]
    },
    // 短消息列表数据
    getMessageData() {
      this.$refs.messageTable.getData()
    },
    // 选中行
    messageSelectionChange(selection) {
      this.selectedRows = selection
    },
    // 标记为已读
    async markReadClick(data) {
      let isArray = Array.isArray(data)
      let rowIds = isArray ? util.getSelectedIDs(data) : [data.ID]
      try {
        await this.$confirm('确认所选的消息标记为已读?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.put(`/ui/message/${rowIds}/setreadflag`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          data.readFlag = 1
          // this.getMessageData()
          this.$emit('afterRead', 'read')
        }
      } catch (e) {

      }
    },
    // 删除消息
    async deleteMessageClick(data) {
      let isArray = Array.isArray(data)
      let rowIds = isArray ? util.getSelectedIDs(data) : [data.ID]
      try {
        await this.$confirm('确认删除所选的消息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.delete(`/ui/message/${rowIds}?userType=ToUser`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.getMessageData()
        }
      } catch (e) {

      }
    },
    // 双击查看消息
    async lookMessage(row) {
      if (row.ID > 0) {
        let rowIds = []
        rowIds.push(row.ID)
        let res = await axios.put(`/ui/message/${rowIds}/setreadflag`)
        if (res.data.status === 1) {
          this.getMessageData()
          this.$emit('afterRead', 'read')
        }
      }
      this.tmpMessageDetail = Object.assign({}, row)
      this.showLookMessageShow = true
    }
  },
  props: ['messageShow']
}
</script>
<style>
/* 在一般情况下dialog宽为900像素，在逻辑分辨率480像素以下dialog宽为96% */
.short-message-dialog .el-dialog {
  width: 900px;
}
@media (max-width: 480px) {
  .short-message-dialog .el-dialog {
    width: 96%;
  }
}
font.lightred {
  color: #fd545a;
}
font.deepred {
  color: #a80005;
}
</style>

<style scoped>

</style>
