<template>
  <div>
    <el-dialog title="发送日志" :visible.sync="isShow" @open="dialogOpen" class="mess-send-dialog">
      <!-- 删除按钮 -->
      <!-- <el-toolbar>
        <el-button @click="del(selectedRows)" :disabled="selectedRows.length===0">
          <i class="fa fa-remove"></i>删除</el-button>
      </el-toolbar> -->
      <!-- 查询 -->
      <div style="padding:5px;">标题：
        <el-input v-model="searchTitle" @keyup.enter.native="getMassSendData" style="width:200px;"></el-input>
        <el-button type="primary" @click="getMassSendData">搜索</el-button>
      </div>
      <!-- tab栏 -->
      <el-table ref="multipleTable" :data="logsTable" tooltip-effect="dark" @selection-change="selectionChange">
        <el-table-column type="index" width="55" label="序号"> </el-table-column>
        <!-- <el-table-column type="selection" width="45"> </el-table-column> -->
        <el-table-column prop="title" label="标题" min-width="45%" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="sendTime" label="发送时间" min-width="25%">
          <template slot-scope="scope">
            {{scope.row.sendTime | fixDateTime}}
          </template>
        </el-table-column>
        <el-table-column prop="feedbackTime" label="消息反馈时间" min-width="25%">
          <template slot-scope="scope">
            {{scope.row.feedbackTime | fixDateTime}}
          </template>
        </el-table-column>
        <el-table-column prop="statusName" label="消息状态" min-width="15%"> </el-table-column>
          <el-table-column label="操作" align="right" min-width="10%">
            <template slot-scope="scope">
              <el-button @click.stop="del([scope.row])" type="text" title="删除" priv="Weixin.Manage.MenuID">
                <i class="fa fa-times f16"></i></el-button>
            </template>
          </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="pageIndex" :page-sizes="[10, 15, 20, 30, 50]"
        :page-size="pageSize" layout="total, sizes , prev, pager, next, jumper" :total="total">
      </el-pagination>
      <!-- 确定按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isShow = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  filters: {
    fixDateTime: function(val) {
      if (!val) {
        return ''
      }
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      logsTable: [],
      searchTitle: '',
      selectedRows: []
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    selectionChange(selection) {
      this.selectedRows = selection
    },
    async del(rows) {
      if (rows.length === 0) {
        this.$alert('请选选择一条记录', '提示', {
          type: 'info'
        })
        return
      }
      let rowIds = []
      rows.forEach(function (row) {
        rowIds.push(row.ID)
      })
      try {
        await this.$confirm('确定删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      let res = await axios.delete(
        `/ui/wechat/masssendlogs/${rowIds.join(',')}`
      )
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.getMassSendData()
      }
    },
    async dialogOpen() {
      this.searchTitle = ''
      this.getMassSendData()
    },
    sizeChange(val) {
      this.pageSize = val
      this.getMassSendData()
    },
    currentChange(val) {
      this.pageIndex = val
      this.getMassSendData()
    },
    async getMassSendData() {
      let res = await axios.get('/ui/wechat/masssendlogs', {
        params: {
          pageIndex: this.pageIndex - 1,
          pageSize: this.pageSize,
          title: encodeURIComponent(this.searchTitle),
          weiXinID: this.$route.params.weiXinID
        }
      })
      this.logsTable = res.data.data
      this.total = res.data.total
    }
  },
  props: {
    show: {
      type: Boolean,
      required: true
    }
  }
}
</script>
<style>
  /* 在一般情况下dialog宽为800像素，在逻辑分辨率480像素以下dialog宽为96% */

  .mess-send-dialog .el-dialog {
    width: 800px;
  }

  @media (max-width: 480px) {
    .mess-send-dialog.el-dialog {
      width: 96%;
    }
  }
</style>
