<!-- 参数管理 -->
<template>
  <div>
    <Panel title="参数管理" v-loading="loading">
      <template slot="buttons">
        <el-button class="blue" @click="pageTable.handleLoad()" icon="el-icon-fa-search">查询</el-button>
        <el-button class="yellow" @click="pageTable.handleReset()" icon="el-icon-fa-reply-all">重置</el-button>
      </template>
      <el-form label-position="top" :model="pageTable.param" ref="queryForm">
        <el-row>
          <el-col :lg='4' :sm='12'>
            <el-form-item prop="paraname" label="参数名称">
              <el-input v-model="pageTable.param.paraname" placeholder="回车搜索" @keyup.native.enter="pageTable.handleLoad()"/>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item prop="paravalue" label="参数值">
              <el-input v-model="pageTable.param.paravalue" placeholder="回车搜索" @keyup.native.enter="pageTable.handleLoad()"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </Panel>
    <Panel title="参数列表" v-loading="loading" class="margin-top-2">
      <template slot="buttons">
        <el-button class="green" @click="handleAdd" icon="el-icon-fa-plus">新增</el-button>
      </template>

      <el-table border :data="pageTable.data" element-loading-spinner="el-icon-loading" v-loading="pageTable.isLoading" ref="table"
                element-loading-text="数据加载中" height="calc(100vh - 280px)">
        <el-table-column prop="paraname" label="参数名称"/>
        <el-table-column prop="paravalue" label="参数值"/>
        <el-table-column prop="paradesc" label="参数描述"/>
        <el-table-column label="操作" fixed='right' width="120">
          <template slot-scope="scope">
            <el-button class="blue" @click="handleEdit(scope.row)" icon="el-icon-fa-edit">编辑</el-button>
            <el-button class="red" @click="handleDelete(scope.row)" icon="el-icon-fa-trash">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <export-ctrl class="pull-left" @export="pageTable.handleExport($event, $refs.table)"/>
      <el-pagination background :page-size.sync="pageTable.size" :current-page.sync="pageTable.curr" :total="pageTable.total"/>
    </Panel>

    <el-dialog close-on-press-escape append-to-body v-draggable width="600px" title="客户端数据编辑" :visible.sync="editor.visible" :close-on-click-modal="false">
      <div class='dialog-button'>
        <el-button class="blue" plain :loading="editor.saving" @click="handleSubmit" icon="el-icon-fa-save">保存</el-button>
      </div>
      <ParaEditor v-loading="editor.saving" v-if="editor.visible" ref="editor" :error="editor.error" :uuid="editor.uuid"/>
    </el-dialog>
  </div>
</template>
<script>
  import ParaApi from "@/api/base/sysm/ParaAPI";
  import ParaEditor from "./ParaEditor";
  import PageTable from "../../libs/PageTable";

  export default {
    name: "ParaMgr",
    components: {ParaEditor},
    data() {
      return {
        pageTable: new PageTable({
          autoLoad: true,
          doLoad: ParaApi.queryPara,
          param: {},
          log: false
        }),
        loading: false,
        // 编辑器用到的所有数据
        editor: {
          saving: false,
          visible: false,
          error: {},
          uuid: ""
        },
        // 查询表单用到的数据
        searchForm: {
          paraname: "",
          paravalue: ""
        },
        data: []
      };
    },
    methods: {
      // 逻辑处理
      // 加载表格数据
      dataTableLoad(params, resolve) {
        ParaApi.queryPara(params)
          .then(resolve) // 让表格解析你提供的数据 (主要解析页码等)
          .then(respData => (this.data = respData.datarows)); // 本地也记录一下数据 (提供给表示显示的数据)
      },
      // 删除执行
      async deleteParam(data) {
        try {
          this.loading = true;
          await ParaApi.delPara(data.uuid);
          await this.pageTable.handleLoad();
        } finally {
          this.loading = false;
        }
      },
      // 提交执行
      async submitParam(data) {
        try {
          this.editor.saving = true;
          this.editor.error = {};
          await ParaApi.savePara(data);
          this.editor.visible = false;
          await this.pageTable.handleLoad();
        } finally {
          this.editor.saving = false;
        }
      },
      //  下面的方法专门用于响应页面按钮点击 则为 handleXXXX
      // 响应[编辑按钮]
      handleEdit(data) {
        this.editor.visible = true;
        this.editor.uuid = data.uuid;
      },
      // 响应[提交按钮]
      handleSubmit() {
        this.$refs.editor.validate().then(this.submitParam);
      },
      // 响应[删除按钮]
      handleDelete(data) {
        this.confirm(data).then(this.deleteParam);
      },
      // 响应[新增按钮]
      handleAdd() {
        this.editor.visible = true;
        this.editor.uuid = "";
      }
    }
  };
</script>
