admin_home/src/store/modules/template.js

//cms中的接口 获取网站基本信息，网站导航，网站底部导航，网站行政区划，行政职能
import { getSiteInfo, getSiteCategory, getFooterCategoryList} from '@/api/cms'
//自助建站的接口 用于添加基本信息
import {
    getWebsiteintel, checkWebsiteBuild, getAdminSiteInfo, upWebsiteTemplateintel, getAllTemplateClass, getWebsiteTemplateList, addWebsiteTemplateclassintel,
    getWebsiteTemplateclassintel, saveWebsiteTemplate, getWebsiteTemplateInfo, getWebsiteTemplateData, getAdminWebsiteFootAll, addTwinAdPlace, getWebPageType, 
    addWebPageType, checkWebsiteEdit, getWebsiteTemplate
} from '@/api/template'

import { Message,MessageBox } from 'element-ui'; //注意在这里引入是非常不符合规范的

import Vue from 'vue';  //导入Vue 因为我们要进行深层次的json修改，深拷贝的数据无法令视图更新
//所以我们需要使用Vue的$set方法来强制视图更新，在vuex中没有this，这里我们需要通过引入vue来使用vue.$set

//引入随机模板json
//首页 风格1
import randomIndex1 from '@/utils/templateJson/index/style1/1.js';
//首页 风格2
import randomIndex2 from '@/utils/templateJson/index/style1/2.js';

const state = {
    //0.全局配置 start------------------------------------------------------------> 
    editWebsiteId: "",//当前编辑网站的id
    adKey: "",//当前编辑网站的缩写
    editWebsiteClass: "",//当前编辑网站的风格updateWindowData
    stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
    pageDataStatus:{//页面数据完整度
        index:{
            sector:0,//当前板块数量，为0表示一个都没有，最少需要1个模块才能保存
            cid:0,//缺少的导航池id 为0表示没有缺少
            ad:0,//缺少的广告名称，为0表示没有缺少
            adPrice:0//缺少的广告价格，为0表示没有缺少
        },
        class:{
            sector:0,
            cid:0,
            ad:0,
            adPrice:0
        }
    },
    //0.全局配置 end------------------------------------------------------------>

    //1.画布数据 start------------------------------------------------------------>
    pageStatus: 1,//当前编辑哪个页面  1=首页 2=分类页 3=列表页 4=详情页 5=搜索页 6=自定义列表页 7=自定义详情页 
    menuType: 1, //当前菜单显示板块还是组件 1=板块 2=组件 
    previewStatus: false,//是否预览
    gridKey: 0,//使用gridKey来强制更新视图
    loading: false,//是否显示加载中
    ad_id: "",//生成储存的广告标识
    showPage: { //哪些页面可以被展示
        index: true,
        class: true,
        list: true,
        article: true,
        search: true,
        aloneList: true,
        aloneArticle: true
    },
    pageData: { //自助建站拖拽板块的数据，注意，这里并不是提交到后台的数据
        index: [],//首页
        class: [],//分类页
        list: [],//列表页
        article: [],//详情页
        search: [],//搜索页
        aloneList: [],//自定义列表页
        aloneArticle: [],//自定义详情页
    },
    // layout: [
    //   // i = id 
    //   // w = 最大宽度是12
    //   // { i: "0", x: 0, y: 0, w: 12, h: 2, content:""},
    //   // { i: "1", x: 0, y: 0, w: 12, h: 2, content:""},
    // ],
    //1.画布数据 end------------------------------------------------------------>

    //2.站点数据 start------------------------------------------------------------>
    webSiteInfo: "",//网站信息
    webSiteMenu: "",//网站包含的导航池
    webSiteFooterInfo: "",//网站底部信息
    area: {//地区
        economize: [],//省区
        market: [],//市区
        county: []//县区
    },
    departmentList: [],//职能部门
    //2.站点数据 end------------------------------------------------------------>

    //3.画布构造 start------------------------------------------------------------>
    editSectorY: 0,//当前组件在画布中的位置
    mouseXY: {//鼠标位置
        "x": 12,
        "y": 33
    },
    DragPos: {//创建的占位符大小
        "x": null,
        "y": null,
        "w": 12,
        "h": 2,
        "i": null
    },
    //获得gridlayout对象
    gridlayoutObj: null,
    //3.画布构造 end------------------------------------------------------------>

    //4.构造的网站数据 start------------------------------------------------------------>
    editWindowStatus: false,//编辑组件弹出框是否显示
    editComponentWindowStatus: false,//选择组件样式弹出框是否显示
    editWebsiteTemplateJsonWindow: false,//当前准备提交的数据 后期删除
    editWindowTitle: "",//编辑弹出框标题
    editSectorId: 0,//当前正在编辑的板块id
    editDataSort: 0,//当前正在编辑的数据位置
    editComponentSort: 0,//当前正在编辑的组件id
    editComponentType: 0,//当前正在编辑的组件类型
    editComponentSize: 0,//当前组件文字新闻数量
    editComponentSizeImg:0,//当前组件图片新闻数量
    editComponentStyle: 0,//当前编辑的组件样式
    editWebsiteCategory: [],//当前网站全部关联导航
    webSiteData: {
        //1.base网站基本信息
        base: {
            websiteId: "",//网站id
        },
        //2.style信息
        style: {
            styleId: "",//风格id
        },
        //3.板块信息 header,menu,footer 是页面自带的无需构建
        template: {
            //index = 首页 class=分类页 list=列表页 article=详情页 search=搜索页 aloneList=自定义列表页 aloneArticle=自定义详情页
            index: [],
            class: [],//分类页
            list: [],//列表页
            article: [],//详情页
            search: [],//搜索页
            aloneList: [],//自定义列表页
            aloneArticle: []//自定义详情页
        },
        //4.广告位
        ad: {
            top:{
                "width": 830,//宽度
                "height": 110,//高度
                "name": "",//广告名称
                "price": 0,//价格
                "introduce":"",//介绍
                "website_id": "",//网站id
                "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
                "typeid": 2,//广告类型 - 2 图片
                "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
            },
            index: [],
            class: [],
            list: [],
            article: [],
            search: [],
            aloneList: [],
            aloneArticle: []
        }
    },
    canSubmit: false,//当前数据是否可以被提交
    //4.构造的网站数据 end------------------------------------------------------------>

    //5.组件回显数据 start------------------------------------------------------------>
    componentViewData: {
        pid_arr: [],//导航池
        pageSize: "",//展示文字新闻条数
        pageSizeImg: "",//展示图片新闻条数
        adName: "",//广告名称
        titleName: "",//标题名称
        windowKey:0,//级联选择器的key
        price:0//广告价格
    }
    //5.组件回显数据 start------------------------------------------------------------>
}

const mutations = {
    //0.全局配置 start------------------------------------------------------------>
    //设置网站的id
    setEditWebsiteId(state, id) {
        state.editWebsiteId = id;
    },
    //设置网站缩写
    setAdKey(state, key) {
        state.adKey = key;
    },
    //设置网站的风格
    setClassNumber(state, id) {
        state.editWebsiteClass = id;
    },
    //展示步骤
    showStepStatus(state) {
        state.stepStatus = true;
    },
    //隐藏步骤
    hiddenStepStatus(state) {
        state.stepStatus = false;
    },
    //设置步骤
    setPageStatus(state, num) {
        state.pageStatus = num;
    },
    //设置预览状态
    setPreviewStatus(state) {
        state.previewStatus = !state.previewStatus;
    },
    //打开编辑组件弹出框
    setEditWindowStatus(state, data) {
        state.editWindowStatus = true;
        state.editSectorId = data.id;
        state.editSectorY = data.y;
        state.editDataSort = data.dataSort;
        state.editComponentSort = data.sort;
        state.editComponentType = data.type;
        state.editComponentSize = data.size;
        state.editComponentSizeImg = data.sizeImg;
    },
    //更新编辑窗口中的数据
    updateWindowData(state) {
        state.componentViewData.windowKey++;
    },
    //关闭编辑组件弹出框
    closeEditWindowStatus(state) {
        state.editWindowStatus = false;
    },
    //打开选择组件样式弹出框
    setComponentStyleStatus(state, data) {
        state.editComponentWindowStatus = true;
        state.editSectorId = data.id;
        state.editDataSort = data.dataSort;
        state.editComponentSort = data.sort;
        state.editComponentType = data.type;
        state.editComponentStyle = data.style;
    },
    //关闭选择组件样式弹出框
    closeComponentStyleStatus(state) {
        state.editComponentWindowStatus = false;
    },
    //关闭提交数据弹出框
    closeEditWebsiteTemplateJsonWindow(state) {
        state.editWebsiteTemplateJsonWindow = false;
    },
    //选择组件样式
    selectComponentStyleNumber(state, data) {
        state.editComponentStyle = data;
    },
    //设置组件回显数据
    setComponentViewData(state, data) {
        //首页
        if (state.pageStatus == 1) {
            //找到要修改的板块
            const targetModuleIndex = state.pageData.index.findIndex(module => module.i === data.id);
            //判断组件类型 1=新闻 2=广告
            //1=新闻 需要设置导航id
            if (state.editComponentType == 1) {
                state.componentViewData.pid_arr = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.category_arr;
                state.componentViewData.pageSize = state.editComponentSize;
                state.componentViewData.pageSizeImg = state.editComponentSizeImg;
            }
            //2=设置广告名称
            if (state.editComponentType == 2) {
                //state.componentViewData.adName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
                state.componentViewData.adName = state.pageData.index[targetModuleIndex].content.ad.name;
                state.componentViewData.price = state.pageData.index[targetModuleIndex].content.ad.price;                
            }
        }
        //pageStatus==2 分类页
        if (state.pageStatus == 2) {}
        //pageStatus==3 列表页
        if (state.pageStatus == 3) {
            const targetModuleIndex = state.pageData.list.findIndex(module => module.i === data.id);
            //判断组件类型 1=新闻 2=广告
            //1=新闻 需要设置导航id
            if (state.editComponentType == 1) {
                state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_arr;
                state.componentViewData.pageSize = state.editComponentSize;
                state.componentViewData.pageSizeImg = state.editComponentSizeImg;
            }
            //2=设置广告名称
            if (state.editComponentType == 2) {
                state.componentViewData.adName = state.pageData.list[targetModuleIndex].content.ad.name;
                state.componentViewData.price = state.pageData.list[targetModuleIndex].content.ad.price; 
            }
        }
        //pageStatus==4 详情页
        if (state.pageStatus == 4) {
            const targetModuleIndex = state.pageData.article.findIndex(module => module.i === data.id);
            //判断组件类型 1=新闻 2=广告
            //1=新闻 需要设置导航id
            if (state.editComponentType == 1) {
                state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_arr;
                state.componentViewData.pageSize = state.editComponentSize;
            }
            //2=设置广告名称
            if (state.editComponentType == 2) {
                state.componentViewData.adName = state.pageData.article[targetModuleIndex].content.ad.name;
                state.componentViewData.price = state.pageData.article[targetModuleIndex].content.ad.price; 
            }
        }
        //pageStatus==5 搜索页
        if (state.pageStatus == 5) {}
        //pageStatus==6 底部列表页
        if (state.pageStatus == 6) {}
        //pageStatus==7 底部详情页
        if (state.pageStatus == 7) {}
    },
    //生成广告id
    getAdkey(state,sort) {
        
    },
    //清空广告位
    clearAd(state) {
        state.webSiteData.ad.index = [];
        state.webSiteData.ad.class = [];
        state.webSiteData.ad.list = [];
        state.webSiteData.ad.article = [];
        state.webSiteData.ad.search = [];
        state.webSiteData.ad.aloneList = [];
        state.webSiteData.ad.aloneArticle = [];
    },
    //0.全局配置 start------------------------------------------------------------>
    //1.配置模块 start------------------------------------------------------------>
    //获得gridlayout对象
    setGridlayoutObj(state, data) {
        state.gridlayoutObj = data;
    },
    //添加板块 - 在此处进行是否可以添加的判断
    addModule(state, data) {
        //pageStatus==1 首页 index
        if (state.pageStatus == 1) {
            if (state.pageData.index.length >= 10) {
                Message.error('最多只能添加10个通栏！');
                return;
            } else {
                console.log(data.jsonData)
                //判断当前板块是否含有广告位
                // if(data.jsonData.ad){
                //     MessageBox.confirm('您正在添加含有广告位的通栏，此通栏添加后不可删除，但是可以通过：“广告管理 -> 广告位管理” 进行编辑，确定吗？', '注意', {
                //         confirmButtonText: '确定',
                //         cancelButtonText: '取消',
                //     }).then(() => {
                //         this.commit('template/pushModule', data);
                //     }).catch(() => {
                //         Message.success('已取消添加通栏！');
                //     });
                // }else{
                //     this.commit('template/pushModule', data);
                // }
                this.commit('template/pushModule', data);
            }
        }
        //pageStatus==2 分类页 class
        if (state.pageStatus == 2) { 
            if (state.pageData.class.length >= 10) {
                Message.error('最多只能添加10个通栏！');
                return;
            } else {
                console.log(data.jsonData)
                this.commit('template/pushModule', data);
            }
        }
        //pageStatus==3 列表页 list
        if (state.pageStatus == 3) { }
        //pageStatus==4 详情页 article
        if (state.pageStatus == 4) { }
        //pageStatus==5 搜索页 search
        if (state.pageStatus == 5) { }
        //pageStatus==6 自定义列表页 aloneList
        if (state.pageStatus == 6) { }
        //pageStatus==7 自定义详情页 aloneArticle
        if (state.pageStatus == 7) { }
    },
    //该数据可以添加到画布
    pushModule(state,data){
        if (state.pageStatus == 1) {
            console.log(data.jsonData)
            //判断是拖拽的还是点击添加进来的 click=点击
            if (data.source == "click") {
                console.log("通过点击添加一个板块");
                //通过时间戳生成id
                const currentTimestamp = Date.now();
                let id = currentTimestamp;
                //data.type 组件名称 data.h 模块高度 
                //计算当前布局的最大 y 值
                const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
                console.log(data);
                //设置数据在构建json中的位置
                let dataSort = state.pageData.index.length;
                //判断添加的是否为广告模块 如果是 添加一个ad_id
                state.pageData.index.push({
                    //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
                    i: id,
                    x: 0,
                    y: maxY + 1,
                    w: 12,
                    h: data.h,
                    type: data.type,
                    //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
                    content: data.jsonData,
                    dataSort: dataSort,
                });
                console.log("当前添加模块的dataSort为：" + dataSort);
                //当前的页面构建数据
                console.log(state.pageData.index);
            }

            //drag=拖拽
            if (data.source == "drag") {
                //拖拽添加
                console.log("通过拖拽添加一个板块");
                //通过时间戳生成id
                const currentTimestamp = Date.now();
                let id = currentTimestamp;
                //data.type 组件名称 data.h 模块高度 
                //计算当前布局的最大 y 值
                const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
                console.log(data);
                //设置数据在构建json中的位置
                let dataSort = state.pageData.index.length;
                //判断添加的是否为广告模块 如果是 添加一个ad_id
                state.pageData.index.push({
                    //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
                    i: id,
                    x: 0,
                    y: data.y,
                    w: 12,
                    h: data.h,
                    type: data.type,
                    //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
                    content: data.jsonData,
                    dataSort: dataSort,
                });
                console.log("当前添加模块的dataSort为：" + dataSort);
                //当前的页面构建数据
                console.log(state.pageData.index);
                //需要调查一下这里最后的1，1
                state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1, 1);
                try {
                    state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display = "block";
                } catch { 

                }
            }
        }
        //pageStatus==2 分类页 class
        if (state.pageStatus == 2) { 

            if (data.source == "click") {
                const currentTimestamp = Date.now();
                let id = currentTimestamp;
                const maxY = Math.max(...state.pageData.class.map(item => item.y), 0);
                console.log(data);
                let dataSort = state.pageData.class.length;
                state.pageData.class.push({
                    i: id,
                    x: 0,
                    y: maxY + 1,
                    w: 12,
                    h: data.h,
                    type: data.type,
                    content: data.jsonData,
                    dataSort: dataSort,
                });
            }

            if (data.source == "drag") {
                console.log("通过拖拽添加一个板块");
                const currentTimestamp = Date.now();
                let id = currentTimestamp;
                const maxY = Math.max(...state.pageData.class.map(item => item.y), 0);
                console.log(data);
                let dataSort = state.pageData.class.length;
                state.pageData.class.push({
                    i: id,
                    x: 0,
                    y: data.y,
                    w: 12,
                    h: data.h,
                    type: data.type,
                    content: data.jsonData,
                    dataSort: dataSort,
                });
                state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1, 1);
                try {
                    state.gridlayoutObj.$children[state.pageData.class.length].$refs.item.style.display = "block";
                }catch{ 

                }
            }

        }
        //pageStatus==3 列表页 list
        if (state.pageStatus == 3) {
            //判断是拖拽的还是点击添加进来的 click=点击
            if (data.source == "click") {
                console.log("通过点击添加一个板块");
                //通过时间戳生成id
                const currentTimestamp = Date.now();
                let id = currentTimestamp;
                //data.type 组件名称 data.h 模块高度 
                //计算当前布局的最大 y 值
                const maxY = Math.max(...state.pageData.list.map(item => item.y), 0);
                console.log(data);
                //设置数据在构建json中的位置
                let dataSort = state.pageData.list.length;
                state.pageData.list.push({
                    //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
                    i: id,
                    x: 0,
                    y: maxY + 1,
                    w: 12,
                    h: data.h,
                    type: data.type,
                    //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
                    content: data.jsonData,
                    dataSort: dataSort,
                });
            }

            //drag=拖拽
            if (data.source == "drag") {
                //拖拽添加
                console.log("通过拖拽添加一个板块");
                //通过时间戳生成id
                const currentTimestamp = Date.now();
                let id = currentTimestamp;
                //data.type 组件名称 data.h 模块高度 
                //计算当前布局的最大 y 值
                const maxY = Math.max(...state.pageData.list.map(item => item.y), 0);
                console.log(data);
                //设置数据在构建json中的位置
                let dataSort = state.pageData.list.length;
                state.pageData.list.push({
                    //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
                    i: id,
                    x: 0,
                    y: maxY + 1,
                    w: 12,
                    h: data.h,
                    type: data.type,
                    //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
                    content: data.jsonData,
                    dataSort: dataSort,
                });
                console.log("当前添加模块的dataSort为：" + dataSort);
                //当前的页面构建数据
                console.log(state.pageData.list);
                //需要调查一下这里最后的1，1
                state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1, 1);
                try {
                    state.gridlayoutObj.$children[state.pageData.list.length].$refs.item.style.display = "block";
                } catch { }
            }
        }
        //pageStatus==4 详情页 article
        if (state.pageStatus == 4) {
            //判断是拖拽的还是点击添加进来的 click=点击
                if (data.source == "click") {
                    console.log("通过点击添加一个板块");
                    //通过时间戳生成id
                    const currentTimestamp = Date.now();
                    let id = currentTimestamp;
                    //data.type 组件名称 data.h 模块高度 
                    //计算当前布局的最大 y 值
                    const maxY = Math.max(...state.pageData.article.map(item => item.y), 0);
                    console.log(data);
                    //设置数据在构建json中的位置
                    let dataSort = state.pageData.article.length;
                    state.pageData.article.push({
                        //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
                        i: id,
                        x: 0,
                        y: maxY + 1,
                        w: 12,
                        h: data.h,
                        type: data.type,
                        //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
                        content: data.jsonData,
                        dataSort: dataSort,
                    });
                }

                //drag=拖拽
                if (data.source == "drag") {
                    //拖拽添加
                    console.log("通过拖拽添加一个板块");
                    //通过时间戳生成id
                    const currentTimestamp = Date.now();
                    let id = currentTimestamp;
                    //data.type 组件名称 data.h 模块高度 
                    //计算当前布局的最大 y 值
                    const maxY = Math.max(...state.pageData.article.map(item => item.y), 0);
                    console.log(data);
                    //设置数据在构建json中的位置
                    let dataSort = state.pageData.article.length;
                    state.pageData.article.push({
                        //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
                        i: id,
                        x: 0,
                        y: maxY + 1,
                        w: 12,
                        h: data.h,
                        type: data.type,
                        //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
                        content: data.jsonData,
                        dataSort: dataSort,
                    });
                    console.log("当前添加模块的dataSort为：" + dataSort);
                    //当前的页面构建数据
                    console.log(state.pageData.article);
                    //需要调查一下这里最后的1，1
                    state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1, 1);
                    try {
                        state.gridlayoutObj.$children[state.pageData.article.length].$refs.item.style.display = "block";
                    } catch { }
                }
        }
        //pageStatus==5 搜索页 search
        if (state.pageStatus == 5) { }
        //pageStatus==6 自定义列表页 aloneList
        if (state.pageStatus == 6) { }
        //pageStatus==7 自定义详情页 aloneArticle
        if (state.pageStatus == 7) { }
    },
    //删除板块
    deleteModule(state, data) {
        //data.i = id
        //data.dataSort = dataSort
        //pageStatus==1 首页
        if (state.pageStatus == 1) {
            //开始复制 start------------------------------------------------------------>
            //必须通过重新查找id的方式来删除
            // const indexToRemove = state.pageData.index.findIndex(item => item.i === data.i);
            // if (indexToRemove !== -1) {
            //     state.pageData.index.splice(indexToRemove, 1);
            //     Message.success('模块已删除！');
            //     console.log('模块已删除，当前的页面构建数据为：', state.pageData.index);
            // } else {
            //     Message.warning('未找到要删除的模块！');
            // }
            //开始复制 end------------------------------------------------------------>
            // base 0.0.2 如果使用splice方法删除sort，当你就剩下最后一个的时候，会出现找不到那个元素的问题
            // state.pageData.index.splice(data.dataSort,1);
            // Message.success('模块已删除！');
            // console.log(state.pageData.index);
            // 深拷贝整个数组
            try {
                // 1. 先找到要删除的模块
                const indexToRemove = state.pageData.index.findIndex(item => item.i === data.i);
                if (indexToRemove === -1) {
                    Message.warning('未找到要删除的模块！');
                    return;
                }
                // 2. 创建新的数组，不包含要删除的模块
                const newModules = state.pageData.index.filter(item => item.i !== data.i);
                // 3. 重新计算所有模块的 dataSort
                newModules.forEach((module, index) => {
                    module.dataSort = index;
                });
                // 4. 使用 Vue.set 更新整个数组
                Vue.set(state.pageData, 'index', newModules);
                // 5. 强制更新 gridKey 以触发视图重新渲染
                state.gridKey += 1;
                Message.success('模块已删除！');
                console.log('模块已删除，当前的页面构建数据为：', state.pageData.index);
            } catch (error) {
                console.error('删除模块时发生错误:', error);
                Message.error('删除模块时发生错误，请重试！');
            }
        }
        //pageStatus==2 分类页
        if (state.pageStatus == 2) { }
        //pageStatus==3 列表页
        if (state.pageStatus == 3) {
            //开始复制 start------------------------------------------------------------>
            //必须通过重新查找id的方式来删除
            // const indexToRemove = state.pageData.list.findIndex(item => item.i === data.i);
            // if (indexToRemove !== -1) {
            //     state.pageData.list.splice(indexToRemove, 1);
            //     Message.success('模块已删除！');
            //     console.log('模块已删除，当前的页面构建数据为：', state.pageData.list);
            // } else {
            //     Message.warning('未找到要删除的模块！');
            // }
            try {
                // 1. 先找到要删除的模块
                const indexToRemove = state.pageData.list.findIndex(item => item.i === data.i);
                if (indexToRemove === -1) {
                    Message.warning('未找到要删除的模块！');
                    return;
                }
                // 2. 创建新的数组，不包含要删除的模块
                const newModules = state.pageData.list.filter(item => item.i !== data.i);
                // 3. 重新计算所有模块的 dataSort
                newModules.forEach((module, index) => {
                    module.dataSort = index;
                });
                // 4. 使用 Vue.set 更新整个数组
                Vue.set(state.pageData, 'list', newModules);
                // 5. 强制更新 gridKey 以触发视图重新渲染
                state.gridKey += 1;
                Message.success('模块已删除！');
                console.log('模块已删除，当前的页面构建数据为：', state.pageData.list);
            } catch (error) {
                console.error('删除模块时发生错误:', error);
                Message.error('删除模块时发生错误，请重试！');
            }
            //开始复制 end------------------------------------------------------------>
        }
        //pageStatus==4 详情页
        if (state.pageStatus == 4) {
            //开始复制 start------------------------------------------------------------>
            //必须通过重新查找id的方式来删除
            // const indexToRemove = state.pageData.article.findIndex(item => item.i === data.i);
            // if (indexToRemove !== -1) {
            //     state.pageData.article.splice(indexToRemove, 1);
            //     Message.success('模块已删除！');
            //     console.log('模块已删除，当前的页面构建数据为：', state.pageData.article);
            // } else {
            //     Message.warning('未找到要删除的模块！');
            // }
            //开始复制 end------------------------------------------------------------>
            try {
                // 1. 先找到要删除的模块
                const indexToRemove = state.pageData.article.findIndex(item => item.i === data.i);
                if (indexToRemove === -1) {
                    Message.warning('未找到要删除的模块！');
                    return;
                }
                // 2. 创建新的数组，不包含要删除的模块
                const newModules = state.pageData.article.filter(item => item.i !== data.i);
                // 3. 重新计算所有模块的 dataSort
                newModules.forEach((module, index) => {
                    module.dataSort = index;
                });
                // 4. 使用 Vue.set 更新整个数组
                Vue.set(state.pageData, 'list', newModules);
                // 5. 强制更新 gridKey 以触发视图重新渲染
                state.gridKey += 1;
                Message.success('模块已删除！');
                console.log('模块已删除，当前的页面构建数据为：', state.pageData.article);
            } catch (error) {
                console.error('删除模块时发生错误:', error);
                Message.error('删除模块时发生错误，请重试！');
            }
        }
        //pageStatus==5 搜索页
        if (state.pageStatus == 5) { }
        //pageStatus==6 自定义列表页
        if (state.pageStatus == 6) { }
        //pageStatus==7 自定义详情页
        if (state.pageStatus == 7) { }
    },
    //设置组件样式
    setComponentStyleNumber(state, data) {
        let id = state.editSectorId;
        let dataSort = state.editDataSort;
        let sort = state.editComponentSort;
        let num = state.editComponentStyle;
        console.log(id, dataSort, sort, num);
        //pageStatus==1 首页
        if (state.pageStatus == 1) {
            //开始复制 start------------------------------------------------------------>
            // 获取当前模块数据并进行深拷贝
            let module = JSON.parse(JSON.stringify(state.pageData.index[dataSort]));
            //module.content.componentList[sort].component_style = num;
            //确保修改属性时 Vue 能监控到变化
            Vue.set(module.content.componentList, sort, {
                ...module.content.componentList[sort],
                component_style: num
            });
            // 拷贝后直接替换原来的板块
            //state.pageData.index[id] = module;
            // 使用Vue.set来强制视图更新
            Vue.set(state.pageData.index, dataSort, module);
            console.log("当前的板块数据为：");
            console.log(state.pageData.index);
            //开始复制 end------------------------------------------------------------>
        }
        //pageStatus==2 分类页
        if (state.pageStatus == 2) { }
        //pageStatus==3 列表页
        if (state.pageStatus == 3) {
            //开始复制 start------------------------------------------------------------>
            // 获取当前模块数据并进行深拷贝
            let module = JSON.parse(JSON.stringify(state.pageData.list[dataSort]));
            //module.content.componentList[sort].component_style = num;
            //确保修改属性时 Vue 能监控到变化
            Vue.set(module.content.componentList, sort, {
                ...module.content.componentList[sort],
                component_style: num
            });
            // 拷贝后直接替换原来的板块
            //state.pageData.index[id] = module;
            // 使用Vue.set来强制视图更新
            Vue.set(state.pageData.list, dataSort, module);
            console.log("当前的板块数据为：");
            console.log(state.pageData.list);
            //开始复制 end------------------------------------------------------------>
        }
        //pageStatus==4 详情页
        if (state.pageStatus == 4) {
            //开始复制 start------------------------------------------------------------>
            // 获取当前模块数据并进行深拷贝
            let module = JSON.parse(JSON.stringify(state.pageData.article[dataSort]));
            //module.content.componentList[sort].component_style = num;
            //确保修改属性时 Vue 能监控到变化
            Vue.set(module.content.componentList, sort, {
                ...module.content.componentList[sort],
                component_style: num
            });
            // 拷贝后直接替换原来的板块
            //state.pageData.index[id] = module;
            // 使用Vue.set来强制视图更新
            Vue.set(state.pageData.article, dataSort, module);
            console.log("当前的板块数据为：");
            console.log(state.pageData.article);
            //开始复制 end------------------------------------------------------------>
        }
        //pageStatus==5 搜索页
        if (state.pageStatus == 5) { }
        //pageStatus==6 自定义列表页
        if (state.pageStatus == 6) { }
        //pageStatus==7 自定义详情页
        if (state.pageStatus == 7) { }
    },
    //保存全局广告的数据
    saveAdData(state, data) {
        state.webSiteData.ad.top.name = data.data.name;
        state.webSiteData.ad.top.introduce = data.data.introduce;
        state.webSiteData.ad.top.price = data.data.price;
    },
    //保存组件设置的数据
    saveComponentData(state, data) {
        //传入的板块id
        console.log("当前编辑板块：" + data.id)
        //pageStatus==1 首页
        if (state.pageStatus == 1) {
            //开始复制 start------------------------------------------------------------>
            const targetModuleIndex = state.pageData.index.findIndex(module => module.i === data.id);
            console.log("要修改的模块id为：") //找到要修改的板块
            console.log(data.sort) //找到要修改的板块
            console.log(targetModuleIndex) //找到要修改的板块

            //组件类型 1=新闻 2=广告
            
            //注意，vue有一个bug就是，当你修改复杂对象的时候，如果对象的内部是数组
            //vue可能无法检测到变化，而当你修改无法被检测变化的数据时，就会把所有数据都修改成相同的值
            //解决办法是通过vue的set方法将整个对象，即你的数组外层那个对象进行深拷贝，然后修改完再替换回去

            //1=新闻
            if (state.editComponentType == 1) {
                // 获取当前模块数据并进行深拷贝
                let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex])); // 深拷贝整个模块
                // 更新 category_id 和 pageSize
                module.content.componentList[data.sort].componentData.category_id = data.data.pid_id; // 设置 category_id
                module.content.componentList[data.sort].componentData.category_arr = data.data.pid_arr; // 设置 category_arr 用于显示
                module.content.componentList[data.sort].componentData.name = data.data.name; //设置导航池名字
                module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
                module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize

                // 使用Vue.set来强制视图更新
                Vue.set(state.pageData.index, targetModuleIndex, module); // 替换为深拷贝的模块
                console.log("当前的板块数据为：");
                console.log(state.pageData.index);
            }
            //2=广告
            if (state.editComponentType == 2) {
                let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
                //module.content.componentList[data.sort].componentData.text = data.data.adName;
                module.content.ad.name = data.data.adName;
                module.content.ad.introduce = data.data.adName;
                module.content.ad.price = data.data.price;
                Vue.set(state.pageData.index, targetModuleIndex, module);
                console.log("当前的板块数据为：");
                console.log(state.pageData.index);
                //设置用于回显的广告名，否则会导致回显的广告名和实际的广告名不一致
                //因为广告名没有默认值，这会导致watch监听不到，所以这里需要手动设置
                state.componentViewData.adName = data.data.adName;
            }
            //开始复制 end------------------------------------------------------------>
        }

        //pageStatus==2 频道页
        if (state.pageStatus == 2) {}

        //pageStatus==3 列表页
        if (state.pageStatus == 3) {
            //开始复制 start------------------------------------------------------------>
            //1=新闻
            const targetModuleIndex = state.pageData.list.findIndex(module => module.i === data.id);
            console.log("要修改的模块id为：") //找到要修改的板块
            console.log(data.sort) //找到要修改的板块
            console.log(targetModuleIndex) //找到要修改的板块
            if (state.editComponentType == 1) {
                // 获取当前模块数据并进行深拷贝
                let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex])); // 深拷贝整个模块
                // 更新 category_id 和 pageSize
                module.content.componentList[data.sort].componentData.category_id = data.data.pid_id; // 设置 category_id
                module.content.componentList[data.sort].componentData.category_arr = data.data.pid_arr; // 设置 category_arr 用于显示
                module.content.componentList[data.sort].componentData.name = data.data.name; //设置导航池名字
                module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
                module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize

                // 使用Vue.set来强制视图更新
                Vue.set(state.pageData.list, targetModuleIndex, module); // 替换为深拷贝的模块
                console.log("当前的板块数据为：");
                console.log(state.pageData.list);
            }
            //2=广告
            if (state.editComponentType == 2) {
                let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex]));
                //module.content.componentList[data.sort].componentData.text = data.data.adName;
                module.content.ad.name = data.data.adName;
                module.content.ad.introduce = data.data.adName;
                module.content.ad.price = data.data.price;
                Vue.set(state.pageData.list, targetModuleIndex, module);
                console.log("当前的板块数据为：");
                console.log(state.pageData.list);
                state.componentViewData.adName = data.data.adName;
            }
            //开始复制 end------------------------------------------------------------>
        }


        //pageStatus==4 详情页
        if (state.pageStatus == 4) {
            //开始复制 start------------------------------------------------------------>
            const targetModuleIndex = state.pageData.article.findIndex(module => module.i === data.id);
            console.log("要修改的模块id为：") //找到要修改的板块
            console.log(data.sort) //找到要修改的板块
            console.log(targetModuleIndex) //找到要修改的板块
            if (state.editComponentType == 1) {
                // 获取当前模块数据并进行深拷贝
                let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex])); // 深拷贝整个模块
                // 更新 category_id 和 pageSize
                module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
                module.content.componentList[data.sort].componentData.category_arr = data.data.pid_arr; // 设置 category_arr 用于显示
                module.content.componentList[data.sort].componentData.name = data.data.name; //设置导航池名字
                module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
                module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize

                // 使用Vue.set来强制视图更新
                Vue.set(state.pageData.article, targetModuleIndex, module); // 替换为深拷贝的模块
                console.log("当前的板块数据为：");
                console.log(state.pageData.article);
            }
            //2=广告
            if (state.editComponentType == 2) {
                let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
                //module.content.componentList[data.sort].componentData.text = data.data.adName;
                module.content.ad.name = data.data.adName;
                module.content.ad.introduce = data.data.adName;
                module.content.ad.price = data.data.price;
                Vue.set(state.pageData.article, targetModuleIndex, module);
                console.log("当前的板块数据为：");
                console.log(state.pageData.article);
                state.componentViewData.adName = data.data.adName;
            }
            //开始复制 end------------------------------------------------------------>
        }
        //pageStatus==5 搜索页
        if (state.pageStatus == 5) {}
        //pageStatus==6 底部列表页
        if (state.pageStatus == 6) {}
        //pageStatus==7 底部详情页
        if (state.pageStatus == 7) {}
    },
    //通过按钮移动板块 (暂时停用)
    moveModule(state, data) {
        Message.error("该功能暂时禁用")
        // pageStatus == 1 首页
        // if (state.pageStatus == 1) {
        //   const moveType = data.moveType;
        //   const moduleId = data.i;
        //   const modules = state.pageData.index;

        //   // 深拷贝 modules，避免直接操作原数据
        //   const newModules = JSON.parse(JSON.stringify(modules));

        //   // 查找模块在数组中的实际索引
        //   const thisIndex = newModules.findIndex(module => module.i === moduleId);
        //   if (thisIndex === -1) {
        //     Message.error('模块未找到！');
        //     return;
        //   }
        //   const thisY = newModules[thisIndex].y;
        //   let thatY;

        //   if (moveType === 'up') {
        //     thatY = Math.max(
        //       ...newModules.filter(item => item.y < thisY).map(item => item.y)
        //     );
        //     if (thatY === -Infinity) {
        //       Message.error('已经是顶部了！');
        //       return;
        //     }
        //     const thatIndex = newModules.findIndex(item => item.y === thatY);
        //     if (thatIndex === -1) {
        //       Message.error('上方模块未找到！');
        //       return;
        //     }
        //     // 交换y值
        //     [newModules[thisIndex].y, newModules[thatIndex].y] = [newModules[thatIndex].y, newModules[thisIndex].y];

        //   } else if (moveType === 'down') {
        //     thatY = Math.min(
        //       ...newModules.filter(item => item.y > thisY).map(item => item.y)
        //     );
        //     if (thatY === Infinity) {
        //       Message.error('已经是底部了！');
        //       return;
        //     }
        //     const thatIndex = newModules.findIndex(item => item.y === thatY);
        //     if (thatIndex === -1) {
        //       Message.error('下方模块未找到！');
        //       return;
        //     }
        //     // 交换y值
        //     [newModules[thisIndex].y, newModules[thatIndex].y] = [newModules[thatIndex].y, newModules[thisIndex].y];
        //   } else {
        //     Message.error('未知的移动类型！');
        //     return;
        //   }

        //   // 交换后对模块进行排序以确保顺序一致
        //   newModules.sort((a, b) => a.y - b.y);

        //   // 使用 Vue.set 强制更新数组，确保视图更新
        //   //Vue.set(state.pageData, 'index', newModules); // 这里更新整个数组
        //   state.pageData.index = newModules;
        //   //state.gridKey+=1;

        //   console.log(state.pageData.index); // 打印查看是否已修改
        // }

        // // pageStatus == 2 分类页
        // if (state.pageStatus == 2) {}
        // // pageStatus == 3 列表页
        // if (state.pageStatus == 3) {}
        // // pageStatus == 4 详情页
        // if (state.pageStatus == 4) {}
        // // pageStatus == 5 搜索页
        // if (state.pageStatus == 5) {}
        // // pageStatus == 6 自定义列表页
        // if (state.pageStatus == 6) {}
        // // pageStatus == 7 自定义详情页
        // if (state.pageStatus == 7) {}
    },
    //从外部拖拽板块
    drag(state, data) {
        // pageStatus == 1 首页
        if (state.pageStatus == 1) {
            //开始复制 start------------------------------------------------------------>
            let parentRect = document.getElementById('content').getBoundingClientRect();
            //console.log(parentRect); 获取画布
            let mouseInGrid = false;
            if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
                mouseInGrid = true;
            }
            //state.gridlayoutObj
            //如果没有占位符就创建一个
            if (mouseInGrid === true && (state.pageData.index.findIndex(item => item.i === 'drop')) === -1) {
                state.pageData.index.push({
                    x: (state.pageData.index.length * 2) % (this.colNum || 12),
                    y: state.pageData.index.length + (this.colNum || 12), // puts it at the bottom
                    w: 12,
                    h: 2,
                    i: 'drop',
                });
            }
            //如果已经存在占位符
            let index = state.pageData.index.findIndex(item => item.i === 'drop');
            if (index !== -1) {
                try {
                    state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display = "none";
                } catch {

                }
                let el = state.gridlayoutObj.$children[index];
                el.dragging = { "top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left };
                let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);

                if (mouseInGrid === true) {
                    state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
                    state.DragPos.i = String(index);
                    state.DragPos.x = state.pageData.index[index].x;
                    state.DragPos.y = state.pageData.index[index].y;
                }
                if (mouseInGrid === false) {
                    state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
                    state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
                }
            }
            //开始复制 end------------------------------------------------------------>
        }
        // pageStatus == 2 分类页
        if (state.pageStatus == 2) { }
        // pageStatus == 3 列表页
        if (state.pageStatus == 3) {
            //开始复制 start------------------------------------------------------------>
            let parentRect = document.getElementById('content').getBoundingClientRect();
            //console.log(parentRect); 获取画布
            let mouseInGrid = false;
            if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
                mouseInGrid = true;
            }
            //如果没有占位符就创建一个
            if (mouseInGrid === true && (state.pageData.list.findIndex(item => item.i === 'drop')) === -1) {
                state.pageData.list.push({
                    x: (state.pageData.list.length * 2) % (this.colNum || 12),
                    y: state.pageData.list.length + (this.colNum || 12), // puts it at the bottom
                    w: 12,
                    h: 2,
                    i: 'drop',
                });
            }
            //如果已经存在占位符
            let index = state.pageData.list.findIndex(item => item.i === 'drop');
            if (index !== -1) {
                try {
                    state.gridlayoutObj.$children[state.pageData.list.length].$refs.item.style.display = "none";
                } catch {

                }
                let el = state.gridlayoutObj.$children[index];
                el.dragging = { "top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left };
                let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);

                if (mouseInGrid === true) {
                    state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
                    state.DragPos.i = String(index);
                    state.DragPos.x = state.pageData.list[index].x;
                    state.DragPos.y = state.pageData.list[index].y;
                }
                if (mouseInGrid === false) {
                    state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
                    state.pageData.list = state.pageData.list.filter(obj => obj.i !== 'drop');
                }
            }
            //开始复制 end------------------------------------------------------------>
        }
        // pageStatus == 4 详情页
        if (state.pageStatus == 4) {
            //开始复制 start------------------------------------------------------------>
            let parentRect = document.getElementById('content').getBoundingClientRect();
            //console.log(parentRect); 获取画布
            let mouseInGrid = false;
            if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
                mouseInGrid = true;
            }
            //如果没有占位符就创建一个
            if (mouseInGrid === true && (state.pageData.article.findIndex(item => item.i === 'drop')) === -1) {
                state.pageData.article.push({
                    x: (state.pageData.article.length * 2) % (this.colNum || 12),
                    y: state.pageData.article.length + (this.colNum || 12), // puts it at the bottom
                    w: 12,
                    h: 2,
                    i: 'drop',
                });
            }
            //如果已经存在占位符
            let index = state.pageData.article.findIndex(item => item.i === 'drop');
            if (index !== -1) {
                try {
                    state.gridlayoutObj.$children[state.pageData.article.length].$refs.item.style.display = "none";
                } catch {

                }
                let el = state.gridlayoutObj.$children[index];
                el.dragging = { "top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left };
                let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);

                if (mouseInGrid === true) {
                    state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
                    state.DragPos.i = String(index);
                    state.DragPos.x = state.pageData.article[index].x;
                    state.DragPos.y = state.pageData.article[index].y;
                }
                if (mouseInGrid === false) {
                    state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
                    state.pageData.article = state.pageData.article.filter(obj => obj.i !== 'drop');
                }
            }
            //开始复制 end------------------------------------------------------------>
        }
        // pageStatus == 5 搜索页
        if (state.pageStatus == 5) { }
        // pageStatus == 6 自定义列表页
        if (state.pageStatus == 6) { }
        // pageStatus == 7 自定义详情页
        if (state.pageStatus == 7) { }
    },
    //拖拽结束 定位落点
    dragend(state, data) {
        // pageStatus == 1 首页
        if (state.pageStatus == 1) {
            //开始复制 start------------------------------------------------------------>
            //获取画布尺寸
            let parentRect = document.getElementById('content').getBoundingClientRect();
            //判断是否在画布内
            let mouseInGrid = false;
            if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
                mouseInGrid = true;
            }
            //如果在画布内，开始创建元素
            if (mouseInGrid === true) {
                //alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
                state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
                state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');

                // UNCOMMENT below if you want to add a grid-item
                /*
                this.layout.push({
                    x: DragPos.x,
                    y: DragPos.y,
                    w: 1,
                    h: 1,
                    i: DragPos.i,
                });
                this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1);
                try {
                    this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block";
                } catch {
                }
                */
                let sendData = {
                    source: "drag",//添加时判断此模块来自外部拖拽，而不是点击
                    type: data.type,
                    h: data.h,
                    jsonData: data.jsonData,
                    x: state.DragPos.x,
                    y: state.DragPos.y,
                    w: 12,
                }
                //开发到这里了，注意我可能还需要上面那个 this.$refs.gridLayout.dragEvent方法
                this.commit('template/addModule', sendData);
            }
            //开始复制 end------------------------------------------------------------>
        }
        // pageStatus == 2 分类页
        if (state.pageStatus == 2) { }
        // pageStatus == 3 列表页
        if (state.pageStatus == 3) {
            //开始复制 start------------------------------------------------------------>
            //获取画布尺寸
            let parentRect = document.getElementById('content').getBoundingClientRect();
            //判断是否在画布内
            let mouseInGrid = false;
            if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
                mouseInGrid = true;
            }
            //如果在画布内，开始创建元素
            if (mouseInGrid === true) {
                //alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
                state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
                state.pageData.list = state.pageData.list.filter(obj => obj.i !== 'drop');

                let sendData = {
                    source: "drag",//添加时判断此模块来自外部拖拽，而不是点击
                    type: data.type,
                    h: data.h,
                    jsonData: data.jsonData,
                    x: state.DragPos.x,
                    y: state.DragPos.y,
                    w: 12,
                }
                this.commit('template/addModule', sendData);
            }
            //开始复制 end------------------------------------------------------------>
        }
        // pageStatus == 4 详情页
        if (state.pageStatus == 4) {
            //开始复制 start------------------------------------------------------------>
            //获取画布尺寸
            let parentRect = document.getElementById('content').getBoundingClientRect();
            //判断是否在画布内
            let mouseInGrid = false;
            if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
                mouseInGrid = true;
            }
            //如果在画布内，开始创建元素
            if (mouseInGrid === true) {
                //alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
                state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
                state.pageData.article = state.pageData.article.filter(obj => obj.i !== 'drop');

                let sendData = {
                    source: "drag",//添加时判断此模块来自外部拖拽，而不是点击
                    type: data.type,
                    h: data.h,
                    jsonData: data.jsonData,
                    x: state.DragPos.x,
                    y: state.DragPos.y,
                    w: 12,
                }
                this.commit('template/addModule', sendData);
            }
            //开始复制 end------------------------------------------------------------>
        }
        // pageStatus == 5 搜索页
        if (state.pageStatus == 5) { }
        // pageStatus == 6 自定义列表页
        if (state.pageStatus == 6) { }
        // pageStatus == 7 自定义详情页
        if (state.pageStatus == 7) { }
    },
    //修改首页板块高度
    setModuleHeight(state, data) {
        // pageStatus == 1 首页
        if (state.pageStatus == 1) {
            console.log(data);
            state.pageData.index[data.i].h = data.h;
            console.log(state.pageData.index[data.i]);
        }
        // pageStatus == 2 分类页
        if (state.pageStatus == 2) { }
        // pageStatus == 3 列表页
        if (state.pageStatus == 3) {
            console.log(data);
            state.pageData.list[data.i].h = data.h;
            console.log(state.pageData.list[data.i]);
        }
        // pageStatus == 4 详情页
        if (state.pageStatus == 4) {
            console.log(data);
            state.pageData.article[data.i].h = data.h;
            console.log(state.pageData.article[data.i]);
        }
        // pageStatus == 5 搜索页
        if (state.pageStatus == 5) { }
        // pageStatus == 6 自定义列表页
        if (state.pageStatus == 6) { }
        // pageStatus == 7 自定义详情页
        if (state.pageStatus == 7) { }
    },
    //格式化模板信息
    formatTemplateInfo(state, data) {
        //1.处理广告位
        //先把广告位的数据清空，再重新获取
        //this.commit('template/clearAd');
        // 深拷贝数据，避免直接修改原数据
        let clonedData = JSON.parse(JSON.stringify(data));
        // 按照 clonedData.data.y 的大小排序
        clonedData.data.sort((a, b) => a.y - b.y);
        //获取当前页面名称
        let getPageName = () =>{
            if(state.pageStatus==1){return "index";}
            if(state.pageStatus==2){return "category";}
            if(state.pageStatus==3){return "list";}
            if(state.pageStatus==4){return "detail";}
            if(state.pageStatus==5){return "search";}
            if(state.pageStatus==6){return "page";}
            if(state.pageStatus==7){return "page";}
        }
        // 取出每个通栏中的广告，并保存到state.webSiteData.ad中
        for (let index in clonedData.data) {
            if(clonedData.data[index].content.ad){
                let pageName = getPageName();
                let ad_index = Number(index)+1;
                let ad_tag = `${state.adKey}_${pageName}_${ad_index}`;
                clonedData.data[index].content.ad.website_id = state.editWebsiteId;
                clonedData.data[index].content.ad.ad_tag = ad_tag;
                state.webSiteData.ad[data.type].push(clonedData.data[index].content.ad);
            }
            // for(let item of clonedData.data[index].content.componentList){
            //     if(item.componentData.category_id!=undefined){
            //         console.log("--------------------------------")
            //         console.log(item);
            //     }
            // }
        }


        //设置全局的广告位名称
        state.webSiteData.ad.top.website_id = state.editWebsiteId;
        state.webSiteData.ad.top.ad_tag = `${state.adKey}_top`

        let websiteData = [];
        // 获取板块的 sort
        for (let index = 0; index < clonedData.data.length; index++) {
            console.log(clonedData.data[index].content);
            // 使用 Vue.set 来确保属性变更能被 Vue 追踪
            Vue.set(clonedData.data[index].content, 'sort', Number(index) + 1);
            // if (data.type == "index") {
            //   // 不要把数据直接保存到 state.webSiteData.template 中，否则无法删除
            //   websiteData.push(clonedData.data[index].content);
            // }
            websiteData.push(clonedData.data[index].content);
        }
        // 保存到对应的页面 json 中
        if (data.type == "index") {
            state.webSiteData.template.index = websiteData;
        }
        if (data.type == "class") {
            state.webSiteData.template.class = websiteData;
        }
        if (data.type == "list") {
            state.webSiteData.template.list = websiteData;
        }
        if (data.type == "article") {
            state.webSiteData.template.article = websiteData;
        }
    },
    //保存模板
    saveTemplate(state) {
        //第一步：
        //保存网站id和模板风格id
        state.webSiteData.base.websiteId = state.editWebsiteId;
        state.webSiteData.style.styleId = state.editWebsiteClass;
        //第二步：
        //格式化数据
        //2.1 清理广告位数据
        this.commit('template/clearAd');
        //2.2 格式化index页面数据
        this.commit('template/formatTemplateInfo', { data: state.pageData.index, type: "index" });
        //2.2 格式化class页面数据
        this.commit('template/formatTemplateInfo', { data: state.pageData.class, type: "class" });
        //2.3 格式化list的信息
        //this.commit('template/formatTemplateInfo', { data: state.pageData.list, type: "list" });
        //3.4 格式化article的信息
        //this.commit('template/formatTemplateInfo', { data: state.pageData.article, type: "article" });
        //展示构造json 后期移除
        state.editWebsiteTemplateJsonWindow = true;

        //第三步：
        //检测模板数据完整度，如果不完整阻止用户保存
        this.commit('template/pageCheck', {data: state.pageData});

    },
    //检测模板完整度
    pageCheck(state, data) {
        //获得首页板块数量
        state.pageDataStatus.index.sector = data.data.index.length;
        //获得首页没有设置导航池的板块数量
        let noCid = 0;
        for(let index in data.data.index){
            for(let i in data.data.index[index].content.componentList){
                //console.log(data.data.index[index].content.componentList[i].componentData.category_id)
                if(data.data.index[index].content.componentList[i].componentData.category_id!=undefined){
                    if(data.data.index[index].content.componentList[i].componentData.category_id==""){
                        noCid++;
                    }
                }
            }
        }
        state.pageDataStatus.index.cid = noCid;
        //获得首页没有设置广告名称的组件数量
        let noAd = 0;
        for(let index in data.data.index){
            //console.log(data.data.index[index].content.ad)
            if(data.data.index[index].content.ad!=undefined){
                if(data.data.index[index].content.ad.name==""){
                    noAd++;
                }
            }
        }   
        //全局广告特殊处理
        if(state.webSiteData.ad.top.name==""){
            noAd++;
        }
        //console.log(noAd) 
        state.pageDataStatus.index.ad = noAd;

        //获得首页没有设置广告价格的组件数量
        let noAdPrice = 0;
        for(let index in data.data.index){
            if(data.data.index[index].content.ad!=undefined){
                if(data.data.index[index].content.ad.price==0){
                    noAdPrice++;
                }
            }
        }
        //全局广告特殊处理
        if(state.webSiteData.ad.top.price==0){
            noAdPrice++;
        }
        state.pageDataStatus.index.adPrice = noAdPrice;
    },
    //回显模板内容
    setWebsiteTemplate(state, data) {
        console.log(data)
        state.webSiteData.ad.top = data.topAd;
        state.pageData = data.template;
    },
    //随机生成模板
    randomTemplate(state) {
        state.loading = true;
        const randomIndex = Math.floor(Math.random() * 2); // Generates a random number between 1 and 2
        console.log(`随机生成的数字是: ${randomIndex}`);
        //console.log(randomIndex1)
        //console.log(randomIndex2)
        //Message.warning("该功能研发中");

        // pageStatus == 1 首页
        if (state.pageStatus == 1) {
            // 先清空里面的内容
            Vue.set(state.pageData, 'index', []);
            // 深拷贝 randomIndex1 和 randomIndex2
            const newData1 = JSON.parse(JSON.stringify(randomIndex1));
            const newData2 = JSON.parse(JSON.stringify(randomIndex2));
            if (randomIndex == 0) {
                Vue.set(state.pageData, 'index', newData1);
            }
            if (randomIndex == 1) {
                Vue.set(state.pageData, 'index', newData2);
            }
            state.loading = false;
        }
        // pageStatus == 2 分类页
        if (state.pageStatus == 2) { }
        // pageStatus == 3 列表页
        if (state.pageStatus == 3) {
            Message.warning("暂无模板可用！");
            state.loading = false;
        }
        // pageStatus == 4 详情页
        if (state.pageStatus == 4) {
            Message.warning("暂无模板可用！");
            state.loading = false;
        }
        // pageStatus == 5 搜索页
        if (state.pageStatus == 5) { }
        // pageStatus == 6 自定义列表页
        if (state.pageStatus == 6) { }
        // pageStatus == 7 自定义详情页
        if (state.pageStatus == 7) { }
    },
    //1.配置模块 end------------------------------------------------------------>

    //2.获取站点信息 start------------------------------------------------------------>
    //获取站点顶部详情
    setWebsiteInfo(state, data) {
        state.webSiteInfo = data;
    },
    setWebsiteFooterInfo(state, data) {
        state.webSiteFooterInfo = data;
    },
    //获取站点导航池
    setGetSiteCategory(state, data) {
        let allData = []
        for (let index in data) {
            //导航最多只显示24个，超出部分不显示
            if (index < 24) {
                allData.push(data[index])
            }
        }
        state.webSiteMenu = allData;
    },
    //设置地区
    setArea(state, data) {
        //都没有的时候返回的是省
        if (data.province == undefined) {
            state.area.economize = data;
        }
        //没有region的时候返回的是市
        if (data.province != undefined && data.city != undefined && data.region == undefined) {
            state.area.market = data.city;
        }
        //有region的时候返回的是县
        if (data.province != undefined && data.city != undefined && data.region != undefined) {
            state.area.county = data.region;
        }
    },
    //设置职能
    setDepartment(state, data) {
        for (let item of data) {
            let options = {
                value: item.id,
                label: item.name
            }
            state.departmentList.push(options)
        }
        console.log(state.departmentList)
    },
    //获取全部导航
    setWebsiteCategory(state, data) {
        let arrayData = []
        for (let item of data) {
            let options = {
                key: item.id,
                label: item.name,
                value: item.id
            }
            arrayData.push(options);
        }
        state.editWebsiteCategory = arrayData;
    },
    //2.获取站点信息 end------------------------------------------------------------>

    //3.提示信息 start------------------------------------------------------------>
    alertMessage(state, data) {
        Message({
            message: "配置阶段仅展示，无法真实调用该功能！",
            type: 'warning',
            duration: 0,
            showClose: true
        });
    }
    //3.提示信息 end------------------------------------------------------------>
}

const actions = {
    //1.显示画板组件数据 start------------------------------------------------------------>
    //1.1 获取网站基本信息
    getSiteInfo({ commit }, data) {
        return new Promise((resolve, reject) => {
            getSiteInfo(data).then(response => {
                commit('setWebsiteInfo', response.data);
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //1.2 获取网站导航池
    getSiteCategory({ commit }, data) {
        return new Promise((resolve, reject) => {
            getSiteCategory(data).then(response => {
                commit('setGetSiteCategory', response.data);
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //1.3 获取网站底部导航
    getFooterCategoryList({ commit }, data) {
        return new Promise((resolve, reject) => {
            getFooterCategoryList(data).then(response => {
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //1.4 获得页面类型
    getWebPageType({ commit }, data) {
        return new Promise((resolve, reject) => {
            getWebPageType(data).then(response => {
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //1.5 选择页面类型 - 是否添加搜索页
    addWebPageType({ commit }, data) {
        return new Promise((resolve, reject) => {
            addWebPageType(data).then(response => {
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //1.显示画板组件数据 end------------------------------------------------------------>

    //2.构建网站json start------------------------------------------------------------>
    //2.1 搜索网站
    getWebsiteintel({ commit }, data) {
        return new Promise((resolve, reject) => {
            getWebsiteintel(data).then(response => {
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //2.2 添加网站基本信息 如果只传入website_id，则验证是否已经关联导航池
    checkWebsiteBuild({ commit }, data) {
        return new Promise((resolve, reject) => {
            checkWebsiteBuild(data).then(response => {
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //2.3 获取网站基本信息
    getAdminSiteInfo({ commit }, data) {
        return new Promise((resolve, reject) => {
            getAdminSiteInfo(data).then(response => {
                commit('setWebsiteInfo', response.data);
                commit('setAdKey', response.data.ad_key);
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //2.4 修改网站基本信息
    upWebsiteTemplateintel({ commit }, data) {
        return new Promise((resolve, reject) => {
            upWebsiteTemplateintel(data).then(response => {
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //2.5 获取所有风格
    getAllTemplateClass({ commit }, data) {
        return new Promise((resolve, reject) => {
            getAllTemplateClass(data).then(response => {
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //2.6 搜索并获取所有网站风格
    getWebsiteTemplateList({ commit }, data) {
        return new Promise((resolve, reject) => {
            getWebsiteTemplateList(data).then(response => {
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //2.7 保存用户选择的风格
    addWebsiteTemplateclassintel({ commit }, data) {
        return new Promise((resolve, reject) => {
            addWebsiteTemplateclassintel(data).then(response => {
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //2.8 获取用户选择的风格
    getWebsiteTemplateclassintel({ commit }, data) {
        return new Promise((resolve, reject) => {
            getWebsiteTemplateclassintel(data).then(response => {
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //2.9 保存模板
    saveWebsiteTemplate({ commit }, data) {
        return new Promise((resolve, reject) => {
            saveWebsiteTemplate(data).then(response => {
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //2.10 获取模板配置
    getWebsiteTemplateInfo({ commit }, data) {
        return new Promise((resolve, reject) => {
            getWebsiteTemplateInfo(data).then(response => {
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //2.11 预览模板信息
    getWebsiteTemplateData({ commit }, data) {
        return new Promise((resolve, reject) => {
            getWebsiteTemplateData(data).then(response => {
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //2.12 获得网站底部信息
    getAdminWebsiteFootAll({ commit }, data) {
        return new Promise((resolve, reject) => {
            getAdminWebsiteFootAll(data).then(response => {
                commit('setWebsiteFooterInfo', response.data);
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //2.13 批量创建广告位
    addTwinAdPlace({ commit }, data) {
        return new Promise((resolve, reject) => {
            addTwinAdPlace(data).then(response => {
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //2.14 验证该网站是否有未结束的订单
    checkWebsiteEdit({ commit }, data) {
        return new Promise((resolve, reject) => {
            checkWebsiteEdit(data).then(response => {
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    //2.15 回显模板
    getWebsiteTemplate({ commit }, data) {
        return new Promise((resolve, reject) => {
            getWebsiteTemplate(data).then(response => {
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    }
    //2.构建网站json end------------------------------------------------------------>
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}