<template>
    <hc-drawer
        v-model="isShow"
        to-id="hc-main-box"
        is-close
        @close="drawerClose"
    >
        <hc-body split :options="{ sizes: [15, 15, 70] }">
            <template #left>
                <hc-card scrollbar>
                    <el-menu
                        :default-active="activeIndex"
                        class="el-menu-vertical-demo"
                        @select="selectMajorDataType"
                    >
                        <el-menu-item
                            v-for="(item, index) in majorDataTypeList"
                            :key="index"
                            :index="String(index)"
                        >
                            <HcIcon name="lightbulb" />

                            <span>{{ item.label }}</span>
                        </el-menu-item>
                    </el-menu>
                </hc-card>
            </template>
            <hc-card scrollbar v-if="isShowTree">
                <ElTree
                    ref="treeRef"
                    :load="treeLoadNode"
                    :props="treeProps"
                    accordion
                    highlight-current
                    lazy
                    @node-click="treeNodeTap"
                />
            </hc-card>
            <template #right>
                <hc-card scrollbar>
                    <template #header>
                        <div class="w-400px">
                            <hc-search-input
                                v-model="searchForm.titleName"
                                @search="searchClick"
                            />
                        </div>
                    </template>

                    <hc-table
                        :column="tableColumn"
                        :datas="tableData"
                        :loading="tableLoading"
                        :index-style="{ width: 60 }"
                    >
                        <template #action="{ row }">
                            <el-button
                                v-if="row.isBussTime !== 2"
                                type="primary"
                                size="small"
                                plain
                                @click="setFiledate(row)"
                                >设置为文件日期
                            </el-button>
                            <el-button
                                v-else
                                type="danger"
                                size="small"
                                plain
                                @click="quitFiledate(row)"
                                >取消
                            </el-button>
                        </template>
                    </hc-table>
                    <!-- <template #action>
                        <hc-pages :pages="searchForm" @change="pageChange" />
                    </template> -->
                </hc-card>
            </template>
        </hc-body>
    </hc-drawer>
</template>

<script setup>
import { ref, watch } from "vue";
import { getArrValue, arrToId, isNullES } from "js-fast-way";
import mainApi from "~api/desk/wbs";
import { getDictionaryData } from "~src/utils/tools";
import treeApi from "~api/wbs/tree";
import privateApi from "~api/wbs/private";

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

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

//监听显示
watch(isShow, (val) => {
    if (val) getDataApi();
});
//最左侧菜单
const activeIndex = ref("1");

const selectMajorDataType = (key, keyPath) => {
    activeIndex.value = key;
    isShowTree.value = false;
    setTimeout(() => {
        isShowTree.value = true;
    }, 10);
};
const majorDataTypeList = ref([]);
const getMajorDataTypeList = async () => {
    majorDataTypeList.value = await getDictionaryData("major_data_type", true);
};
//处理相关数据
const getDataApi = async () => {
    await getMajorDataTypeList();
};

//树配置
const treeProps = {
    label: "title",
    children: "children",
    isLeaf: "isLeaf",
};

//获取数据
const tabTypeLazyTree = async (parentId = "12345678910") => {
    //发起请求
    const { data } = await mainApi.tabTypeLazyTreeAll({
        parentId,
        current: 1,
        size: 1000,
        majorDataType: activeIndex.value,
    });
    const records = getArrValue(data?.records);
    records.forEach((item) => {
        item.isLeaf = !item.hasChildren;
    });
    return { data: records, total: data?.total };
};
const treeRef = ref(null);
const isShowTree = ref(true);
const treeLoadNode = async (node, resolve) => {
    if (node.level === 0) {
        const resData = await tabTypeLazyTree();
        resolve(resData?.data);
    } else {
        const resData = await tabTypeLazyTree(
            node?.data?.primaryKeyId,
            "",
            false,
            {
                current: 1,
                size: 2000,
            }
        );
        resolve(resData?.data);
    }
};

//树节点被点击
const nodeInfo = ref({});
const treeNodeTap = (data, node) => {
    nodeInfo.value = data;
    getTableData();
};

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

//搜索
const searchClick = () => {
    tableData.value = tableData.value.filter((ele) => {
        return ele.eName.indexOf(searchForm.value.titleName) > -1;
    });
};

//分页
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: "eName", name: "字段信息" },
    { key: "action", name: "操作", width: 220, align: "center" },
]);

//获取表格数据
const tableLoading = ref(false);
const getTableData = async () => {
    tableData.value = [];
    tableLoading.value = true;
    const { data } = await treeApi.getTableElments({
        id: nodeInfo.value.id,
    });
    tableLoading.value = false;
    tableData.value = getArrValue(data);
    searchForm.value.total = data?.total || 0;
};
//设置为文件日期
const setFiledate = async (row) => {
    let colId = row.id;
    let colKey = row.tableElementKey;
    let tableId = nodeInfo.value.initTableId;
    const { data, res, code, error } = await privateApi.saveTabusstime({
        colId: colId,
        colKey: colKey,
        tableId: tableId,
    });
    if (!error && code === 200) {
        window.$message.success(res.msg);
        getTableData();
    }
};
const quitFiledate = async (row) => {
    const { res, code, error } = await privateApi.removeTabusstime(row.id);
    console.log(res);
    if (!error && code === 200) {
        window.$message.success(res.msg);
        getTableData();
    }
};
//关闭抽屉
const drawerClose = () => {
    isShow.value = false;
    emit("close");
};
</script>
