<template>
  <div v-loading="loading" element-loading-spinner="el-icon-loading" :element-loading-text="loadingText">
    <Panel :title="titleSearchForm" v-if="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">
        <slot name="table-buttons" :data="pageTable"/>
        <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="数据加载中" :max-height="tableMaxHeight">
        <slot name="table-columns"/>
        <el-table-column v-if="allowEdit || allowDelete" label="操作" width="80" align="center">
          <template slot-scope="scope">
            <el-button v-if="allowEdit" type="primary" @click="handleEdit(scope.row)" class="blue">编辑</el-button>
            <el-button v-if="allowDelete" 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" v-if="editor.ready"/>
        <div class="text-center">
          <slot name="buttons"/>
          <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},
      allowEdit: {type: Boolean, default: true},
      allowDelete: {type: Boolean, default: true},
      titleSearchForm: {type: String, require: true},
      titleDataTable: {type: String, require: true},
      titleEditor: {type: String, require: true},
      editorWidth: {type: String, require: true},
      editorDefaultData: {type: Object, require: false, default() {return {}}},
      tableMaxHeight: {type: [String,Number]},
      editorValidate: {type: Function},
      searchParam: {type: Object},
      doQuery: {type: Function},
      doGet: {type: Function},
      doSave: {type: Function},
      doDelete: {type: Function},
      closeOnSave: {type: Boolean, default: false},
      autoLoad: {type: Boolean, default: false},
    },
    data() {
      return {
        loadingText: "系统加载中...",
        loading: false,
        editor: {
          data: this.editorDefaultData,
          loading: false,
          ready: false,
          title: this.titleEditor,
          visible: false
        },
        pageTable: new PageTable({
          autoLoad: this.autoLoad,
          doLoad: this.doQuery,
          param: Object.assign({}, this.searchParam),
          log: false
        })
      }
    },
    beforeMount() {
    },
    methods: {
      async handleAdd() {
        this.editor.ready = false;
        this.editor.title = this.titleEditor + ' - 新建 ';
        this.editor.uuid = "";
        this.editor.data = Object.assign({}, this.editorDefaultData);
        this.editor.visible = true;
        this.$emit("before-edit", this.editor.data);
        this.editor.ready = true;
      },
      async handleSave() {
        await this.editorValidate();
        await this.confirm(this.editor.data, "点击确定提交数据,请确认您的数据填写正确?");
        this.editor.loading = true;
        try {
          this.$emit("before-save", this.editor.data);
          let resp = await this.doSave(this.editor.data);
          this.pageTable.handleLoad();
          if (this.closeOnSave) {
            this.editor.visible = false;
          }
          Object.assign(this.editor.data, resp.data || {});
          this.$emit("after-save", this.editor.data);
        } finally {
          this.editor.loading = false;
        }
      },
      async handleEdit(row) {
        try {
          let uuid = row.uuid;
          this.editor.ready = false;
          this.editor.title = this.titleEditor + ' - 编辑';
          this.editor.visible = true;
          this.editor.loading = true;
          this.editor.uuid = row.uuid;
          this.editor.data = await this.doGet(uuid);
          this.$emit("before-edit", this.editor.data);
          this.editor.ready = true;
        } finally {
          this.editor.loading = false;
        }
      },
      async handleDelete(row) {
        let uuid = row.uuid;
        await this.confirm();
        await this.doDelete(uuid);
        this.$emit("after-delete", uuid);
        this.pageTable.handleLoad();
      }
    }
  }
</script>
