<!--
 * @Author: Jason Liu
 * @Date: 2022-06-22 10:47:51
 * @Desc: 设置输出字段
-->
<template>
  <a-drawer
    title="设置查询条件"
    width="70%"
    :visible="show"
    :loading="loading"
    @close="show = false"
    :destroy-on-close="true"
    class="setWhereStringCard"
  >
    <div class="sql_editor">
      <gl-sql-editor
        v-model="whereSql"
        ref="glSqlEditor"
        :tables="sql_tables"
      />
    </div>
    <div class="a_foot_nuttop">
      <a-button type="primary" @click="$refs.glSqlEditor.sqlFormat()">
        格式化
      </a-button>
      &nbsp;
      <a-button @click="show = false"> 关闭 </a-button>
      &nbsp;
      <a-button type="primary" @click="fixed"> 确定 </a-button>
    </div>
  </a-drawer>
</template>

<script>
const glSqlEditor = require("@/components/glSqlEditor").default;
export default {
  name: "setWhereString",
  components: { glSqlEditor },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    variables: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  inject: ["getData", "setColumns", "setWhereString"],
  data() {
    return {
      show: this.value,
      loading: false,
      nodeData: {},
      whereSql: undefined, //sql语句
      sql_tables: {},
    };
  },
  methods: {
    /**
     * @Author: Jason Liu
     * @description: 确定，提交数据变更
     */
    fixed() {
      this.show = false;
      this.setWhereString(this.whereSql);
    },
    /**
     * @Author: Jason Liu
     * @description: 获取设置的节点内容信息
     */
    getSetNode() {
      this.nodeData = this.getData();
      this.whereSql = this.nodeData.whereString || "";
      let sqlhint = {};
      sqlhint = {};
      sqlhint[this.nodeData.tableCode] = this.nodeData.tableColumns.map(
        (column) => {
          return column.columnName;
        }
      );

      this.variables.forEach((variable) => {
        sqlhint["${" + variable.code + "}"] = [];
      });
      // let test = "${test}";
      // sqlhint[test] = [];
      this.sql_tables = sqlhint;
    },
  },
  watch: {
    value(val) {
      this.show = val;
      if (val) {
        this.getSetNode();
      }
    },
    show(val) {
      this.$emit("input", val);
    },
  },
};
</script>

<style lang="less">
.setWhereStringCard {
  .sql_editor {
    width: 100%;
    min-height: 160px;
    height: calc(100vh - 128px);
  }
}
</style>
