<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <CurdPanel full-height
             title-search-form="查询管理"
             title-data-table="查询列表"
             title-editor="查询管理"
             :editor-width="'1080px'"
             :editor-validate="validate"
             :doQuery="SysQueryApi.doQuery"
             :doGet="SysQueryApi.doGet"
             :doSave="SysQueryApi.doSave"
             :doDelete="SysQueryApi.doDelete"
             @before-save="beforeSave"
             @before-edit="beforeEdit"
             :close-on-save="false"
             autoLoad>

    <!-- 查询条件区域 -->
    <template v-slot:search-form="{formData}">
      <el-form-item label="查询标题" prop="querytitle">
        <el-input v-model="formData.querytitle"/>
      </el-form-item>
    </template>

    <!-- 表格列区域 -->
    <template slot="table-columns">
      <el-table-column prop="querytitle" label="查询标题"/>
      <el-table-column prop="crtime" :formatter="formatterDateTime" label="创建时间"/>
      <el-table-column prop="optime" :formatter="formatterDateTime" label="修改时间"/>
    </template>

    <!-- 数据编辑区域 -->
    <template v-slot:editor="{data}">
      <el-form :model="viewJson" ref="queryform" show-message label-position="right" label-width="80px">
        <el-form-item label="查询标题" prop="title" required>
          <el-input v-model="viewJson.title" maxlength="100"/>
        </el-form-item>
        <el-form-item label="自动加载" prop="autoLoad">
          <el-checkbox v-model="viewJson.autoLoad"/>
        </el-form-item>


        <el-form-item label="查询SQL" prop="querySql"  >
          <template v-slot:label>
            <span>查询SQL</span>
            <div class="pull-right margin-left-6 margin-right-1">
              <!--              <el-button class="blue" @click="format(data)" icon="el-icon-tickets">格式化</el-button>-->
              <el-button class="green" @click="runSql(data)" icon="el-icon-caret-right">解析</el-button>
            </div>
          </template>
          <vue2-ace-editor style="min-height: 100px;box-sizing: border-box"
                           class="border-all"
                           @init="editorInit"
                           disabled
                           v-model="data.querySql"
                           lang="mysql"
                           theme="eclipse"/>
        </el-form-item>
      </el-form>

      <el-tabs type="border-card">
        <el-tab-pane label="表格设计" class="padding-1">
          <el-table :data="viewJson.tableColumns" style="width: 100%" border max-height="400px">
            <el-table-column prop="prop" label="字段"/>
            <el-table-column prop="label" label="标题" width="120">
              <el-input slot-scope="{row,$index}" v-model="row.label" :tabindex="$index+1"/>
            </el-table-column>
            <el-table-column prop="label" label="显示" width="40" align="center">
              <el-checkbox slot-scope="{row}" v-model="row.visible"/>
            </el-table-column>
            <el-table-column prop="label" label="溢出" width="40" align="center">
              <el-checkbox slot-scope="{row}" v-model="row.overflow"/>
            </el-table-column>
            <el-table-column prop="label" label="对其方式" width="80">
              <el-select slot-scope="{row}" v-model="row.align">
                <el-option label="居左" value="left"/>
                <el-option label="居右" value="right"/>
              </el-select>
            </el-table-column>
            <el-table-column prop="format" label="格式化" width="120">
              <el-select slot-scope="{row}" v-model="row.format">
                <el-option label="date" value="date"/>
                <el-option label="dateTime" value="dateTime"/>
                <el-option label="number" value="number"/>
              </el-select>
            </el-table-column>
            <el-table-column prop="label" label="宽度" width="120">
              <el-input slot-scope="{row}" v-model.number="row.width"/>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="查询条件" class="padding-1">
          <div class="text-right margin-1">
            <el-button class="blue" icon="el-icon-fa-search" @click="addSearchField()">增加</el-button>
          </div>
          <el-table :data="viewJson.searchFields" style="width: 100%" border max-height="400px">
            <el-table-column prop="name" label="字段">
              <el-input slot-scope="{row}" v-model="row.name"/>
            </el-table-column>
            <el-table-column prop="label" label="标题">
              <el-input slot-scope="{row}" v-model="row.label"/>
            </el-table-column>
            <el-table-column prop="type" label="参数类型">
              <template slot-scope="{row}">
                <div class="flex-h">
                  <el-select class="flex-1" v-model="row.type" clearable>
                    <el-option label="字符串" value="String"/>
                    <el-option label="数字" value="Number"/>
                    <el-option label="日期" value="Date"/>
                    <el-option label="日期范围" value="DateRange"/>
                    <el-option label="数据字典" value="Dict"/>
                  </el-select>
                  <el-input class="flex-1 margin-left-1" placeholder="字典名" v-if="row.type==='Dict'" v-model="row.dict"/>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>


    </template>

  </CurdPanel>

</template>

<script>
  import SysQueryApi from "@/api/base/sysm/SysQueryApi";
  import vue2AceEditor from "vue2-ace-editor";

  const defaultViewJson = {
    title: "",
    autoLoad: false,
    tableColumns: [],
    searchFields: []
  };

  export default {
    components: {vue2AceEditor},
    name: "SysQueryMgr",
    data() {
      return {
        SysQueryApi,
        viewJson: Object.assign({}, defaultViewJson),
      };
    },
    async mounted() {

    },
    methods: {
      editorInit: function (editor) {
        require("brace/ext/language_tools"); //language extension prerequsite...
        require("brace/mode/mysql"); //language
        require("brace/theme/eclipse");
        require("brace/snippets/mysql"); //snippet
        editor.setOptions({
          showLineNumbers: true,
          showFoldWidgets: false,
          showGutter: false,
          printMargin: false,
          enableBasicAutocompletion: false,
          enableSnippets: true,
          enableLiveAutocompletion: true
        });
      },
      beforeEdit(data) {
        if (!data.uuid) {
          this.viewJson = Object.assign({}, defaultViewJson);
        }
        this.viewJson = JSON.parse(data.viewJson)
      },
      beforeSave(data) {
        data.viewJson = JSON.stringify(this.viewJson);
        data.queryTitle = this.viewJson.title
      },
      validate() {
        return this.$refs["queryform"].validate();
      },
      format(data) {

      },
      async runSql(data) {
        let columns = await SysQueryApi.listColumns(data.querySql);
        if (this.viewJson.tableColumns.length === 0) {
          // 初始化显示列
          this.viewJson.tableColumns = columns.map(column => ({
              prop: column,
              label: column,
              align: 'left',
              overflow: false,
              visible: true
            })
          );
        } else {
          // 过滤不存在的列
          this.viewJson.tableColumns = columns.map(column => {
            return this.viewJson.tableColumns.find(value => value.prop === column);
          })
        }
      },
      // 添加查询条件
      addSearchField() {
        this.viewJson.searchFields.push({
          name: "",
          label: "",
          type: "String",
          dict: ""
        })
      }
    }
  };
</script>