<template>
  <div class="full-height flex-v"
       v-loading="view.loading"
       element-loading-spinner="el-icon-loading"
       element-loading-text="查询页面加载中...">

    <Panel title="查询条件">
      <template slot="buttons">
        <el-button class="blue" icon="el-icon-fa-refresh" @click="handleRefreshView()">刷新页面</el-button>
      </template>
      <el-form inline :model="pageTable.param" ref="queryform" label-position="top">
        <template v-for="cnd in view.viewJson.searchFields">
          <el-form-item :key="cnd.name" :label="cnd.label" :prop="cnd.name">
            <el-input v-if="cnd.type==='String'" v-model="pageTable.param[cnd.name]"/>
            <el-input-number v-if="cnd.type==='Number'" v-model="pageTable.param[cnd.name]"/>
            <el-date-picker v-else-if="cnd.type==='Date'" v-model="pageTable.param[cnd.name]" type="date" :picker-options="UsualConfig.pickerOptionsQuickSelect"/>
            <el-date-picker v-else-if="cnd.type==='DateRange'" v-model="pageTable.param[cnd.name]" type="datetimerange" :picker-options="UsualConfig.pickerOptionsQuickSelect"/>
            <el-select v-else-if="cnd.type==='Dict'" v-model="pageTable.param[cnd.name]" 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="查询结果" class="flex-1">
      <template slot="buttons">
        <el-button @click="pageTable.handleLoad()" class="blue" icon="el-icon-search">查询</el-button>
        <el-button @click="pageTable.handleReset()" class="yellow" icon="el-icon-refresh">重置</el-button>
      </template>

      <div class="full-height flex-v">
        <el-table class="flex-1"
                  border
                  highlight-current-row
                  :data="pageTable.data"
                  element-loading-spinner="el-icon-loading"
                  v-loading="pageTable.isLoading"
                  ref="table"
                  element-loading-text="数据加载中">
          <template v-for="column in view.viewJson.tableColumns" v-if="column.visible">
            <el-table-column :key="column.prop"
                             :prop="makeProp(column.prop)"
                             :formatter="makeFormatter(column.format)"
                             :label="column.label"
                             :width="column.width"
                             :show-overflow-tooltip="column.overflow"/>
          </template>
        </el-table>

        <div class="la-panel--tableFooter">
          <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"/>
        </div>
      </div>
    </Panel>

  </div>
</template>
<script>
  import moment from "moment";
  import PageTable from "@/libs/PageTable";
  import UsualConfig from "@/libs/UsualConfig";
  import SysQueryApi from "@/api/base/sysm/SysQueryApi";

  export default {
    name: "Query",
    props: {
      uuid: {
        type: String,
        require: true
      }
    },
    data() {
      return {
        UsualConfig,
        view: {
          viewJson: {},
          loading: false
        },
        pageTable: new PageTable({
          autoLoad: false,
          param: {},
          doLoad: (params) => {
            params.permName = this.view.viewJson.title;
            return SysQueryApi.executeQuery(this.uuid, params);
          },
          log: true
        })
      };
    },
    mounted() {
      this.handleRefreshView();
    },
    methods: {
      makeFormatter(format) {
        switch (format) {
          case "date":
            return (row, column, cellValue) => {
              return cellValue ? moment(cellValue).format("LL") : null;
            }
          case "dateTime":
            return (row, column, cellValue) => {
              return cellValue ? moment(cellValue).format("LL LTS") : null;
            }
        }
      },
      makeProp(prop) {
        return prop.replace(/_/gm, "").toLowerCase();
      },
      // [按钮处理] - 刷新页面
      async handleRefreshView() {
        try {
          this.view.loading = true;
          this.view.viewJson = await SysQueryApi.loadViewJson(this.uuid);
          if(this.view.viewJson.autoLoad){
           await this.pageTable.handleLoad()
          }
          this.view.loading = false;
          this.queryform = {};
        } finally {
          this.view.loading = false;
        }
      }
    }
  };
</script>
