<template>
  <div>
    <el-card>
      <template slot="header">
        <span>查询定义</span>
        <div class="pull-right">
          <el-button class="blue" icon="el-icon-fa-search" @click="handleQuery">查询</el-button>
        </div>
      </template>
      <el-form :model="queryform" @submit.native.prevent label-position="right" label-width="80px">
        <el-row>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="查询标题">
              <el-input v-model="queryform.querytitle"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="margin-top-2">
      <template slot="header">
        <span>查询定义列表</span>
        <div class="pull-right">
          <el-button class="blue" icon="el-icon-fa-plus" @click="handleAdd">添加</el-button>
        </div>
      </template>
      <PageTable hideTitle ref="dataTable" auto-load @load-data="dataTableLoad" :data="table.data" highlight-current-row stripe border hideExport>
        <el-table-column prop="querytitle" label="查询标题"/>
        <el-table-column prop="crtime" :formatter="formatterDateTime" label="创建时间"/>
        <el-table-column prop="optime" :formatter="formatterDateTime" label="修改事件"/>
        <el-table-column label="操作" fixed='right' width="160">
          <template slot-scope="scope">
            <el-button class="blue" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-fa-edit">编辑</el-button>
            <el-button class="red" @click="handleDelete(scope.$index, scope.row)" icon="el-icon-fa-trash">删除</el-button>
          </template>
        </el-table-column>
      </PageTable>
    </el-card>
    <el-dialog width="80%" append-to-body :visible.sync="designer.show" title="查询设计">
      <QueryDesigner v-if="designer.show" :uuid="designer.uuid" @save="dataTableLoad"/>
    </el-dialog>
  </div>
</template>
<script>
  import QueryAPI from "@/api/base/sysm/QueryAPI";
  import QueryDesigner from "./QueryDesigner";

  export default {
    name: "QueryMgr",
    components: {QueryDesigner},
    data() {
      return {
        queryform: {
          querytitle: ""
        },
        table: {
          data: []
        },
        designer: {
          uuid: "",
          show: false
        }
      };
    },
    methods: {
      handleAdd() {
        this.designer.uuid = "";
        this.designer.show = true;
      },
      handleEdit(index, row) {
        this.designer.show = true;
        this.designer.uuid = row.uuid;
      },
      handleQuery() {
        this.$refs.dataTable.load(this.queryform);
      },
      dataTableLoad(params, resolve) {
        QueryAPI.loadDesignList(params)
            .then(resolve)
            .then(respData => (this.table.data = respData.datarows));
      },
      handleDelete(index, row) {
        this.confirm(row).then(row => {
          QueryAPI.deleteDesign(row.uuid)
              .then(this.handleQuery)
              .catch();
        });
      }
    }
  };
</script>
