<template>
  <div class="sms-template-page">
    <Card>
      <div class="search-con">
        <Input placeholder="请输入消息编号" class="search-input" v-model="searchContent.templateCode" style="width: 200px"/>
        <Input placeholder="请输入消息关键字" class="search-input" v-model="searchContent.templateName" style="width: 200px"/>
        <ButtonGroup class="search-btngroup">
          <Button type="primary" style="margin-left: 20px" @click="handleSearch">查找</Button>
          <Button type="primary" @click="handleRefresh">
            <Icon type="md-refresh" />
          </Button>
        </ButtonGroup>
        <Button type="info" style="margin-left: 20px" @click="handleAdd">+ 新增SMS模板</Button>
      </div>
      <tables
        ref="tables"
        editable
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchContent.pageNum"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
      />
    </Card>
    <Modal
        title="新增SMS模板"
        v-model="modalStatus"
        @on-cancel="handleCancel"
      >
        <div class="model-item">
          <label class="label">标题：</label>
          <Input
            v-model="templateName"
            placeholder="请输入模板标题，10字以内"
            :maxlength="10"
          />
        </div>
        <div class="model-item">
          <label class="label">信息：</label>
          <Input
            v-model="templateContent"
            type="textarea"
            placeholder="请输入模板信息，500字以内"
            :maxlength="500"
          />
        </div>
        <div class="model-item">
          <label class="label">描述：</label>
          <Input
            v-model="remark"
            type="textarea"
            placeholder="请输入模板描述，用于审核，200字以内"
            :maxlength="200"
          />
        </div>
        <div slot="footer">
          <Button
            type="primary"
            @click="handleSure"
          >
            确定
          </Button>
        </div>
      </Modal>
  </div>
</template>
<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  data () {
    return {
      templateName: '',
      templateContent: '',
      remark: '',
      searchContent: {
        templateCode: '',
        templateName: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      columns: [
        { title: '编号', type: 'index', align: 'left', minWidth: 180 },
        { title: '标题', key: 'message', align: 'center', minWidth: 100 },
        { title: '模板信息', key: 'index', align: 'center', minWidth: 180 },
        { title: '新建时间', key: 'index', align: 'center', minWidth: 150 },
        { title: '操作',
          key: 'index',
          align: 'center',
          minWidth: 120,
          render: (h, params) => {
            let editBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleEdit(params.row)
                },
                style: {
                  marginRight: '5px'
                  // display: params.row.validStatus ? 'inline-block' : 'none'
                }
              },
              '编 辑'
            )
            let deleteBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDelete(params.row)
                },
                style: {
                  marginRight: '5px'
                  // display: params.row.validStatus ? 'inline-block' : 'none'
                }
              },
              '删 除'
            )
            let sendBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleSend(params.row)
                },
                style: {
                  marginRight: '5px'
                  // display: params.row.validStatus ? 'inline-block' : 'none'
                }
              },
              '发SMS'
            )
            return h('div', [editBtn, sendBtn, deleteBtn])
          }
        }
      ],
      loading: false,
      totalSize: 0,
      modalStatus: false
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getSmsTemplateList',
        postdata: this.searchContent,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    handleRefresh () {
      this.reload()
    },
    handleAdd () {
      this.modalStatus = true
    },
    handleCancel () {

    },
    handleSure () {
      // smsTemplateAdd
      let { templateName, templateContent, remark } = this
      if (!templateName || !templateContent || !remark) {
        return this.$Message.warning('所有项均为必填项哦！')
      }
      this.api({
        apiName: 'smsTemplateAdd',
        postdata: { templateName, templateContent, remark },
        success: (res) => {
          this.requestData()
          this.$Notice.success({ title: '新增成功！' })
        }
      })
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    },
    handleEdit (row) {
      return () => {

      }
    },
    handleDelete (row) {
      return () => {

      }
    },
    handleSend (row) {
      return () => {

      }
    }
  },
  created () {
    this.requestData()
  }
}
</script>
<style scoped lang="less">
.sms-template-page .search-con {
  display: flex;
  padding: 10px 0;
  .search-input {
    width: 300px;
    margin-right: 10px;
  }
}
.model-item {
    display: flex;
    // align-items: center;
    margin-bottom: 10px;
    .label {
        width: 50px;
    }
}
</style>
