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

<script lang="ts" setup name="modelObjectOAM">
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import ObjectOAMComponent from './components/objectOAM.vue'
import useSettingsStore from '@/store/modules/settings'
import { getObjectById } from '@/api/model/modelObjectApi'
import {
  deleteObjectOAMById,
  getObjectOAMById,
  getObjectOAMListById,
} from '@/api/model/modelObjectOAMApi'
import { oamType, sqlType } from '@/utils/tool'

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

const modelId = parseInt(route.params.modelId.toString())
const objectId = parseInt(route.params.objectId.toString())

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

interface ObjectOAM {
  modelId: number
  objectId: number
  oamId: number
  oamTitle: string
  oamCode: string
  oamType: number
  oamStatement: string
  oamDesc: string

  sqlStatement: string
  sqlSelect: string
  sqlFrom: string
  sqlWhere: string
  sqlOrder: string
}

const state = reactive({
  loading: false,
  objectTitle: '',
  objectCode: '',
  objectType: 0,
  keywords: '',
  curOamId: 0,
  oamList: [],
  treeData: [] as TreeNode[],
  oam: {} as ObjectOAM,
  dialogState: 1,
  search: {
    modelId,
    objectId,
    keywords: '',
  },
  params: '',
  result: '',
})

const leftTreeRef = ref()

const getObjectData = async () => {
  state.loading = true
  const { data } = await getObjectById(modelId, objectId)
  state.objectTitle = data.objectTitle
  state.objectCode = data.objectCode
  state.objectType = data.objectType
  state.loading = false
}

const getObjectOAMData = async () => {
  const curOamId = state.curOamId
  if (curOamId > 0) {
    state.loading = true
    const { data } = await getObjectOAMById(modelId, objectId, curOamId)
    state.oam = data
    state.loading = false
  }
}

const getOAMTree = async () => {
  const { modelId, objectId } = state.search
  const { data } = await getObjectOAMListById(modelId, objectId)
  const children: TreeNode[] = []
  data.forEach((item: any) => {
    return children.push({
      label: item.oamTitle,
      oamId: item.oamId,
      oamCode: item.oamCode,
      isLeaf: true,
    })
  })
  state.treeData = [
    {
      label: '对象行为',
      isLeaf: false,
      oamId: -1,
      oamCode: '',
      children,
    },
  ]

  if (data && data.length > 0) {
    state.curOamId = data[0].oamId
    nextTick(() => {
      leftTreeRef.value.setCurrentKey(data[0].oamId)
    })
    await getObjectOAMData()
  }
}

onMounted(() => {
  getObjectData()
  getOAMTree()
})

const formRef = ref<FormInstance>()

// Object OAM选择
const onTreeNodeClick = (node: TreeNode) => {
  if (node.isLeaf) {
    state.curOamId = node.oamId
    getObjectOAMData()
  }
}

const objectOAMRef = ref()
const onObjectOAMAdd = () => {
  objectOAMRef.value.showAddModel(modelId, objectId)
}

const onObjectOAMEdit = () => {
  objectOAMRef.value.showEditModel(modelId, objectId, state.curOamId)
}

const onObjectOAMDelete = (data: { modelId: number; objectId: number; oamId: number; oamTitle: string }) => {
  const { modelId, objectId, oamId, oamTitle } = data
  ElMessageBox.confirm(`确认删除「${oamTitle}」吗？`, '确认信息').then(async () => {
    const { msg } = await deleteObjectOAMById(modelId, objectId, oamId)
    ElMessage.success(msg)
    await getOAMTree()
  })
}

// 选择对象模型回调
const onSuccess = () => {
  getOAMTree()
}

const activeName = ref('first')

// 返回列表页
function goBack() {
  if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
    tabbar.close({ name: 'model_object_list' })
  }
  else {
    router.push({ name: 'model_object_list' })
  }
}
</script>

<template>
  <div class="absolute-container">
    <page-header :title="state.objectTitle" :content="state.objectCode ">
      <el-button size="default" round @click="goBack">
        <template #icon>
          <el-icon>
            <svg-icon name="i-ep:arrow-left" />
          </el-icon>
        </template>
        返回
      </el-button>
    </page-header>
    <div class="page-main">
      <LayoutContainer left-side-width="300px" hide-left-side-toggle>
        <template #leftSide>
          <el-button-group class="btns">
            <el-button type="primary" class="add" @click="onObjectOAMAdd()">
              <template #icon>
                <el-icon>
                  <svg-icon name="i-ep:plus" />
                </el-icon>
              </template>
              对象行为
            </el-button>
            <el-button @click="getObjectOAMData">
              <template #icon>
                <el-icon>
                  <svg-icon name="i-ep:refresh" />
                </el-icon>
              </template>
            </el-button>
          </el-button-group>
          <el-input placeholder="请输入关键词筛选" clearable class="search" />

          <el-scrollbar class="tree">
            <ElTree ref="leftTreeRef" :data="state.treeData" default-expand-all node-key="oamId" @node-click="onTreeNodeClick">
              <template #default="{ node, data }">
                <div class="custom-tree-node">
                  <div class="label" :title="node.label">
                    <div class="text">
                      <el-icon v-if="data.isLeaf" size="16px" style="margin:0 5px 5px 0;">
                        <svg-icon name="ant-design:api-outlined" />
                      </el-icon>
                      <span>{{ data.label }}</span>
                    </div>
                    <div class="code">
                      {{ data.oamCode }}
                    </div>
                  </div>
                </div>
              </template>
            </ElTree>
          </el-scrollbar>
        </template>

        <div class="container">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="行为定义" name="first">
              <el-descriptions
                :title="state.oam.oamTitle"
                direction="horizontal"
                :column="1"
                size="small"
                border
              >
                <template #extra>
                  <el-button type="primary" @click="onObjectOAMEdit">
                    编辑
                  </el-button>
                  <el-button type="primary" @click="onObjectOAMDelete">
                    删除
                  </el-button>
                </template>

                <el-descriptions-item
                  label-align="right"
                  label="编码"
                  width="150px"
                >
                  {{ state.oam.oamCode }}
                </el-descriptions-item>

                <el-descriptions-item
                  label="行为类型"
                  width="150px"
                  label-align="right"
                >
                  {{ oamType(state.oam.oamType) }}
                </el-descriptions-item>

                <el-descriptions-item
                  label-align="right"
                  width="150px"
                  label="操作类型"
                >
                  {{ sqlType(state.oam.sqlType) }}
                </el-descriptions-item>

                <el-descriptions-item
                  v-if="state.oam.sqlType === 1"
                  label-align="right"
                  width="150px"
                  label="Sql"
                >
                  {{ state.oam.sqlStatement }}
                </el-descriptions-item>

                <el-descriptions-item
                  v-if="state.oam.oamType === 3"
                  label-align="right"
                  width="150px"
                  label="Count"
                >
                  {{ state.oam.sqlCount }}
                </el-descriptions-item>

                <el-descriptions-item
                  label-align="right"
                  width="150px"
                  label="说明"
                >
                  {{ state.oam.oamDesc }}
                </el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
          </el-tabs>
        </div>
      </LayoutContainer>
    </div>
    <ObjectOAMComponent ref="objectOAMRef" @success="getOAMTree" />
  </div>
</template>

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

  .page-header {
    margin-bottom: 0;
  }

  .page-main {
    // 让 page-main 的高度自适应
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;

    .flex-container {
      position: static;
    }
  }
}

.flex-container{
  :deep(.left-side) {
    display: flex;
    flex-direction: column;
    height: 100%;
    .search{
      margin: 15px 0;
    }
    .btns {
      display: inline-flex;
      width: 100%;

      .add {
        width: 100%;
      }
    }

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

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

        .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 {
            width: calc(100% - 10px);
            color: var(--el-text-color-primary);
            padding: 10px;

            @include text-overflow;

            .el-icon {
              padding-top: 5px;
            }
          }

          .code {
            padding-left: 20px;
            width: calc(100% - 10px);
            color: var(--el-text-color-placeholder);

            @include text-overflow;
          }

          &:hover {
            .actions {
              display: block;
            }
          }
        }
      }
    }
  }
}
.question {
  .answer {
    margin: 20px 0 0;
    padding-left: 20px;
    font-size: 16px;
    color: var(--el-text-color-secondary);

    li {
      margin-bottom: 10px;
      line-height: 1.5;

      &:last-child {
        margin-bottom: 0;
      }
    }

    span {
      color: var(--el-text-color-primary);
      font-weight: bold;
    }
  }
}
</style>
