<template>
    <!-- style="margin-bottom: 16px" -->

    <div class="table-box">
        <div style="padding-bottom: 16px">
            <el-button @click="handleReset(dataStore, editorRef)"> 重置 </el-button>
            <el-button type="primary" @click="handleSubmit(infoRef, imgInfoRef, dataStore)"> 提交 </el-button>
        </div>
        <div class="card table-main">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="基本信息" name="basicInfo">
                    <basicInfo ref="infoRef" :data="dataStore.basicInfoRuleForm" :options="dataStore.options" />
                </el-tab-pane>
                <el-tab-pane label="图片信息" name="imgInfo">
                    <imgInfo :imgInfoData="dataStore.imgInfoData" ref="imgInfoRef" :attrList="dataStore.attrList" />
                </el-tab-pane>
                <el-tab-pane label="产品详情" name="third">
                    <div style="width: 1280px; margin: 0 auto">
                        <Editor v-model:content="dataStore.detail" ref="editorRef" />
                    </div>
                </el-tab-pane>
                <el-tab-pane label="相关信息" name="related">
                    <!-- <related ref="relatedRef" :data="dataStore.related" /> -->
                    <div style="margin-bottom: 16px">
                        <el-button type="primary" size="small" @click="handleRelatedAdd()">添加行</el-button>
                    </div>
                    <FormTable
                        :columns="dataStore.relatedColumns"
                        :tableData="dataStore.relatedTableData"
                        @handleRemote="handleRemote"
                        @handleRemoteClick="handleRemoteClick"
                    >
                        <template #operation="scope">
                            <el-button type="danger" size="small" @click="handleRelatedDelete(scope)">删除行</el-button>
                        </template>
                    </FormTable>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup lang="ts" name="productEditIndex">
import { ref, reactive } from "vue";
import Editor from "@/components/Editor/index.vue";
import {
    getProductDetailsApi,
    getProductListApi,
    getProductAttrsListApi,
    getProductCategoryListApi
} from "@/api/modules/productList";
// import { getProductCategoryListApi } from "@/api/modules/productClass";
import { RELATED_INFO_COLUMNS } from "./constant/related";
import { cloneDeep, debounce } from "lodash-es";
import { messageBox } from "@/utils/messageBox";

import { useMsg } from "@/hooks/useMsg";
import { handleSubmit, handleReset, initDetailParams } from "./utils/edit/index";
import { addLabelValue } from "@/utils/addLabelValue";

//组件引入
import basicInfo from "./components/basicInfo.vue";
import imgInfo from "./components/imgInfo.vue";
//import WangEditor from "@/components/WangEditor/index.vue";
import FormTable from "@/components/FormTable/index.vue";

const $route = useRoute();

const editorRef = ref<any>(null);

//数据集合
const dataStore = reactive<any>({
    relatedColumns: cloneDeep(RELATED_INFO_COLUMNS), //相关信息及下载表格配置
    relatedTableData: [{ related_product_id: null, sort: 1, spu: "" }], //相关信息下载参数
    imgInfoData: {
        cover_image: "",
        video_url: "",
        video_img: "",
        skus: []
    }, //图片信息
    detail: "", //详情
    basicInfoRuleForm: {}, //基本信息表单数据
    options: [], //产品分类
    attrList: [] //产品属性列表
});

const infoRef = ref<any>(null);
const imgInfoRef = ref<any>(null);
const activeName = ref("basicInfo");
//详情
const getProductDetails = async () => {
    let id = $route.query.id;
    if (!id) {
        return;
    }
    const result = await getProductDetailsApi(id);
    if (result?.code === 0) {
        const { data } = result;
        //参数初始化(将参数按照不同的tab区分出来)
        initDetailParams(dataStore, data, editorRef);
    }
};
getProductDetails();
//产品属性列表
const getProductAttrsList = async () => {
    const result = await getProductAttrsListApi();
    if (result?.code === 0) {
        dataStore.attrList = result?.data;
    }
};
getProductAttrsList();
//型号接口(后端大佬说用产品列表接口)
const getProductList = async (query: any) => {
    const result: any = await getProductListApi({
        spu: query,
        is_show: 1,
        page: 1,
        size: 1000
    });
    if (result?.code === 0) {
        let data = cloneDeep(result?.data?.data);
        //参数本地化
        let dataClone = data.map((item: any) => {
            return {
                label: item.spu,
                value: item.spu,
                id: item.id
            };
        });
        dataStore.relatedColumns[0].options = dataClone;
    }
};

//产品分类(后端大佬说直接掉列表接口)
const getProductCategoryList = async () => {
    const result = await getProductCategoryListApi({ is_show: 1 });
    if (result?.code === 0) {
        let dataClone: any = cloneDeep(result?.data);
        dataStore.options = addLabelValue(dataClone);
    }
};
getProductCategoryList();

//相关信息及行远程搜索下拉框点击
const handleRemoteClick = (params: any) => {
    const { item, index } = params;
    console.log(item, index);
    dataStore.relatedTableData[index].related_product_id = item.id;
};
//相关信息及行删除
const handleRelatedDelete = (scope: any) => {
    messageBox("确定要删除该行数据?", () => {
        if (dataStore.relatedTableData.length === 1) {
            useMsg("warning", "请至少保留一行数据 ! ");
            return;
        }
        dataStore.relatedTableData.splice(scope.$index, 1);
    });
};
//相关信息及下载添加行
const handleRelatedAdd = () => {
    //添加行的初始化对象
    let obj = {
        related_product_id: null,
        sort: 1,
        spu: ""
    };
    dataStore.relatedTableData.push(obj);
};
//相关信息及下载远程搜索
const handleRemote = debounce((params: any) => {
    console.log(params, "============>>>>");
    getProductList(params.query);
}, 800);
//产品属性接口
// const getProductAttrs = async () => {
//     const result = await getProductAttrsApi();
//     if (result?.code === 0) {
//         console.log(result.data);
//     }
// };
// getProductAttrs();
</script>

<style scoped></style>
