<template>
  <div class="layout-no-flex right-list-toolbar right-list-panel-card">
    <div>
      <el-toolbar align="right">
            <!-- <el-button :disabled="selectedRows.length === 0" @click="deleteClickHandler(selectedRows)"><i class="fa fa-remove"></i>删除</el-button> -->
        <el-select size="medium" v-model="messageTypeCode" clearable placeholder="消息类型" @change="searchClickHandler">
          <el-option v-for="type in messageTypeOptions" :key="type.value" :label="type.text" :value="type.value">
          </el-option>
        </el-select>
        <el-select size="medium" v-model="businessTypeCode" clearable placeholder="业务类型" @change="searchClickHandler">
          <el-option v-for="type in businessTypeOptions" :key="type.id" :label="type.name" :value="type.id">
          </el-option>
        </el-select>
        <el-select size="medium" v-model="statusCode" clearable placeholder="状态" @change="searchClickHandler">
          <el-option v-for="status in statusOptions" :key="status.code" :label="status.name" :value="status.code">
          </el-option>
        </el-select>
      </el-toolbar>
      <div v-loading="dataLoading">
        <el-list-view ref="messageLogsList" :data-read-url="getMessageLogsURL" :pageSize="10" @selection-change="onSelectionChange">
          <template slot-scope="row">
            <div class="panel-card">
              <el-row>
                <a class="list-card-title" href="javascript:void(0)" @click.stop="checkClick(row)">{{row.title}}</a>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <span>消息类型：</span>
                  <em>{{row.typeName || '无'}}</em>
                </el-col>
                <el-col :span="6">
                  <span>业务类型:</span>
                  <em>{{row.businessTypeName || '无'}}</em>
                </el-col>
                <el-col :span="6">
                  <span>收件人：</span>
                  <em>{{row.toUser}}</em>
                </el-col>
                <el-col :span="6">
                  <span>发件人：</span>
                  <em>{{row.fromUser}}</em>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-tag v-if="row.status=='S'" size="small">成功</el-tag>
                  <el-tag v-else size="small" type="danger">失败</el-tag>
                </el-col>
                <el-col :span="6">
                  <i class="fa fa-clock-o" aria-hidden="true"></i>
                  <em>{{row.addTime | fixDateTime}}</em>
                </el-col>
                <el-col :span="12" class="tar">
                  <el-button @click.stop="checkClick(row)" type="text" title="查看">
                    <i class="fa fa-search"></i>查看
                  </el-button>
                  <el-button @click.stop="deleteClickHandler([row])" type="text" title="删除" priv="Message.MessageManager.Delete">
                    <i class="fa fa-times"></i>删除
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-list-view>
      </div>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      selectedRows: [],
      dataLoading: true,
      messageTypeCode: '',
      businessTypeCode: '',
      statusCode: '',
      messageTypeOptions: [],
      businessTypeOptions: [],
      statusOptions: [
        {
          code: 'S',
          name: '成功'
        },
        {
          code: 'F',
          name: '失败'
        }
      ]
    }
  },
  methods: {
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    getMessageLogsURL() {
      const messageType = this.messageTypeCode
      const businessType = this.businessTypeCode
      const status = this.statusCode
      return [
        '/ui/messagemanager',
        {
          params: {
            messageType,
            businessType,
            status
          }
        }
      ]
    },
    checkClick(row) {
      if (!row || !row.ID) {
        return
      }
      this.$router.push({path: `/member/messageManager/${row.ID}`})
    },
    async deleteClickHandler(rows) {
      let messageLogIDs = []
      rows.forEach(function (row) {
        messageLogIDs.push(row.ID)
      })
      let strIds = messageLogIDs.join()
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      let res = await axios.delete(`/ui/messagemanager/${strIds}`)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.$refs.messageLogsList.getData()
      }
    },
    searchClickHandler() {
      this.$refs.messageLogsList && this.$refs.messageLogsList.getData()
      // this.$refs.dataTable1.getData()
    }
  },
  async created() {
    let msgTypeOpt = await axios.get('/ui/messageTypes')
    this.messageTypeOptions = msgTypeOpt.data.data
    let businessTypeOpt = await axios.get('/ui/businessTypes')
    this.businessTypeOptions = businessTypeOpt.data.data
    this.dataLoading = false
  }
}
</script>

<style scoped>
  .search-bar {
    padding: 0;
  }

  .page-wrap {
    margin-top: 20px;
  }

  .page-wrap .page {
    float: right;
  }
  .el-toolbar .el-select {
    padding-left: 5px;
  }
</style>
