<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" class="demo-form-inline">
        <el-button icon="el-icon-search" size="small" type="primary" @click="addTemplate">
          添加模板
        </el-button>
      </el-form>
      <base-table
        :api="querryPage"
        :search-dto="searchDto"
        :confirm-options="confirmOptions"
        :component-options="componentOptions"
        :init-dialog="initDialog"
      >
        <div slot="编辑" ref="编辑">
          <edit-out-template :edit-row="editRow" @complete="editComplete" />
        </div>
        <el-table-column label="Id" prop="Id" />
        <el-table-column label="名称" prop="TemplateName" />
        <el-table-column label="基于" prop="BaseTemplate" />
        <el-table-column label="创建时间">
          <template slot-scope="s">
            {{ formatterTime(s.row.CreateTime) }}
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="CreateUserName" />
      </base-table>
    </div>
    <el-dialog
      :visible.sync="addShow"
      title="添加"
      @opened="initAddShow"
    >
      <edit-out-template :edit-row="addRow" @complete="addComplete" />
    </el-dialog>
  </div>
</template>
<script>
import basetable from '@/components/Xyy/basetable'
import { EventBus } from '@/components/Xyy/basetableEvent'
import editOutTemplate from './components/editOutTemplate'
import { _queryPager, _deleteTemplate } from '@/api/order/template'
export default
{
  name: 'OutTemplate',
  components: { 'base-table': basetable, 'edit-out-template': editOutTemplate },
  data() {
    return {
      editRow: {},
      addRow: { id: -1 },
      addShow: false,
      initDialog(option, row, ref) {
        if (option.label == '编辑') {
          ref.editRow = row
        }
      },
      confirmOptions: [{
        label: '删除',
        btnType: 'danger',
        confirmApi: _deleteTemplate,
        confirmContent: '确定删除内容？'
      }],
      componentOptions: [{
        label: '编辑',
        show: false
      }],
      querryPage(pager) {
        return _queryPager(pager)
      },
      searchDto: {
        PageSize: 50,
        Sort: 'Id',
        order: 'desc'
      }
    }
  },
  create() {

  },
  methods: {
    editComplete() {
      this.reLoadData()
    },
    addComplete() {
      this.addShow = false
      this.reLoadData()
    },
    initAddShow() {
      this.addRow = {
        Id: 0
      }
    },
    addTemplate() {
      this.addShow = true
    },
    reLoadData() {
      EventBus.$emit('reloadPager')
    },
    formatterTime(time) {
      if (time) { return time.replace('T', ' ') }
    }
  }
}
</script>
