<template>
    <div class="page-container row-container">
        <!-- 左侧区域 -->
        <section class="list-part-container">
            <!-- 搜索区域 -->
            <el-form class="list-search-container" :inline="true">
                <el-form-item class="section-title" label="设备类别" />
                <el-form-item label="设备类别名称：">
                    <el-input placeholder="请输入设备类别名称" v-model.trim="name" clearable style="width: 180px"
                        @keydown.enter.prevent />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Plus" v-hasPermi="['business:equipmentCategory:add']"
                        @click="handleShowEquipmentCategoryDialog(null)">
                        新增
                    </el-button>
                </el-form-item>
            </el-form>
            <!-- 设备类别列表区域 -->
            <div class="el-table-container">
                <div class="el-table-inner-container">
                    <el-tree ref="categoryTable" v-loading="equipmentCategoryLoading" :data="equipmentCategoryList"
                        :props="{ label: 'name', children: 'children' }" :expand-on-click-node="false"
                        :filter-node-method="filterNode" default-expand-all node-key="id" highlight-current
                        style="max-height: 100%; overflow-y: auto; margin-bottom: 20px">
                        <template #default="{ node, data }">
                            <div style="
                        display: flex;
                        width: 100%;
                        justify-content: space-between;
                      ">
                                <span>{{ node.label }}</span>
                                <span>
                                    <el-button link type="warning" icon="Edit"
                                        @click="handleShowEquipmentCategoryDialog(data)"
                                        v-hasPermi="['business:equipmentCategory:edit']">编辑
                                    </el-button>
                                    <el-button link type="danger" icon="Delete" @click="handleDeleteCategory(data)"
                                        v-hasPermi="['business:equipmentCategory:remove']">删除
                                    </el-button>
                                </span>
                            </div>
                        </template>
                    </el-tree>
                </div>
            </div>
            <!-- <pagination
          v-show="equipmentCategoryTotal > 0"
          :total="equipmentCategoryTotal"
          :pager-count="4"
          v-model:page="queryEquipmentCategoryParams.pageNum"
          v-model:limit="queryEquipmentCategoryParams.pageSize"
          @pagination="getCategoryList"
        /> -->
        </section>


        <!-- 设备类别表单 -->
        <equipment-category-form ref="categoryRef" @handleSaveSuccess="handleRefreshCategory" />
    </div>
</template>

<script setup name="Equipment">
import equipmentCategoryForm from "./formCategory";
import equipmentDetailForm from "./formDetail";
import {
    listCategory,
    delCategory,
    detailList,
    delDetails,
} from "@/api/business/equipment";
const { proxy } = getCurrentInstance();
const webHost = import.meta.env.VITE_APP_PRODUCTION_API;
/**字典数组 */
const { equipment_status } = proxy.useDict("equipment_status");
const { yes_no } = proxy.useDict("yes_no");
/** 设备类别*/
const categoryTable = ref(null);
const currentCategory = ref({});
const equipmentCategoryList = ref([]);
const equipmentCategoryTotal = ref(0);
const name = ref("");
/** 设备档案管理 */
const selections = ref([]);
const equipmentTable = ref(null);
const equipmentTotal = ref(0);
const equipmentLoading = ref(false);
const equipmentCategoryLoading = ref(true);

/** 设备类别 查询对象 */
const queryEquipmentCategoryParams = ref({
    name: "",
});

/** 设备档案 查询对象 */
const queryParams = ref({
    categoryId: 0,
    keywords: "",
    pageNum: 1,
    pageSize: 10,
});

/****************************************************  生命周期函数区  ****************************************************/
onMounted(() => {
    getCategoryList();
});
/****************************************************  方法区  ****************************************************/

/****************************** 设备类别 事件处理区 ******************************/
/** 获取设备分类列表 */
const getCategoryList = () => {
    queryParams.value.categoryId = null;
    equipmentCategoryLoading.value = true;
    listCategory(queryEquipmentCategoryParams.value).then((response) => {
        equipmentCategoryList.value = response.rows;
        equipmentCategoryTotal.value = response.total;
        console.log(equipmentCategoryList.value.length);

        equipmentCategoryLoading.value = false;
    });
};


/** 刷新设备分类列表 */
const handleRefreshCategory = () => {
    getCategoryList();
};
//设备类别搜索，前端过滤
watch(name, (val) => {
    equipmentTotal.value = 0;
    proxy.$refs["categoryTable"].filter(val);
});
const filterNode = (value, data) => {
    if (!value) {
        return true;
    }
    queryParams.value.equipmentCode = "";
    return data.name.indexOf(value) !== -1;
};
//删除设备类别
const handleDeleteCategory = (data) => {
    var showErrorMessage = false;
    proxy.$modal
        .confirm("确定删除数据项？")
        .then(() => {
            if (data.children) {
                showErrorMessage = true;
                return Promise.reject(new Error("HasChildrenError"));
            }
            return delCategory(data.id);
        })
        .then(() => {
            if (!showErrorMessage) {
                handleRefreshCategory();
                proxy.$modal.msgSuccess("操作成功！");
            }
        })
        .catch(() => { })
        .finally(() => {
            if (showErrorMessage) {
                proxy.$modal.msgError("该设备类别下有子类别，不能删除！");
            }
        });
};



/** 打开设备分类表单 */
const handleShowEquipmentCategoryDialog = (data) => {
    if (data) {
        proxy.$refs.categoryRef.open(data.id);
    }
    proxy.$refs.categoryRef.open();
};


</script>
<style scoped>
:deep(.el-tree-node__label) {
    font-size: 14px !important;
    display: inline-block;
    width: 100%;
}

:deep(.el-tree-node__content) {
    height: 40px;
    border-bottom: 1px solid #ebeef5;
    padding: 8px 0;
    line-height: 23px;
}

.move-handle {
    cursor: move;
    background-color: #eee;
}
</style>