<template>
    <hc-drawer v-model="isShow" to-id="hc-main-box" is-close @close="drawerClose">
        <hc-body split :options="{ sizes: [14, 96] }">
            <template #left>
                <hc-card scrollbar>
                    <hc-data-tree :h-props="treeProps" :datas="treeData" tree-key="id" @node-tap="treeNodeTap">
                        <template #default="{ node }">{{ node.label }}</template>
                    </hc-data-tree>
                </hc-card>
            </template>
            <hc-card>
                <template #header>
                    <div class="w-400px">
                        <hc-search-input v-model="searchForm.wbsName" @search="searchClick" />
                    </div>
                </template>
                <template #extra>
                    <el-button hc-btn type="primary">编辑表单</el-button>
                    <el-button hc-btn type="danger">删除元素表</el-button>
                    <!-- el-button hc-btn type="warning">排序</el-button -->
                </template>
                <hc-table
                    :column="tableColumn" :datas="tableData" :loading="tableLoading" :index-style="{ width: 60 }"
                    is-check :check-style="{ width: 29 }" @selection-change="tableCheckChange"
                >
                    <template #action="{ row }">
                        <el-link type="primary" @click="rowNodeClick(row)">分配节点</el-link>
                        <el-link type="warning" @click="rowFormulaClick(row)">公式配置</el-link>
                        <el-link type="danger" @click="rowEditClick(row)">编辑元素</el-link>
                    </template>
                </hc-table>
                <template #action>
                    <hc-pages :pages="searchForm" @change="pageChange" />
                </template>
            </hc-card>
        </hc-body>
    </hc-drawer>
</template>

<script setup>
import { ref, watch } from 'vue'
import { HcDelMsg } from 'hc-vue3-ui'
import { getArrValue, getObjValue, isNullES } from 'js-fast-way'
import mainApi from '~api/desk/wbs'

//事件
const emit = defineEmits(['close'])

//双向绑定
const isShow = defineModel('modelValue', {
    default: false,
})

//监听显示
watch(isShow, (val) => {
    if (val) getDataApi()
})

//处理相关数据
const getDataApi = () => {
    getTreeData()
}

//树配置
const treeProps = { label: 'title' }

//获取树接口
const treeData = ref([])
const getTreeData = async () => {
    const { data } = await mainApi.tabTypeLazyTreeAll({
        parentId: '12345678910',
        current: 1,
        size: 1000,
    })
    treeData.value = getArrValue(data?.records)
}

//树节点被点击
const nodeInfo = ref({})
const treeNodeTap = ({ data }) => {
    nodeInfo.value = data
    searchForm.value.parentId = data.id
    searchClick()
}

//搜索表单
const searchForm = ref({ current: 1, size: 30, total: 0 })

//搜索
const searchClick = () => {
    const { parentId } = searchForm.value
    if (isNullES(parentId)) {
        window?.$message?.warning('请先在左侧点击一个节点')
        return
    }
    searchForm.value.current = 1
    getTableData()
}

//分页
const pageChange = ({ current, size }) => {
    const { parentId } = searchForm.value
    if (isNullES(parentId)) {
        window?.$message?.warning('请先在左侧点击一个节点')
        return
    }
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//表格数据
const tableData = ref([])
const tableColumn = ref([
    { key: 'title', name: '名称' },
    { key: 'elementTotal', name: '总量', width: 80, align: 'center' },
    { key: 'tabOwner', name: '所属方', width: 140, align: 'center' },
    { key: 'fillRate', name: '填报率', width: 80, align: 'center' },
    { key: 'action', name: '操作', width: 220, align: 'center' },
])

//获取表格数据
const tableLoading = ref(false)
const getTableData = async () => {
    tableData.value = []
    tableLoading.value = true
    const { data } = await mainApi.tabTypeLazyTreeAll({
        ...searchForm.value,
        total: null,
    })
    tableLoading.value = false
    tableData.value = getArrValue(data?.records)
    searchForm.value.total = data?.total || 0
}

//表格被选择
const tableCheckKeys = ref([])
const tableCheckChange = (rows) => {
    tableCheckKeys.value = rows
}

//分配节点
const rowNodeClick = (row) => {

}

//公式配置
const rowFormulaClick = (row) => {

}

//编辑元素
const rowEditClick = (row) => {

}

//关闭抽屉
const drawerClose = () => {
    isShow.value = false
    emit('close')
}
</script>
