<template>

  <div v-loading="loading" element-loading-spinner="el-icon-loading" :element-loading-text="loadingText">

    <Panel :title="titleSearchForm">
      <template slot="buttons">
        <el-button type="primary" @click="pageTable.handleLoad()" class="blue" icon="el-icon-search">查询</el-button>
        <el-button type="primary" @click="pageTable.handleReset()" class="yellow" icon="el-icon-refresh">重置</el-button>
      </template>
      <el-form inline :model="pageTable.param" ref="queryform">
        <slot name="search-form" v-bind:formData="pageTable.param"></slot>
      </el-form>
    </Panel>

    <Panel :title="titleDataTable">
      <template slot="buttons">
        <el-button v-if="allowAdd" type="primary" @click="handleAdd" class="blue" icon="el-icon-plus">新增</el-button>
      </template>
      <el-table border :data="pageTable.data" element-loading-spinner="el-icon-loading" v-loading="pageTable.isLoading" element-loading-text="数据加载中">
        <slot name="table-columns"/>
        <el-table-column prop="memo" label="操作" width="80">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleEdit(scope.row)" class="blue">编辑</el-button>
            <el-button type="primary" @click="handleDelete(scope.row)" class="red">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <export-ctrl v-if="allowExport" class="pull-left" @export="pageTable.handleExport($event)"/>
      <el-pagination v-if="allowPagination" background :page-size.sync="pageTable.size" :current-page.sync="pageTable.curr" :total="pageTable.total"/>
    </Panel>


    <el-dialog :visible.sync="editor.visible" :width="editorWidth" append-to-body>
      <div slot="title" class="font-white">
        <i class="el-icon-edit"></i>
        {{editor.title}}
      </div>
      <div v-if="editor.visible" element-loading-spinner="el-icon-loading" v-loading="editor.loading">
        <slot name="editor" :data="editor.data"/>
        <div class="text-center">
          <el-button type="primary" @click="handleSave" class="blue" size="mini">保存</el-button>
        </div>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import PageTable from '../libs/PageTable'

  export default {
    name: "CurdPanel",
    props: {
      allowExport: {type: Boolean, default: true},
      allowPagination: {type: Boolean, default: true},
      allowAdd: {type: Boolean, default: true},
      titleSearchForm: {type: String, require: true},
      titleDataTable: {type: String, require: true},
      titleEditor: {type: String, require: true},
      editorWidth: {type: String, require: true},
      editorValidate: {type: Function},
      searchParam: {type: Object},
      doQuery: {type: Function},
      doGet: {type: Function},
      doSave: {type: Function},
      doDelete: {type: Function},
    },
    data() {
      return {
        loadingText: "系统加载中...",
        loading: false,
        editor: {
          data: {},
          loading: false,
          title: this.titleEditor,
          visible: false
        },
        pageTable: new PageTable({
          autoLoad: false,
          doLoad: this.doQuery,
          param: Object.assign({}, this.searchParam),
          log: false
        })
      }
    },
    methods: {
      async handleAdd() {
        this.editor.title = this.titleEditor + ' - 新建 ';
        this.editor.visible = true;
        this.editor.uuid = "";
        this.editor.data = {}
      },
      async handleSave() {
        await this.editorValidate();
        await this.confirm(this.editor.data, "点击确定提交数据,请确认您的数据填写正确?");
        this.editor.loading = true;
        try {
          await this.doSave(this.editor.data);
          this.pageTable.handleLoad();
        } finally {
          this.editor.loading = false;
        }
      },
      async handleEdit(row) {
        let uuid = row.uuid;
        this.editor.title = this.titleEditor + ' - 编辑';
        this.editor.visible = true;
        this.editor.loading = true;
        this.editor.uuid = row.uuid;
        try {
          this.editor.data = await this.doGet(uuid)
        } finally {
          this.editor.loading = false;
        }
      },
      async handleDelete(row) {
        let uuid = row.uuid;
        await this.confirm();
        await this.doDelete(uuid);
        this.pageTable.handleLoad();
      }
    }
  }
</script>

<style scoped>

</style>