<!--
 * @Author: Jason Liu
 * @Date: 2023-03-08 16:14:36
 * @Desc: 字段解析
-->
<template>
  <div class="data_table_source_container">
    <a-row class="row_search">
      <a-col :span="24">
        <a-button type="link">
          {{ nodeData.dbName }}.{{ nodeData.schemaId }}
        </a-button>
        <a-cascader
          :show-search="{ filter: filterSource }"
          change-on-select
          :loading="loading"
          :options="sourceList"
          placeholder="请选择数据源"
          v-model="sourceInfo"
          @change="changeDataSource"
          v-if="false"
        >
          <template
            slot="displayRender"
            slot-scope="{ labels, selectedOptions }"
          >
            <span
              v-for="(label, index) in labels"
              :key="selectedOptions[index].value"
            >
              <span v-if="index === labels.length - 1">
                {{ label }}
              </span>
              <span v-else>
                <svg-icon type="icon_topic" /> <b>{{ label }}</b> /
              </span>
            </span>
          </template>
        </a-cascader>
      </a-col>
    </a-row>
    <a-row class="row_search">
      <a-col :span="24">
        <a-input-search
          placeholder="请输入关键字查询"
          v-model="tableName"
          @search="searchTableList"
        />
      </a-col>
    </a-row>
    <div class="data_list">
      <vxe-table
        show-overflow
        :show-header="false"
        resizable
        :row-config="{ isHover: false }"
        :loading="dataLoading"
        :data="dataList"
        border="none"
        height="100%"
      >
        <vxe-column field="title">
          <template #default="{ row }">
            <template v-if="row.children">
              <svg-icon type="icon_topic" />
              {{ row.name }}
            </template>
            <template v-else>
              <draggable
                :list="[row]"
                :group="{
                  name: 'condition',
                  pull: 'clone',
                  put: false,
                  sort: false,
                }"
                @clone="cloneEntry(row)"
                @start="cloneStart"
                :move="cloneMove"
                @end="cloneEnd"
              >
                <div
                  :class="[
                    'source_table',
                    row.tableName == activeName ? 'active' : '',
                  ]"
                  @click="clickTable(row)"
                >
                  <a-tooltip
                    placement="topLeft"
                    :destroy-tooltip-on-hide="true"
                  >
                    <template slot="title">
                      <span>{{ row.comment || row.tableName }}</span>
                    </template>
                    <i><svg-icon type="icon_data_table" /></i>
                    {{ row.tableName }}
                  </a-tooltip>
                </div>
              </draggable>
            </template>
          </template>
        </vxe-column>

        <template #empty>
          <a-empty
            :image-style="{
              display: 'flex',
              height: '80px',
            }"
          >
            <span slot="description"> 暂无数据 </span>
          </a-empty>
        </template>
      </vxe-table>
    </div>
  </div>
</template>

<script type="text/javascript" src="./service.js"></script>

<style lang="less" scoped>
@import "/src/themes/config.less";
.data_table_source_container {
  height: 100%;
  .row_search {
    margin-bottom: 12px;
  }
  .data_list {
    height: calc(100% - 88px);
    .source_table {
      height: 32px;
      line-height: 32px;
      width: 100%;
      padding-left: 8px;
      min-width: 120px;
      text-overflow: ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
      white-space: nowrap; /*让文字不换行*/
      overflow: hidden; /*超出要隐藏*/
      .svg-icon {
        color: @main;
      }
      &:hover {
        cursor: pointer;
        color: #2d5afa;
        opacity: 0.7;
        background: rgba(46, 116, 255, 0.15);
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        border: 1px solid #2d5afa;
      }

      &.active {
        color: #2d5afa;
        opacity: 0.7;
        background: rgba(46, 116, 255, 0.15);
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
      }
    }
  }
}
</style>
