import {defineStore} from 'pinia';
import {deleteLibraryImageById, getProductDetail as apiProductDetail, ProductInfo} from '@/api/product.ts'
import {SelectContent} from "@/views/public/onlineDesign/components/DesignMainLeft.vue"
import {ToolbarType} from "@/enums/toolbarType.ts"
import {bfSuccessMessage} from "@/utils/bfMessage.ts"


/**
 * @Description: 商品信息状态
 * @author：汪明
 * @date 2024/5/9 8:16
 */
export const useProduct = defineStore('productStore', {
    state: () => ({
        ProductInfo: new ProductInfo()
    }),
    getters: {},
    actions: {
        async getProductDetail(productId: string) {
            this.ProductInfo = new ProductInfo(await apiProductDetail(productId))
        }
    }
})



/**
 * @Description: 3d商品信息状态
 * @author：汪明
 * @date 2024/5/9 8:16
 */

interface ThreeProductStoreState {
    themeList: ThemeItem[]
    cateThemeList: ThemeItem[]
    templateGroup:any
    templateList: ThemeItem[]
    backGroupIndex:number
    groupsList: GroupsItem[],
    layerList:any[],
    fabricEditor:any,
    objects:any,
    activeObject:any,
    textInfo:any,
    libraryImages:string[],
    searchValues:ThemeItem[]
}

export interface ThemeItem {
    id: string;
    name: string;
    cover: string;
    directorySceneId: number;
    svg:string
}
export interface GroupsItem {
    groupIndex:number,
    groupId:string,
    image:string,
    url:string,
    textureName:string,
    isShow:number
    name:string
}
;
export const useThreeProduct = defineStore('threeProductStore', {
    state: (): ThreeProductStoreState => ({
        // 2d板片分组列表
        groupsList: [],
        // 模板组
        templateGroup: [],
        // 模板列表
        templateList: [],
        backGroupIndex:0,
        // 主题图片列表
        themeList: [],
        // 主题分类
        cateThemeList: [],
        // 模版图层
        layerList:[],
        fabricEditor:{},
        // 返回2d布片图层
        objects: [],
        // 当前激活项
        activeObject:{
            angle: 0
        },
        textInfo:{
            text: null,
            stroke: null,
            strokeWidth: null,
            canvasFill: '#000000',
            textBackgroundColor: null,
            canvasImage: '',
            id: null,
            opacity: null,
            fill: null,
            fontSize: 12,
            lineHeight: null,
            charSpacing: null,
            fontWeight: null,
            fontStyle: null,
            textAlign: null,
            fontFamily: null,
            TextDecoration: '',
            isEdit: false,
        },
        // 我的图库
        libraryImages: [],
        searchValues:[]
    }),
    getters: {
        // 获取主题列表
        getThemeList: (state: ThreeProductStoreState) => state.themeList,
        // 获取主题分类
        getCateThemeList: (state: ThreeProductStoreState) => state.cateThemeList,
        // 切换主题分类
        tabThemeCate: (state: ThreeProductStoreState) => {
            return (dirId: number) => {
                let themeList: ThemeItem[] = []
                dirId && dirId === -1 ? themeList = state.themeList : themeList = state.themeList.filter((item => item.directorySceneId === dirId));
                return themeList;
            }
        },
        // 获取svg模板列表
        getTemplateList: (state: ThreeProductStoreState) => state.templateGroup[state.backGroupIndex]?.templateList,
        // 获取分组信息
        getGroupsList: (state: ThreeProductStoreState) => state.groupsList,
        // 获取模版图层
        getLayerList: (state: ThreeProductStoreState) => state.fabricEditor.canvas.groupList,
        // 获取我的图库列表
        getLibraryImages: (state: ThreeProductStoreState) => state.libraryImages,
    },
    actions: {
        // 切换类别
        tabThemeCateAction (item:SelectContent)  {
            switch (item.type) {
                case ToolbarType.LAYER:
                    console.log($fabricEditor)
                    this.layerList = $fabricEditor.canvas.groupList
                    console.log(this.layerList)
                    break;
            }
        },
        setLibraryImages (imageList:string[]) {
            imageList.forEach((item:any) => {
                item.cover = item.pic
                delete item.pic
            })
            this.libraryImages = [...imageList, ...this.libraryImages]
        },
        // 删除图片
        async deleteImage (id:string) {
            await deleteLibraryImageById(id)
            bfSuccessMessage('删除成功')
            this.libraryImages = this.libraryImages.filter((item:any) => item.id !== id)
        },
        setText(textInfo: any) {
            console.log('this.textInfo =', this.textInfo)
            this.textInfo = JSON.parse(JSON.stringify(textInfo))
        },
        getSearchValue(value:string) {
            console.log(value)
            if(value === '') this.searchValues = this.themeList
            console.log(this.themeList.filter(item => item.name.includes(value)));
            this.searchValues = this.themeList.filter(item => item.name.includes(value))
        }
    }
})
