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

<script lang="ts" setup>
import { getModelByList } from '@/api/model/modelApi'
import { getObjectByList } from '@/api/model/objectApi'
import useSettingsStore from '@/store/modules/settings'

const settingsStore = useSettingsStore()
const router = useRouter()
const tabbar = useTabbar()

interface TreeNode {
  label: string
  isLeaf: boolean
  modelId: number
  children?: TreeNode[]
}

interface Object {
  modelId: number
  objectId: number
  objectTitle: string
  objectCode: string
  comment: string
}

const state = reactive({
  loading: false,
  keywords: '',
  objectList: [] as TreeNode[],
  dataList: [],
  models: [] as TreeNode[],
  curModelId: 0,
  objects: [] as Object[],
  dialogState: 1,
  objectSearch: {
    keywords: '',
  },
})

const leftTreeRef = ref()
const modelRef = ref()
const getObjectData = async () => {
  const curModelId = state.curModelId
  if (curModelId > 0) {
    state.loading = true
    const { data } = await getObjectByList({ modelId: curModelId })
    state.loading = false
    if (data.length > 0) {
      const view = data.filter((item: { objectType: number }) => item.objectType === 1)
      const entity_object = data.filter((item: { objectType: number }) => item.objectType === 2)
      const treeData = [
        {
          objectTitle: '视图',
          children: view,
          disabled: true,
        },
        {
          objectTitle: '实体类',
          children: entity_object,
          disabled: true,
        },
      ]
      state.objectList = treeData as unknown as TreeNode[]
    }
  }
}

const getModelData = async () => {
  const { data } = await getModelByList('')
  const children: TreeNode[] = []
  data.forEach((item: any) => {
    return children.push({
      label: item.modelTitle,
      modelId: item.modelId,
      isLeaf: true,
    })
  })
  state.models = [
    {
      label: '模型库',
      isLeaf: false,
      modelId: -1,
      children,
    },
  ]

  if (data && data.length > 0) {
    state.curModelId = data[0].modelId
    nextTick(() => {
      leftTreeRef.value.setCurrentKey(data[0].modelId)
    })
    await getObjectData()
  }
}
const onModelAdd = () => {}
onMounted(() => {
  getModelData()
})

// 模型选择
const onTreeNodeClick = (node: TreeNode) => {
  if (node.isLeaf) {
    state.curModelId = node.modelId
    getObjectData()
  }
}

// 检索对象
const onObjectSearch = () => {
  getObjectData()
}

// 选中对象
const onObjectClick = () => { }
</script>

<template>
  <div class="absolute-container">
    <tool-header title="数据模型">
      <template #right>
        <el-button plain @click="onModelAdd">
          <template #icon>
            <el-icon>
              <svg-icon name="i-ep:plus" />
            </el-icon>
          </template>
          新增模型
        </el-button>
      </template>
    </tool-header>

    <div class="page-main">
      <LayoutContainer left-side-width="200px" hide-left-side-toggle>
        <template #leftSide>
          <el-scrollbar class="tree">
            <ElTree ref="leftTreeRef" :data="state.models" default-expand-all node-key="modelId" @node-click="onTreeNodeClick">
              <template #default="{ node, data }">
                <div class="custom-tree-node">
                  <div class="label" :title="node.label">
                    <el-icon v-if="data.isLeaf" size="16px" style="margin-right: 5px;">
                      <svg-icon name="uim:box" />
                    </el-icon>
                    <div class="text">
                      {{ data.label }}
                    </div>
                  </div>
                </div>
              </template>
            </ElTree>
          </el-scrollbar>
        </template>
        <el-row class="right-conatiner" :gutter="20">
          <el-col class="right-conatiner-tree" :lg="6" :md="24" :xs="24">
            <tool-bar>
              <template #center>
                <el-input v-model="state.objectSearch.keywords" placeholder="请输入名称，支持模糊查询" style="padding-right: 10px;" clearable />
                <el-button type="primary" @click="onObjectSearch">
                  <template #icon>
                    <el-icon>
                      <svg-icon name="i-ep:search" />
                    </el-icon>
                  </template>
                </el-button>
              </template>
            </tool-bar>
            <el-scrollbar class="tree" style="margin-top: 15px;">
              <ElTree ref="objectTreeRef" :data="state.objectList" default-expand-all @node-click="onObjectClick">
                <template #default="{ node, data }">
                  <div class="custom-tree-node">
                    <div class="label" :title="node.title">
                      {{ data.objectTitle }}
                    </div>
                  </div>
                </template>
              </ElTree>
            </el-scrollbar>
          </el-col>
          <el-col class="container" :lg="18" :md="24" :xs="24">
            <tool-bar>
              <template #left>
                <h2>属性</h2>
              </template>
              <template #right>
                <el-input v-model="state.objectSearch.keywords" placeholder="请输入关键词筛选字典项" clearable style="width: 200px;" />
                <el-button style="margin-left:10px" @click="getObjectData">
                  <template #icon>
                    <el-icon>
                      <svg-icon name="i-ep:search" />
                    </el-icon>
                  </template>
                </el-button>
              </template>
            </tool-bar>
            <el-table :data="state.dataList" border stripe highlight-current-row height="100%" class="list-table">
              <el-table-column type="selection" align="center" fixed />
              <el-table-column prop="name" label="名称" />
              <el-table-column label="键值" align="center" width="150">
                <template #default="scope">
                  <el-tag type="info">
                    {{ scope.row.value }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </LayoutContainer>
    </div>
  </div>
</template>

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

.absolute-container {
  h2{
    padding: 0;
    margin: 0;
  }

  .right-conatiner{
      .right-conatiner-tree{
        width: 350px;
        box-sizing: border-box;
      }

      .container{
        flex: 1;
      }
  }

  :deep(.left-side) ,:deep(.right-conatiner-tree){
    display: flex;
    flex-direction: column;
    height: 100%;

    .btns {
      display: inline-flex;
      width: 100%;
      margin-bottom: var(--container-padding);

      .add {
        width: 100%;
      }
    }

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

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

        .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;
            }
          }
        }
      }
    }
  }
}
</style>
