<template>
<div class="table_join_container">
  <div class="title">
    <span class="txt"
      v-for="item in [{label: $t('关联表'),value:'table'}, {label: $t('关联条件'),value:'join'}]"
      :key="item.value"
      :class="activeTab == item.value ? 'active':''"
      @click="clickTab(item.value)"
    >{{ item.label }}</span>
    <div class="add_btn">
      <a-button type="link" v-if="activeTab == 'table'" @click="toAddTable">{{ $t('添加关联表') }}</a-button>
      <a-button type="link" v-else @click="toAddJoin">{{ $t('添加表关联') }}</a-button>
    </div>
  </div>
  <vxe-table
    v-show="activeTab == 'table'"
    ref="joinTable"
    show-overflow
    show-header-overflow
    border
    resizable
    :row-config="{ isHover: true }"
    :data="inputTableList"
    height="220"
  >
    <vxe-column field="dbId" title="数据源">
      <template #default="{ row }">
        <sourceSelection v-model="row.data" @change="changeSource(row)"></sourceSelection>
      </template>
    </vxe-column>
    <vxe-column field="tableCode" title="数据表">
      <template #default="{ row }">
        <tableSelection :option="row.data" v-model="row.data.tableCode" @change="changeTable(row)"></tableSelection>
      </template>
    </vxe-column>
    <vxe-column field="asName" title="别名">
      <template #default="{ row }">
        <a-input
          v-model.lazy="row.data.asName"
          :placeholder="$t('请输入表别名')"
          @change="getConditionList"
        />
      </template>
    </vxe-column>
    <vxe-column field="isMain" width="120" title="主表">
      <template #default="{ row }">
        <a-switch v-model="row.data.isMain" @change="changeTableMain(row)" />
      </template>
    </vxe-column>
    <vxe-column
      field="createTime"
      title="操作"
      align="center"
      width="120"
      fixed="right"
    >
      <template #default="{ row }">
        <a-button type="link"
          :disabled="inputTableList.length == 1"
          :class="inputTableList.length == 1 ? '':'a_danger'"
          @click="toDelTable(row)"
        >删除</a-button>
      </template>
    </vxe-column>
    <template #empty>
      <a-empty
        :image-style="{
          height: '80px',
        }"
      >
        <span slot="description">暂无数据</span>
      </a-empty>
    </template>
  </vxe-table>
  <div class="join_condition_container" v-show="activeTab == 'join'">
    <template v-for="(join, i) in joinTable.data.joins">
      <div class="join_config" :key="i">
        <div class="right_delete" @click="toDelJoin(i)"><svg-icon type="icon_right_delete" /></div>
        <a-row class="join_table">
          <a-col :span="2" class="a_label">{{ $t('关联方式') }}：</a-col>
          <a-col :span="3">
            <a-select
              :placeholder="$t('请选择关联方式')"
              v-model="join.joinType"
              :options="joinTypes"
            >
            </a-select>
          </a-col>
          <a-col :span="2" class="a_label">{{ $t('关联表') }}：</a-col>
          <a-col :span="11">
            <a-select
              :placeholder="$t('请选择关联表')"
              v-model="join.right.asName"
              @change="parseJoinTable(join.right)"
              :options="joinTables"
            >
            </a-select>
          </a-col>
          <a-col :span="6" class="a_label">
            <a-button type="link" @click="toAddCondition(join)">{{ $t('添加关联条件') }}</a-button>
            <a-button type="link" @click="toAddCondition(join, 'sql')">{{ $t('添加关联脚本') }}</a-button>
          </a-col>
        </a-row>
        <template v-for="(condition, j) in join.conditions">
          <div class="condition_body" :key="j">
            <template v-if="condition.type == 'sql'">
              <a-row>
                <a-col :span="22">
                  <div class="sql_content">
                    <gl-sql-editor
                      v-model="condition.script"
                      :tables="viewTables"
                    />
                  </div>
                </a-col>
                <a-col :span="2" class="a_label">
                  <a-button type="link" class="a_danger" @click="toDelCondition(join, j)">{{ $t('删除') }}</a-button>
                </a-col>
              </a-row>
            </template>
            <template v-else>
              <a-row :gutter="[10, 12]">
                <a-col :span="10">
                  <a-cascader
                    :options="conditionList"
                    :placeholder="$t('请选择关联字段')"
                    :show-search="{ filter }"
                    @change="changeCondition(condition, 'leftmap', 'left', join)"
                    v-model="condition.leftmap"
                  >
                    <template
                      slot="displayRender"
                      slot-scope="{ selectedOptions }"
                    >
                      <template v-if="selectedOptions.length > 0">
                        <span class="table_name">
                          {{ selectedOptions[0] ? selectedOptions[0].label : '' }}
                        </span>
                        <span class="column_name">
                          .{{ selectedOptions[1] ? selectedOptions[1].value : '' }}
                        </span>
                      </template>
                    </template>
                  </a-cascader>
                </a-col>
                <a-col :span="2">
                  <a-select :placeholder="$t('条件')" v-model="condition.relation" :options="relationType">
                  </a-select>
                </a-col>
                <a-col :span="10">
                  <template v-if="condition.type == 'where'">
                    <a-input
                      :placeholder="$t('请输入关联字段函数')"
                      v-model="condition.right.column.columnName"
                    ></a-input>
                  </template>
                  <template v-else>
                    <a-cascader
                      :options="conditionList"
                      :placeholder="$t('请选择关联字段')"
                      :show-search="{ filter }"
                      v-model="condition.rightmap"
                      @change="changeCondition(condition, 'rightmap', 'right', join)"
                    >
                      <template
                        slot="displayRender"
                        slot-scope="{ selectedOptions }"
                      >
                        <template v-if="selectedOptions.length > 0">
                          <span class="table_name">
                            {{ selectedOptions[0].label }}
                          </span>
                          <span class="column_name">
                            .{{ selectedOptions[1] ? selectedOptions[1].value : '' }}
                          </span>
                        </template>
                      </template>
                    </a-cascader>
                  </template>
                </a-col>
                <a-col :span="2" class="a_label">
                  <a-button type="link" class="a_danger" @click="toDelCondition(join, j)">{{ $t('删除') }}</a-button>
                </a-col>
              </a-row>
            </template>
          </div>
        </template>
      </div>
    </template>
    <div class="add_tool" @click="toAddJoin">
      <a-button type="link"><a-icon type="deployment-unit" />{{ $t('添加表关联') }}</a-button>
    </div>
  </div>
</div>
</template>

<script type="text/javascript" src="./service.js"></script>
<style lang="less" scoped>
.table_join_container {
  margin-top: 12px;
  .title {
    height: 40px;
    line-height: 40px;
    border: 1px solid #e8eaec;
    border-bottom: 0 none;
    padding: 0 6px;
    overflow: hidden;
    .txt {
      padding: 8px 10px;
      color: #000;
      font-size: 14px;
      cursor: pointer;
      &.active {
        font-weight: 600;
        color: #2d5afa;
        border-bottom: 2px solid #2d5afa;
      }
    }
    .add_btn {
      float: right;
      .ant-btn {
        margin-left: 12px;
        margin-top: 4px;
      }
    }
  }
  .join_condition_container {
    width: 100%;
    height: 220px;
    padding: 4px 12px;
    overflow: hidden;
    overflow-y: scroll;
    border: 1px solid #e8eaec;
    .a_label {
      line-height: 32px;
      font-size: 12px;
      font-weight: 500;
      text-align: right;
      color: #000000;
    }
    .join_config {
      position: relative;
      border: 1px solid #dedede;
      border-radius: 8px;
      margin: 8px 0;
      padding: 10px;
      .right_delete {
        &:hover {
          cursor: pointer;
        }
        position: absolute;
        z-index: 1;
        right: 0;
        top: 0;
        color: #ec0000;
        font-size: 18px;
        margin-top: -6px;
      }
      .join_table {
        padding-bottom: 8px;
      }
      .condition_body {
        border-top: 1px solid #dedede;
        padding: 8px;
        .sql_content {
          border: 1px solid #dedede;
          border-radius: 4px;
          height: 36px;
        }
      }
    }
    .table_name {
      font-weight: bold;
    }
    .column_name {
      color: #05a;
    }
  }
  .add_tool {
    &:hover {
      opacity: 0.8;
      cursor: pointer;
    }
    text-align: center;
    padding: 6px;
    margin-top: 6px;
    background: rgba(231, 231, 230, 0.2);
    border: 1px dashed #dedede;
    border-radius: 8px;
  }
}
</style>