<!--
 * @Author: Jason Liu
 * @Date: 2023-03-15 15:39:23
 * @Desc: 
-->
<template>
  <a-drawer
    placement="bottom"
    :closable="false"
    :visible="show"
    :loading="loading"
    @close="show = false"
    :keyboard="false"
    :destroy-on-close="true"
    class="sql_script_source_card"
    height="88%"
  >
    <template slot="title">
      <a-row>
        <a-col :span="8">
          <win-title size="large">设置脚本</win-title>
        </a-col>
        <a-col :span="16" class="tool">
          <a-button @click="sqlFormat">格式化</a-button> &nbsp;
          <a-button type="primary" :loading="loading" @click="dataAnalysis">SQL调试</a-button>
          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
          <a-button @click="show = false"> 关闭</a-button>&nbsp;
          <a-button type="primary" @click="fixed" :loading="loading">
            确定
          </a-button>
        </a-col>
      </a-row>
    </template>
    <a-row :gutter="16" class="data_source_list">
      <a-col :span="6">
        <data-table-source v-model="nodeData" @table="getTables" />
      </a-col>
      <a-col :span="18">
        <drag-zone class="model_zone" :options="{ direction: 'vertical' }">
          <drag-content class="sql_content">
            <gl-sql-editor
              v-model="script"
              :read-only="loading"
              :tables="tablekeys"
            />
          </drag-content>
          <drag-handle class="model_handle">
            <div class="slider_body">
              <svg-icon type="icon_slider_updow" />
              <svg-icon type="icon_slider_updow" />
              <svg-icon type="icon_slider_updow" />
            </div>
          </drag-handle>
          <drag-content class="model_content">
            <a-tabs default-active-key="1" size="small">
              <a-tab-pane key="1">
                <template slot="tab">运行结果</template>
                <vxe-table
                  show-overflow
                  resizable
                  show-header-overflow
                  border
                  :row-config="{ isHover: false }"
                  :checkbox-config="{
                    checkField: 'checked',
                    trigger: 'row',
                  }"
                  :loading="loading"
                  :data="dataList"
                  height="100%"
                  ref="dataList"
                >
                <template v-for="column in columns">
                  <vxe-column :field="column.columnName" min-width="160" :key="column.columnName" :title="column.columnName"></vxe-column>
                  </template>
                  <template #empty>
                    <a-empty
                      :image-style="{
                        display: 'flex',
                        height: '80px',
                      }"
                    >
                      <span slot="description"> 暂无数据 </span>
                    </a-empty>
                  </template>
                </vxe-table>
              </a-tab-pane>
            </a-tabs>
          </drag-content>
        </drag-zone>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<script type="text/javascript" src="./service.js"></script>
<style lang="less" scoped>
@import "/src/themes/config.less";
.sql_script_source_card {
  /deep/.ant-drawer-content {
    .ant-drawer-header {
      padding: 0 12px 0 24px;

      .ant-drawer-title {
        height: 42px;
        line-height: 42px;
        .tool {
          text-align: right;
        }
      }
    }

    .ant-drawer-body {
      height: calc(100% - 44px);
      .data_source_list {
        height: 100%;
        .ant-col {
          height: 100%;

          .model_zone {
            &.drag-zone {
              height: 100%;
              overflow: hidden;
              .sql_content {
                padding-top: 12px;
                height: calc(100% - 208px);
                padding-bottom: 2px;
              }
              .model_content {
                height: 200px;
                min-height: 44px;

                .ant-tabs {
                  height: 100%;
                  .ant-tabs-bar {
                    padding: 0;
                  }

                  .ant-tabs-content {
                    height: 100%;
                    .ant-tabs-tabpane {
                      height: calc(100% - 60px);
                    }
                  }
                }
              }
              .model_handle {
                border-bottom: 1px solid @borderColor;
                height: 4px;
                text-align: center;
                position: relative;
                .slider_body {
                  position: absolute;
                  top: -7px;
                  text-align: center;
                  left: 0;
                  right: 0;
                  color: @borderColor;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
