<template>
  <div class="layout-no-flex right-list-toolbar right-list-panel-card">
    <el-toolbar>
      <el-button @click="add" priv="Message.Template.Add"><i class="fa fa-plus"></i>新建</el-button>
      <!-- <el-button @click="del(selectedRows)" :disabled="selectedRows.length === 0"><i class="fa fa-remove"></i>删除</el-button> -->
    </el-toolbar>
    <el-list-view ref="messageTemplateList" :data-read-url="'/ui/messagetemplate'" :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="edit(row)">{{row.title}}</a> <span class="gray">ID：{{row.ID}}</span> </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.addUser}}</em> </el-col>
            <el-col :span="6"><span>添加时间：</span> <em>{{row.addTime | fixDateTime}}</em> </el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><span>发送时间：</span> <em>{{row.sendTime | fixDateTime}}</em></el-col>
            <el-col :span="18" class="tar">
              <el-button @click.stop="edit(row)" type="text" title="编辑" priv="Message.Template.Edit">
                <i class="fa fa-edit"></i>编辑
              </el-button>
              <el-button @click.stop="del([row])" type="text" title="删除" priv="Message.Template.Delete">
                <i class="fa fa-times"></i>删除
              </el-button>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-list-view>
  </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 {
      // 消息模板列表
      messageTemplateTable: [],
      // 当前选中行
      selectedRows: []
    }
  },
  methods: {
    // 消息模板删除事件
    async del(rows) {
      if (rows.length === 0) {
        this.$alert('请先选择一条记录！', '提示', {
          type: 'info'
        })
        return
      }
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      try {
        let ids = []
        rows.forEach(function(row) {
          ids.push(row.ID)
        })
        let strIds = ids.join(',')
        let res = await axios.delete(`/ui/messagetemplate/${strIds}`)
        this.messageTemplateTable = this.messageTemplateTable.filter(val => !ids.includes(val.ID))
        if (res.data.status === 1) {
          util.showMessage(res)
          this.messageTemplateTableData()
        } else {
          util.showErrorMessageBox(res.data.message)
        }
      } catch (e) {
        util.showErrorNotification(e)
      }
    },
    // 消息模板编辑点击事件
    edit(row) {
      if (!row || !row.ID) {
        return
      }
      this.$router.push({path: `/member/messageTemplate/${row.ID}`})
      this.$router.push({params: {ID: row.ID}})
    },
    // 消息模板新建点击事件
    add() {
      this.$router.push({path: '/member/messageTemplate/new'})
    },
    // 消息模板选中事件
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    // 刷新表格数据
    messageTemplateTableData() {
      this.$refs.messageTemplateList && this.$refs.messageTemplateList.getData()
    }
  }
}
</script>

<style scoped>
.page {
  float: right;
}
.tagBtn {
    height: 22px;
    line-height: 22px;
    padding: 6px 16px;
    border: 1px dashed #ccc;
    background-color: #f8f8f8;
    margin-right: 12px;
    border-radius: 4px;
    text-decoration: none;
    color: #666;
}
</style>
