<!--
 * @Author: Jason Liu
 * @Date: 2022-06-17 10:53:51
 * @Desc: 设置多表格输出
-->
<template>
  <a-drawer
    title="设置表的关联关系"
    width="68%"
    :visible="show"
    :loading="loading"
    @close="show = false"
    :destroy-on-close="true"
    class="setTablesOutsCard"
  >
    <a-tabs v-model="activeKey">
      <a-tab-pane
        v-for="table in nodeData.tables"
        :key="table.asName"
        :tab="`${table.asName}`"
      >
        <template v-if="activeKey == table.asName">
          <a-descriptions layout="vertical" bordered size="small">
            <a-descriptions-item label="输出字段" :span="3">
              <div class="columns_list">
                <vxe-table
                  show-overflow
                  :row-config="{ isHover: true }"
                  stripe
                  height="100%"
                  :data="table.columns"
                  :checkbox-config="{
                    checkField: 'checked',
                    trigger: 'row',
                  }"
                >
                  <vxe-column type="checkbox" width="40" />
                  <vxe-column title="字段名" field="columnName" sortable>
                    <template #default="{ row }">
                      <svg-icon
                        class="icon_primary_key"
                        type="icon_primary_key"
                        v-if="row.pk"
                      />
                      <span>
                        {{
                          row.description
                            ? `${row.description}(${row.columnName})`
                            : row.columnName
                        }}
                      </span>
                    </template>
                  </vxe-column>
                  <vxe-column title="字段别名" field="asName" sortable>
                    <template #default="{ row }">
                      <a-input
                        v-model="row.asName"
                        placeholder="请输入字段别名"
                      ></a-input>
                    </template>
                  </vxe-column>
                  <vxe-column
                    title="字段类型"
                    width="120"
                    field="columnType"
                    sortable
                  />
                  <template #empty>
                    <a-empty
                      :image-style="{
                        height: '80px',
                      }"
                    >
                      <span slot="description"> 暂无数据 </span>
                    </a-empty>
                  </template>
                </vxe-table>
              </div>
            </a-descriptions-item>
          </a-descriptions>
        </template>
      </a-tab-pane>
    </a-tabs>
    <div class="a_foot_nuttop">
      <a-button @click="show = false"> 关闭 </a-button>
      &nbsp;
      <a-button type="primary" @click="fixed"> 确定 </a-button>
    </div>
  </a-drawer>
</template>

<script>
export default {
  name: "setTablesOuts",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  inject: ["getNode", "setNodeData", "getChangeJoinTablesColumns"],
  data() {
    return {
      loading: false,
      show: this.value,
      activeKey: undefined,
      nodeData: {
        tables: [],
        joins: [],
      },
    };
  },
  methods: {
    /**
     * @Author: Jason Liu
     * @description: 获取设置的Node节点
     */
    getSetNode() {
      this.nodeData = this.getNode().data;
      this.activeKey = this.nodeData.tables[0].asName;
    },
    /**
     * @Author: Jason Liu
     * @description: 确定提交
     */
    fixed() {
      this.nodeData.columns = this.getChangeJoinTablesColumns(this.nodeData);
      this.setNodeData(this.nodeData);
      this.show = false;
    },
  },
  watch: {
    value(val) {
      this.show = val;
      if (val) {
        this.getSetNode();
      }
    },
    show(val) {
      this.$emit("input", val);
    },
  },
};
</script>

<style lang="less">
.setTablesOutsCard {
  .ant-drawer-body {
    padding: 0 20px;
    .columns_list {
      height: calc(100vh - 320px);
    }
  }
}
</style>
