<!-- 分类列表 -->
<template>
    <div class="table-box">
        <div class="card table-main">
            <SearchForm
                :search="search"
                :reset="reset"
                :formData="dataStore.searchFormData"
                :search-param="dataStore.searchParam"
            />
            <!-- default-expand-all -->
            <el-table :data="dataStore.tableData" style="width: 100%; margin-bottom: 20px; font-size: 14px" row-key="id" border>
                <el-table-column prop="id" label="id" />
                <el-table-column prop="name" label="分类名称" />
                <el-table-column prop="sort" label="分类排序">
                    <template #default="{ row }">
                        <div @click.stop="">
                            <el-input v-model="row.sort" @blur="handleBlur(row)" @input="handleInput(row)" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="is_show" label="是否显示">
                    <template #default="{ row }">
                        {{ row.is_show == 1 ? "✔️" : "❌" }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" :width="350">
                    <template #default="scope">
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleAddChild(scope.$index, scope.row)"
                            v-if="scope.row.level != 3"
                            >添加子类</el-button
                        >
                        <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button
                            type="info"
                            size="small"
                            style="cursor: not-allowed"
                            @click="handleAddProduct(scope.$index, scope.row)"
                            >添加产品</el-button
                        >
                        <el-button
                            size="small"
                            type="info"
                            style="cursor: not-allowed"
                            @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-drawer
            v-model="dataStore.visible"
            :show-close="true"
            :size="600"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="handleBeforeClone"
            destroy-on-close
        >
            <template #header="{ titleId, titleClass }">
                <h4 :id="titleId" :class="titleClass">{{ dataStore.title }}</h4>
            </template>
            <rulesForm
                :ruleForm="dataStore.ruleForm"
                :formData="dataStore.formData"
                :rules="dataStore.rules"
                ref="formRef"
                @handleSelectChangeEmits="handleSelectChangeEmits"
                @handleTreesSelectChangeEmits="handleTreesSelectChangeEmits"
            />
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="handleResetClick">重置</el-button>
                    <el-button type="primary" @click="handleConfirmClick">提交</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script setup lang="ts" name="productClassListIndex">
import SearchForm from "@/components/SearchForm/index.vue";
import rulesForm from "@/components/rulesForm/index.vue";
import { integerRexg } from "@/utils/regexp/index";
//getProductCategoryDelApi
import {
    getProductCategoryListApi,
    getArticleCategorySaveApi,
    getProductClassCategoryReadApi,
    getProductCategoryUpdateApi,
    getArticleCategorySortApi,
    getProductClassTcoTreeApi
} from "@/api/modules/productClass";
import { addLabelValue } from "@/utils/addLabelValue";

import { useMsg } from "@/hooks/useMsg";

import { FORM_DATA_LV1, FORM_DATA_LV2, RULE_FORM_LV1, RULE_FORM_LV2, RULES_LV1, RULES_LV2, SEARCH } from "./constant/index";
import { cloneDeep } from "lodash-es";

const formRef: any = ref(null);
const dataStore = reactive<any>({
    visible: false,
    title: "添加产品分类",
    selectLevel: 1,
    searchParam: {}, //搜索参数
    searchFormData: cloneDeep(SEARCH), //搜索配置
    ruleForm: cloneDeep(RULE_FORM_LV1),
    rules: cloneDeep(RULES_LV1),
    formData: cloneDeep(FORM_DATA_LV1),
    row: {},
    tableData: [],
    treeData: []
});
//成本系统
const getProductClassTcoTree = async () => {
    const result = await getProductClassTcoTreeApi();
    if (result?.code === 0) {
        FORM_DATA_LV2[2].options = addLabelValue(result?.data);
    }
};
getProductClassTcoTree();
//列表接口
const getProductCategoryList = async () => {
    const result = await getProductCategoryListApi(dataStore.searchParam);
    if (result?.code === 0) {
        let tableData = cloneDeep(result?.data);
        dataStore.tableData = tableData;
        dataStore.treeData = [];
        dataStore.treeData = addLabelValue(tableData);
        dataStore.treeData.unshift({ value: 0, label: "无" });
    }
};
getProductCategoryList();
//添加子类
const getArticleCategorySave = async (params: any) => {
    const result = await getArticleCategorySaveApi(params);
    if (result?.code === 0) {
        useMsg("success", result?.msg);
        dataStore.visible = false;
        resetFrom();
        formRef!.value!.ruleFormRef.resetFields();
        getProductCategoryList();
    }
};

const handleSelectChangeEmits = (value: any) => {
    if (value.prop === "pid") {
        dataStore.ruleForm.pid = value.id;
    }
};
const handleTreesSelectChangeEmits = (value: any) => {
    console.log(value, "=========value=========");
};
//更新接口
const getProductCategoryUpdate = async () => {
    dataStore.ruleForm.related_tco_category = dataStore.ruleForm.related_tco_category
        ? dataStore.ruleForm.related_tco_category.join(",")
        : dataStore.ruleForm.related_tco_category;
    const result = await getProductCategoryUpdateApi(dataStore.ruleForm);
    if (result?.code === 0) {
        useMsg("success", result?.msg);
        dataStore.visible = false;
        resetFrom();
        getProductCategoryList();
        console.log("走的进来吗");
    } else {
        dataStore.ruleForm.related_tco_category = dataStore.ruleForm.related_tco_category
            .split(",")
            .map((item: any) => Number(item));
    }
};
//产品详情
const getProductClassCategoryRead = async (id: any) => {
    const result = await getProductClassCategoryReadApi(id);
    if (result?.code === 0) {
        dataStore.ruleForm = result?.data;
        if (dataStore.ruleForm.related_tco_category) {
            dataStore.ruleForm.related_tco_category = dataStore.ruleForm.related_tco_category
                .split(",")
                .map((item: any) => Number(item));
        }
        setFormDatOptions();
        getProductCategoryList();
    }
};
//排序
const getArticleCategorySort = async (row: any) => {
    const result = await getArticleCategorySortApi({ id: row.id, sort: row.sort });
    if (result?.code === 0) {
        useMsg("success", result?.msg);
        getProductCategoryList();
    }
};

const search = () => {
    getProductCategoryList();
};
const reset = () => {
    dataStore.searchParam.keywords = "";
    getProductCategoryList();
};
//重置表单配置
const resetFrom = () => {
    if (dataStore.selectLevel == 1 || dataStore.selectLevel == 2) {
        dataStore.ruleForm = cloneDeep(RULE_FORM_LV1);
        dataStore.formData = cloneDeep(FORM_DATA_LV1);
        dataStore.rules = RULES_LV1;
    }
    if (dataStore.selectLevel == 3) {
        dataStore.ruleForm = cloneDeep(RULE_FORM_LV2);
        dataStore.formData = cloneDeep(FORM_DATA_LV2);
        dataStore.rules = RULES_LV2;
    }
};
const setFormDatOptions = () => {
    // dataStore.formData[1].options = [];
    dataStore.formData[1].options = dataStore.treeData;
    // dataStore.formData[1].options.unshift({ value: 0, label: "无" });
    // console.log("12323");
};
//添加子类
const handleAddChild = (index: any, row: any) => {
    dataStore.selectLevel = row.level;
    resetFrom();
    dataStore.visible = true;
    dataStore.title = "添加产品分类";
    setFormDatOptions();
    // dataStore.formData[1].options.unshift({ value: 0, label: "无" });
    // dataStore.formData[1].options = dataStore.treeData;
};

//before-close
const handleBeforeClone = () => {
    resetFrom();
    formRef!.value!.ruleFormRef.resetFields();
    dataStore.visible = false;
};
const handleEdit = (row: any) => {
    dataStore.selectLevel = row.level;
    dataStore.visible = true;
    dataStore.title = "编辑产品分类";
    dataStore.row = row;
    resetFrom();
    getProductClassCategoryRead(row.id);
};
//重置
const handleResetClick = () => {
    if (dataStore.title === "添加产品分类") {
        formRef!.value!.ruleFormRef.resetFields();
        resetFrom();
    } else {
        getProductClassCategoryRead(dataStore.row.id);
    }
};
//提交
const handleConfirmClick = () => {
    if (!formRef.value!.ruleFormRef) return;
    formRef!.value!.ruleFormRef!.validate((valid: any) => {
        if (valid) {
            dataStore.title === "编辑产品分类" ? getProductCategoryUpdate() : getArticleCategorySave(dataStore.ruleForm);
            console.log("submit!");
        } else {
            console.log("error submit!");
            return false;
        }
    });
};
//排序input框失焦
const handleBlur = (row: any) => {
    getArticleCategorySort(row);
};
//
const handleInput = (row: any) => {
    row.sort = integerRexg(row.sort);
};

//添加产品
const handleAddProduct = (index: any, row: any) => {
    console.log(index, row, "=========row========");
};
//删除
const handleDelete = (index: any, row: any) => {
    // getProductCategoryDel(row.id);
    console.log(index, row, "=========row========");
};
</script>

<style scoped></style>
