<template>
  <div class="table_mapping_container">
    <a-card size="small" class="no_border">
      <div slot="title" class="title_bar">
        {{ $t("映射配置") }}
        <a-input-search
          allowClear
          placeholder="请输入列名"
          v-model="queryParams.name"
        ></a-input-search>
        <a-checkbox v-model="queryParams.notMap">{{ $t("未映射列") }}</a-checkbox>
        <a-checkbox v-model="queryParams.notNull">{{ $t("必输列") }}</a-checkbox>
      </div>
      <template slot="extra">
        <a-space :size="12">
          <a-button type="primary" size="small">搜索</a-button>
          <a-button type="primary" size="small" @click="outTablesSmartFill">自动关联</a-button>
        </a-space>
      </template>

      <div class="table_list">
        <vxe-table
          ref="mappingTable"
          show-overflow
          show-header-overflow
          :row-config="{ isHover: true }"
          stripe
          height="auto"
          :loading="loading"
          :data="tableList"
          :edit-config="{ trigger: 'click', mode: 'cell' }"
          :sort-config="{ trigger: 'cell' }"
          :scroll-y="{ enabled: true, gt: 20 }"
        >
          <vxe-column
            type="seq"
            :title="$t('序号')"
            width="50"
            align="center"
          ></vxe-column>
          <vxe-column :title="$t('主键')" field="target.pk" width="70" align="center">
            <template #default="{ row }">
              <span>
                <a-checkbox v-model="row.target.pk"></a-checkbox>
              </span>
            </template>
          </vxe-column>
          <vxe-column
            :title="$t('输出列名')"
            field="target.columnName"
            min-width="200"
            sortable
          >
            <template #default="{ row }">
              <a-popover placement="topRight" :destroyTooltipOnHide="true">
                <template slot="content">
                  <template
                    v-if="
                      verifyMapping[row.target.columnName] &&
                      verifyMapping[row.target.columnName].messages.length > 0
                    "
                  >
                    <a-alert
                      v-for="(item, i) in verifyMapping[row.target.columnName].messages"
                      :key="i"
                      show-icon
                      :message="item.message"
                      :type="item.type"
                    />
                  </template>
                </template>
                <a-tag
                  color="red"
                  size="small"
                  v-if="
                    verifyMapping[row.target.columnName] &&
                    verifyMapping[row.target.columnName].verify == 'error'
                  "
                >
                  <a-icon type="close-circle" />
                </a-tag>
                <a-tag
                  color="orange"
                  size="small"
                  v-else-if="
                    verifyMapping[row.target.columnName] &&
                    verifyMapping[row.target.columnName].verify == 'warning'
                  "
                >
                  <a-icon type="exclamation-circle" />
                </a-tag>
              </a-popover>
              <svg-icon
                class="icon_primary_key"
                type="icon_primary_key"
                v-if="row.target.pk"
              />
              <span :class="[row.target.notNull ? 'ant-form-item-required' : '']">
                {{ row.target.description ? `${row.target.columnName}(${row.target.description})` : row.target.columnName }}
              </span>
            </template>
          </vxe-column>
          <vxe-column :title="$t('空值补全')" width="120" align="center">
            <template #default="{ row }">
              <span>
                <a-checkbox v-model="row.target.isComplete"> </a-checkbox>
              </span>
            </template>
          </vxe-column>
          <vxe-column
            :title="$t('输出列类型')"
            width="140"
            field="target.columnType"
            sortable
          >
            <template #default="{ row }">
              <span>
                {{ row.target.columnType }}
                <template v-if="row.target.olumnAccuracy > 0">
                  ({{ row.target.columnSize }},{{ row.target.olumnAccuracy }})
                </template>
                <template v-else> ({{ row.target.columnSize }}) </template>
              </span>
            </template>
          </vxe-column>
          <vxe-column
            :title="$t('输入列名')"
            field="source.columnName"
            sortable
            width="380"
          >
            <template #default="{ row }">
              <div class="source_column">
                <a-button type="link" icon="form" @click="viewSetColumn(row)"></a-button>
                <a-popover
                  trigger="click"
                  placement="bottom"
                  :destroy-tooltip-on-hide="true"
                  @visibleChange="
                    (e) => {
                      analysisColumn(e, row);
                    }
                  "
                >
                  <template slot="content">
                    <div class="sql_body">
                      <gl-sql-editor
                        v-model="row.source.columnName"
                        :tables="tableColumns"
                      />
                    </div>
                  </template>
                  <template>
                    <span :class="['a_link', row.source.has]">
                      <template v-if="row.source.columnName">
                        <svg-icon v-if="row.source.type == 'fun'" type="icon_function" />
                        {{ row.source.select || row.source.columnName }}
                      </template>
                      <template v-else>{{ $t("点击选择") }}</template>
                    </span>
                  </template>
                </a-popover>

                <a-tooltip>
                  <template slot="title">{{ $t("清空") }}</template>
                  <a-button
                    type="link"
                    icon="highlight"
                    @click="clearColumn(row)"
                  ></a-button>
                </a-tooltip>
              </div>
            </template>
          </vxe-column>

          <vxe-column :title="$t('输入列类型')" width="140">
            <template #default="{ row }">
              <a-dropdown
                v-model="queue[row.target.columnName]"
                :destroy-popup-on-hide="true"
              >
                <span>
                  <template v-if="row.source.lockType">
                    {{ row.source.columnType }}({{ row.source.columnSize }})
                  </template>
                  <template v-else>
                    {{ row.source.columnType || "-" }}
                  </template>
                </span>
                <template slot="overlay">
                  <div class="lock_column_type">
                    <a-card size="small" :title="$t('类型设置')">
                      <a-descriptions bordered size="small">
                        <a-descriptions-item :label="$t('特性')" :span="3">
                          <a-checkbox
                            v-model="row.source.lockType"
                            @change="analysisColumn(false, row)"
                            >{{ $t("锁定类型") }}</a-checkbox
                          >
                        </a-descriptions-item>
                        <template v-if="row.source.lockType">
                          <a-descriptions-item :label="$t('类型')" :span="3">
                            <a-input
                              v-model.lazy="row.source.columnType"
                              :placeholder="$t('请输入输入列类型')"
                              @change="analysisColumn(false, row)"
                            ></a-input>
                          </a-descriptions-item>
                          <a-descriptions-item :label="$t('长度')" :span="3">
                            <a-input-number
                              :placeholder="$t('请输入输入列长度')"
                              v-model.lazy="row.source.columnSize"
                              @change="analysisColumn(false, row)"
                              :min="0"
                              :max="10000"
                            />
                          </a-descriptions-item>
                        </template>
                      </a-descriptions>
                      <br />
                    </a-card>
                  </div>
                </template>
              </a-dropdown>
            </template>
          </vxe-column>
          <vxe-column :title="$t('增量字段')" width="90">
            <template #default="{ row, seq }">
              <a-select style="width: 70px" v-model="incrementalField[seq]" @change="changeIncField(row, seq)">
                <a-select-option value="1">是</a-select-option>
                <a-select-option value="0">否</a-select-option>
              </a-select>
            </template>
          </vxe-column>

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

    <set-source-column
      :show.sync="setColumn.show"
      v-model="setColumn.data"
      :outputTable="outputTable"
      :sourceColumns="sourceColumns"
      @change="
        (data) => {
          analysisColumn(false, data);
        }
      "
    />
  </div>
</template>

<script type="text/javascript" src="./service.js"></script>
<style lang="less" scoped>
.table_mapping_container {
  margin-top: 6px;
  height: calc(100% - 315px);

  /deep/.ant-card {
    height: 100%;
    .ant-card-head {
      padding-right: 0;
      padding-left: 12px;
      &::before {
        left: 0;
      }
    }
    .ant-card-body {
      padding: 0;
      height: calc(100% - 50px);
    }
  }
  .title_bar {
    .ant-input-search {
      font-weight: normal;
      margin: 0 12px;
      width: 180px;
    }
    .ant-checkbox-wrapper {
      font-weight: normal;
    }
  }
  .table_list {
    height: 100%;
    min-height: 420px;
    /deep/.vxe-table {
      .vxe-body--column {
        .vxe-cell {
          padding: 6px 0;
          .source_column {
            display: flex;
            align-items: center;
          }
          .a_link {
            width: calc(100% - 64px);
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .no_source {
          color: #fa8c16;
        }
        .ant-tag {
          min-width: 22px;
          height: 22px;
          line-height: 22px;
          padding: 0;
        }
      }
    }
  }
}
.sql_body {
  width: 500px;
  max-height: 200px;
  overflow: auto;
}
</style>
