<!--
 * @Author: Jason Liu
 * @Date: 2023-11-02 15:02:23
 * @Desc: 
-->
<template>
  <div class="hdw_module_basic_container">
    <a-collapse
      size="small"
      v-model="activeKey"
      :bordered="false"
      expand-icon-position="right"
    >
      <a-collapse-panel key="hwdBasic">
        <template slot="header">
          <win-title>模型信息</win-title>
        </template>
        <a-form-model layout="vertical" ref="baseForm" :model="model">
          <!-- <a-form-model-item label="HDW表编码" prop="tableCode" v-if="model.id">
            <a-dropdown>
              <a-menu slot="overlay" @click="handleMenuClick" :openKeys="[model.id]">
                <template v-for="item in sourceHdws">
                  <a-menu-item :key="item.id" v-if="item.id != model.id">
                    <a-icon type="profile" />{{ item.tableName }}({{ item.tableCode }})
                  </a-menu-item>
                </template>
                <a-menu-item key="add"> <a-icon type="plus" />添加HDW</a-menu-item>
              </a-menu>
              <a-button type="primary" icon="profile">
                {{ model.tableCode }} <a-icon type="down" />
              </a-button>
            </a-dropdown>
          </a-form-model-item> -->
          <a-form-model-item label="来源库">
            <source-selection v-model="dataSource" />
          </a-form-model-item>
          <a-form-model-item label="来源表">
            <table-selection
              :key="dataSource.tableCode"
              :option="dataSource"
              v-model="dataSource.tableCode"
              @change="changeTable"
            />
          </a-form-model-item>
          <a-form-model-item label="数仓模型名" prop="tableCode">
            <a-input
              :disabled="!!model.id"
              v-model.lazy="model.tableCode"
              :placeholder="$t('请输入模型名')"
              allow-clear
              @change="changeTabldeCode"
            />
          </a-form-model-item>
          <a-form-model-item label="数仓模型中文名" prop="tableName">
            <a-input
              :placeholder="$t('请输入模型中文名')"
              v-model="model.tableName"
              allow-clear
            />
          </a-form-model-item>
          <!-- <a-form-model-item label="数仓表编码" prop="tableSno">
            <a-input
              :placeholder="$t('请输入表编码，英文')"
              v-model="model.tableSno"
              allow-clear
            />
          </a-form-model-item> -->
          <a-form-model-item label="关联指标" prop="indicatorCode">
            <div class="indicator_list">
              <template v-if="indicatorInfo.code">
                <a-tooltip :title="indicatorInfo.name">
                  <a-tag color="blue">{{ indicatorInfo.code }}</a-tag>
                </a-tooltip>
              </template>
              <template v-else>
                <template v-for="(item, index) in model.indicatorList">
                  <a-tooltip :key="item.id" :title="item.indicatorName">
                    <a-tag color="blue" closable @close="updateModel()">
                      {{ item.indicatorCode }}
                    </a-tag>
                  </a-tooltip>
                </template>
                <a-tooltip title="添加关联指标">
                  <a-button @click="viewIndicatorSelect = true" icon="plus"></a-button>
                </a-tooltip>
              </template>
            </div>
            <indicator-selection
              :set.sync="viewIndicatorSelect"
              @change="addNewIndicator"
            />
          </a-form-model-item>

          <a-form-model-item label="目标库">
            <a-input-group compact>
              <source-selection v-model="targetDataSource" @change="changeTarget" />
            </a-input-group>
          </a-form-model-item>
        </a-form-model>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

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

<style lang="less" scoped>
.hdw_module_basic_container {
  width: 100%;
  /deep/.ant-collapse-borderless {
    background: #ffffff;
    .ant-collapse-header {
      padding: 8px 40px 8px 4px;
    }
    .ant-collapse-content-box {
      padding: 0;
    }
  }
  /deep/.ant-form {
    .ant-form-item {
      .ant-form-item-label {
        justify-content: flex-start;
        height: 24px;
      }
      .data_table_select_container {
        margin-top: 4px;
      }
      .indicator_list {
        .ant-tag {
          margin-bottom: 4px;
        }
      }
    }
  }
}
</style>
