<template>
  <Panel v-loading="view.loading" :title="view.queryInfo.title" element-loading-text="查询页面加载中...">
    <template slot="buttons">
    </template>

    <Panel title="查询条件">
      <el-form inline :model="pageTable.param" ref="queryform">
        <template v-for="cnd in view.queryInfo.searchFields">
          <el-form-item :key="cnd.name" :label="cnd.label" :prop="cnd.alias">
            <el-input v-if="cnd.type==='String'" v-model="pageTable.param[cnd.alias]"/>
            <el-input-number v-if="cnd.type==='Number'" v-model="pageTable.param[cnd.alias]"/>
            <el-date-picker v-if="cnd.type==='Date'" v-model="pageTable.param[cnd.alias]" type="daterange"/>
            <el-date-picker v-else-if="cnd.type==='DateTime'" v-model="pageTable.param[cnd.alias]" type="datetimerange"/>
            <el-select v-else-if="cnd.type==='Dict'" v-model="pageTable.param[cnd.alias]" v-sys-code="cnd.dict" clearable>
              <el-option v-for="item in sysCode[cnd.dict]" :key="item.key" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </template>
      </el-form>
    </Panel>


    <Panel title="查询结果">
      <template slot="buttons">
        <el-button class="blue" icon="el-icon-fa-search" @click="pageTable.handleLoad()">查询</el-button>
      </template>

      <el-table border :data="pageTable.data" element-loading-spinner="el-icon-loading" v-loading="pageTable.isLoading" ref="table" element-loading-text="数据加载中">
        <template v-for="column in view.queryInfo.tableColumns">
          <el-table-column :key="column.prop" :prop="column.prop" :label="column.label" :width="column.width" show-tooltip-when-overflow/>
        </template>
      </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>

  </Panel>
</template>
<script>
  import PageTable from "@/libs/PageTable";
  import QueryAPI from "@/api/base/sysm/QueryAPI";

  export default {
    name: "Query",
    props: {
      uuid: {
        type: String,
        require: true
      }
    },
    data() {
      return {
        view: {
          queryInfo: {},
          loading: false
        },
        pageTable: new PageTable({
          autoLoad: false,
          param: {},
          doLoad: (params) => {
            return QueryAPI.query(this.uuid, params);
          },
          log: true
        })
      };
    },
    mounted() {
      this.handleRefreshView();
    },
    methods: {
      // [按钮处理] - 刷新页面
      async handleRefreshView() {
        try {
          this.view.loading = true;
          this.view.queryInfo = await QueryAPI.loadQueryInfo(this.uuid);
          this.view.loading = false;
          this.queryform = {};
        } finally {
          this.view.loading = false;
        }
      }
    }
  };
</script>
