<route lang="yaml">
meta:
  enabled: false
  </route>

<script lang="ts" setup>
import model_data from './components/model_data.vue'
import sql_data from './components/sql_data.vue'
import table_data from './components/table_data.vue'

const state = reactive({
  layoutMode: 'model',
})
const model = ref()
const sql = ref()
const table = ref()
const changeLayout = () => {
  switch (state.layoutMode) {
    case 'model':
      model.value.show()
      break
    case 'table':
      window.console.log(table)
      break
    default:
      window.console.log(sql)
      break
  }
}
</script>

<template>
  <div class="absolute-container">
    <tool-header title="数据仓库">
      <template #center>
        <el-radio-group v-model="state.layoutMode" @change="changeLayout">
          <el-radio-button label="model">
            基于模型
          </el-radio-button>
          <el-radio-button label="table">
            基于表
          </el-radio-button>
          <el-radio-button label="sql">
            基于SQL
          </el-radio-button>
        </el-radio-group>
      </template>
      <template #right>
        <div>
          <el-button title="编辑" text>
            <template #icon>
              <el-icon>
                <svg-icon name="ep:printer" />
              </el-icon>
            </template>
          </el-button>
        </div>
      </template>
    </tool-header>
    <model_data v-if="state.layoutMode === 'model'" ref="model" />
    <sql_data v-if="state.layoutMode === 'sql'" ref="sql" />
    <table_data v-if="state.layoutMode === 'table'" ref="table" />
  </div>
</template>

  <style lang="scss" scoped>
  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .absolute-container {
    :deep(.left-side) {
      display: flex;
      flex-direction: column;
      height: 100%;

      .tree {
        flex: 1;
        overflow-y: auto;

        .el-tree {
          .el-tree-node__content {
            height: 26px;
          }

          .el-tree-node__expand-icon.is-leaf{
            padding: 0;
          }

          .is-current > .el-tree-node__content {
            background-color: var(--el-color-primary-light-9);
          }

          .custom-tree-node {
            flex: 1;
            position: relative;
            width: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .label {
              display: inline-flex;
              align-items: center;
              width: calc(100% - 10px);
              color: var(--el-text-color-primary);

              .text {
                @include text-overflow;
              }
            }

            &:hover {
              .actions {
                display: block;
              }
            }

            .actions {
              display: none;
              position: absolute;
              right: 10px;
              top: 50%;
              transform: translateY(-50%);

              .el-button {
                padding: 5px 8px;
              }
            }
          }
        }
      }
    }

    .rightSide{
      padding: 0 10px;
      flex: 1;
      max-height: calc(100vh - 180px);
      overflow-y: auto;
      background-color: var(--g-app-bg);

      .toolBar{
        text-align: right;

        .el-icon {
          color: #606266;
          margin: 0 20px;
          font-size: 1.5em;
          vertical-align: middle;
        }
      }
    }
  }
  </style>
