<template>
<div class="sql_join_container">
  <div class="title">
    <div class="txt"><win-title>{{ $t('脚本信息') }}</win-title></div>
    <div class="source_select">
      <sourceSelection v-model="sqlTable.data" @change="changeSource"></sourceSelection>
    </div>
    <div class="btn_list">
      <a-button class="btn" size="small" @click="toFormatter">格式化</a-button>
      <a-button type="primary" size="small" :loading="loading" class="btn" @click="parseSql">SQL解析</a-button>

      <a-popover placement="leftTop" trigger="click">
        <template slot="title">
          调试入参
          <a-button style="float:right" type="link" size="small" @click="addPlaces">添加入参</a-button>
        </template>
        <template slot="content">
          <vxe-table
            style="width:500px"
            show-overflow
            resizable
            show-header-overflow
            border
            :row-config="{ isHover: false }"
            :data="sqlTable.data.places"
            keep-source
            :edit-config="{
              trigger: 'click',
              mode: 'row',
              showIcon: false,
              showInsertStatus: true,
              showUpdateStatus: true,
            }"
            height="200px"
          >
            <vxe-column
              title="占位符"
              field="key"
              :edit-render="{
                autofocus: '.ant-input',
                placeholder: '请输入占位符，例：lowerbound解析对照${lowerbound}',
                autoselect: true,
              }"
            >
              <template #edit="{ row }">
                <a-input
                  v-model="row.key"
                  placeholder="请输入占位符，例：lowerbound$解析对照${lowerbound}"
                  type="text"
                ></a-input>
              </template>
            </vxe-column>
            <vxe-column
              :title="$t('预设值')"
              field="value"
              :edit-render="{
                autofocus: '.ant-input',
                placeholder: '请点击输入预设值，空则为null',
                autoselect: true,
              }"
            >
              <template #edit="{ row }">
                <a-input
                  v-model="row.value"
                  placeholder="请点击输入预设值，空则为null"
                  type="text"
                ></a-input>
              </template>
            </vxe-column>
            <vxe-column
              :title="$t('操作')"
              width="80"
              align="center"
            >
              <template #default="{ row, seq }">
                <a-button
                  class="a_danger"
                  @click="deletePlaces(row, seq)"
                  type="link"
                  >删除</a-button
                >
              </template>
            </vxe-column>
            <template #empty>
              <a-empty
                :image-style="{
                  display: 'flex',
                  height: '80px',
                }"
              >
                <span slot="description">暂无数据</span>
              </a-empty>
            </template>
          </vxe-table>
        </template>
        <a-button type="primary" size="small" class="btn">调试入参设置</a-button>
      </a-popover>
    </div>
  </div>
  <div class="sql_join">
    <glSqlEditor
      ref="sqlEditor"
      v-model="sqlTable.data.script"
    />
  </div>
</div>
</template>

<script>
const { oldSourceSelection: sourceSelection } = require("w-vue-middle/dataSourceService");
const glSqlEditor = require('w-vue-middle/components/glSqlEditor').default;
const $dataIntegration = require('w-vue-chongqing/src/api/dataIntegration');

export default {
  components: {
    sourceSelection,
    glSqlEditor
  },
  props: {
    sqlTable: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      loading: false,
    };
  },
  created() {},
  methods: {
    /**
     * @Author: y_zp
     * @description: 切换切换数据源
     */
    changeSource() {},
    /**
     * @Author: y_zp
     * @description: 格式化sql
     */
    toFormatter(){
      this.sqlTable.data.script = this.sqlTable.data.script.sqlFormatter();
    },
    /**
     * @Author: y_zp
     * @description: SQL解析
     */
    parseSql() {
      if(!this.sqlTable.data.script) {
        this.$message.warn('请输入脚本信息');
        return false;
      }
      this.loading = true;
      let data = this.sqlTable.data;

      let places = undefined;
      if (data.places.length > 0) {
        places = data.places.filter((item) => {
          return !!item.key;
        }).map(item => {
          return { key: item.key, value: item.value }
        });
      }

      $dataIntegration.collectionDataInfo({
        clusterId: data.clusterId, //集群ID
        collectType: 'sql', // 采集类型：schema、table、column
        dsId: data.dbId,
        schema: data.schemaId,
        tableName: '',
        uuid: 0,
        useCache: true,
        sql: data.script,
        places: places,
      }).then(req => {
        let columns = req.data.meta;
        this.sqlTable.data.columns = columns.map(item => {
          return {
            asName: item.asName || item.columnName,
            tableAsName: this.sqlTable.data.asName,
            tableCode: this.sqlTable.data.tableCode,
            tableId: this.sqlTable.data.tableId,
            tableName: this.sqlTable.data.tableName,
            ...item
          }
        });
        this.$emit("change");
      }).finally(() => {
        this.loading = false;
      })
    },
    /**
     * @Author: y_zp
     * @description: 删除入参
     */
    deletePlaces(row, seq) {
      this.sqlTable.data.places.splice(seq-1, 1)
    },
    /**
     * @Author: y_zp
     * @description: 添加入参
     */
    addPlaces() {
      this.sqlTable.data.places.push({ key: undefined, value: undefined });
    },

  }
};
</script>
<style lang="less" scoped>
.sql_join_container {
  margin-top: 12px;
  .title {
    height: 40px;
    line-height: 40px;
    border: 1px solid #e8eaec;
    border-bottom: 0 none;
    padding: 0 6px;
    display: flex;
  }
  .source_select {
    margin-left: 24px;
    width: 260px;
    margin-top: 4px;
  }
  .btn_list {
    flex: 1;
    text-align: right;
    .btn {
      margin-left: 12px;
    }
  }
  .sql_join {
    width: 100%;
    height: 220px;
    border: 1px solid #e8eaec;
    overflow: hidden;
  }
}
</style>