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

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import BizObjectComponent from '../object/components/Object.vue'
import BizComponent from './components/Biz.vue'
import { deleteBizById, getBizByList } from '@/api/biz/bizApi'
import { deleteObjectById, getObjectByList } from '@/api/biz/bizObjectApi'
import useSettingsStore from '@/store/modules/settings'

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

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

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

const state = reactive({
  loading: false,
  keywords: '',
  treeData: [] as TreeNode[],
  curBizId: 0,
  objectList: [] as Object[],
  dialogState: 1,
  search: {
    keywords: '',
  },
})

const leftTreeRef = ref()
const bizRef = ref()
const getObjectData = async () => {
  const curBizId = state.curBizId
  if (curBizId > 0) {
    state.loading = true
    const { data } = await getObjectByList({ bizId: curBizId })
    state.objectList = data
    state.loading = false
  }
}

const getBizData = async () => {
  const { data } = await getBizByList('')
  const children: TreeNode[] = []
  data.forEach((item: any) => {
    return children.push({
      label: item.bizTitle,
      bizId: item.bizId,
      isLeaf: true,
    })
  })
  state.treeData = [
    {
      label: '事务模型库',
      isLeaf: false,
      bizId: -1,
      children,
    },
  ]

  if (data && data.length > 0) {
    state.curBizId = data[0].bizId
    nextTick(() => {
      leftTreeRef.value.setCurrentKey(data[0].bizId)
    })
    await getObjectData()
  }
}

onMounted(() => {
  getBizData()
})

// 业务新增
const onBizAdd = () => {
  bizRef.value.showAddModel()
}

// 业务编辑
const onBizEdit = (data: { bizId: number }) => {
  const bizId = data.bizId
  bizRef.value.showEditModel(bizId)
}

// 业务删除
const onBizDelete = (data: any) => {
  ElMessageBox.confirm(`确认删除「${data.bizTitle}」吗？`, '确认信息').then(async () => {
    const { msg } = await deleteBizById(data.bizId)
    ElMessage.success(msg)
    await getBizData()
  })
}

// 业务选择
const onTreeNodeClick = (node: TreeNode) => {
  if (node.isLeaf) {
    state.curBizId = node.bizId
    getObjectData()
  }
}

const bizObjectRef = ref()
const objectTableRef = ref()

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

// 新增对象
const onObjectAdd = () => {
  const bizId = state.curBizId
  bizObjectRef.value.showAddModel(bizId)
}

// 编辑对象
const onObjectDetails = (row: { bizId: any; objectId: any }) => {
  if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
    tabbar.open({
      name: 'bizObjectDetails',
      params: {
        bizId: row.bizId,
        objectId: row.objectId,
      },
    })
  }
  else {
    router.push({
      name: 'bizObjectDetails',
      params: {
        bizId: row.bizId,
        objectId: row.objectId,
      },
    })
  }
}

const onObjectOAM = (row: any) => {
  if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
    tabbar.open({
      name: 'bizObjectOAM',
      params: {
        bizId: row.bizId,
        objectId: row.objectId,
      },
    })
  }
  else {
    router.push({
      name: 'bizObjectOAM',
      params: {
        bizId: row.bizId,
        objectId: row.objectId,
      },
    })
  }
}

// 删除对象
const onObjectDelete = (row: any) => {
  const { bizId, objectId, objectTitle } = row
  ElMessageBox.confirm(`确认删除「${objectTitle}」吗？`, '确认信息').then(async () => {
    const { msg } = await deleteObjectById(bizId, objectId)
    ElMessage.success(msg)
    await getObjectData()
  })
}
</script>

<template>
  <div class="absolute-container">
    <tool-header title="事务模型">
      <template #right>
        <el-button v-waves.float type="primary" @click="onBizAdd">
          <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="250px" hide-left-side-toggle>
        <template #leftSide>
          <el-scrollbar class="tree">
            <ElTree ref="leftTreeRef" :data="state.treeData" default-expand-all node-key="bizId" @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="bx:bxs-component" />
                    </el-icon>
                    <div class="text">
                      {{ data.label }}
                    </div>
                  </div>
                  <div v-if="data.isLeaf" class="actions">
                    <el-button-group>
                      <el-button type="info" plain size="small" @click.stop="onBizEdit(data)">
                        <template #icon>
                          <el-icon>
                            <svg-icon name="i-ep:edit" />
                          </el-icon>
                        </template>
                      </el-button>

                      <el-button type="danger" plain size="small" @click.stop="onBizDelete(data)">
                        <template #icon>
                          <el-icon>
                            <svg-icon name="i-ep:delete" />
                          </el-icon>
                        </template>
                      </el-button>
                    </el-button-group>
                  </div>
                </div>
              </template>
            </ElTree>
          </el-scrollbar>
        </template>

        <div class="container">
          <tool-bar>
            <template #right>
              <el-input v-model="state.search.keywords" placeholder="请输入名称，支持模糊查询" style="padding-right: 10px;" clearable />
              <el-button type="primary" @click="onSearch">
                <template #icon>
                  <el-icon>
                    <svg-icon name="i-ep:search" />
                  </el-icon>
                </template>
              </el-button>

              <el-button type="primary" size="default" @click.stop="onObjectAdd">
                <template #icon>
                  <el-icon>
                    <svg-icon name="i-ep:plus" />
                  </el-icon>
                </template>
                业务对象
              </el-button>
            </template>
          </tool-bar>

          <el-table ref="objectTableRef" v-loading="state.loading" class="list-table" :data="state.objectList" size="small" border stripe highlight-current-row height="100%">
            <el-table-column type="index" label="序号" header-align="center" align="center" width="70" />

            <el-table-column prop="objectTitle" label="对象名称" header-align="center" align="center" width="200">
              <template #default="scope">
                <el-icon>
                  <svg-icon name="uim:box" />
                </el-icon>
                <span> &nbsp;&nbsp;{{ scope.row.objectTitle }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="objectCode" label="对象代码" header-align="center" align="center" width="150">
              <template #default="scope">
                <span>{{ scope.row.objectCode }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="comment" label="说明" header-align="center" align="left">
              <template #default="scope">
                <span>{{ scope.row.comment }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" header-align="center" align="center" width="230">
              <template #default="scope">
                <el-button type="primary" size="small" plain @click="onObjectOAM(scope.row)">行为</el-button>
                <el-button type="warning" size="small" plain @click="onObjectDetails(scope.row)">详情</el-button>
                <el-button type="danger" size="small" plain @click="onObjectDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </LayoutContainer>
    </div>
    <BizComponent ref="bizRef" @success="getBizData" />
    <BizObjectComponent ref="bizObjectRef" @success="getObjectData" />
  </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%;

    .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>
