admin_home/src/store/modules/template.js

//cms中的接口 获取网站基本信息，网站导航，网站底部导航，网站行政区划，行政职能
import {getSiteInfo,getSiteCategory,getFooterCategoryList,selectWebsiteArea,selectWebsiteDepartment } from '@/api/cms'
//自助建站的接口 用于添加基本信息
import {getWebsiteintel,addWebsiteTemplateintel,getWebsiteTemplateintel,upWebsiteTemplateintel,getAllTemplateClass,getWebsiteTemplateList,addWebsiteTemplateclassintel,
  getWebsiteTemplateclassintel,addWebsiteTemplate,getWebsiteTemplateInfo,getWebsiteTemplateData} from '@/api/template'

import { Message } 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
  editWebsiteClass:"",//当前编辑网站的风格
  stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
  //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:"",//生成储存的广告id
  showPage:{ //哪些页面可以被展示
    index:true,
    class:false,
    list:true,
    article:true,
    search:false,
    aloneList:false,
    aloneArticle:false
  },
  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:"",//网站包含的导航池
  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,//当前组件展示的条数
  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:[],//自定义详情页
    }
  },
  canSubmit:false,//当前数据是否可以被提交
  //4.构造的网站数据 end------------------------------------------------------------>

  //5.组件回显数据 start------------------------------------------------------------>
  componentViewData:{
    pid_arr:[],//导航池
    pageSize:"",//展示条数
    adName:"",//广告名称
    titleName:"",//标题名称
  }
  //5.组件回显数据 start------------------------------------------------------------>
}

const mutations = {
  //0.全局配置 start------------------------------------------------------------>
  //设置网站的id
  setEditWebsiteId(state,id){
    state.editWebsiteId = id;
  },
  //设置网站的风格
  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;
  },
  //关闭编辑组件弹出框
  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=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
      if(state.editComponentType == 1){
        state.componentViewData.pid_arr = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
        state.componentViewData.pageSize = state.editComponentSize;
      }
      //2=tabs新闻选项卡
      if(state.editComponentType == 2){
        state.componentViewData.pid_arr = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
        state.componentViewData.pageSize = state.editComponentSize;
      }
      //3=广告名称
      if(state.editComponentType == 3){
        state.componentViewData.adName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
      }
      //7=标题
      if(state.editComponentType == 7){
        state.componentViewData.titleName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
      }
    }
    //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=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
      if(state.editComponentType == 1){
        state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
        state.componentViewData.pageSize = state.editComponentSize;
      }
      //2=tabs新闻选项卡
      if(state.editComponentType == 2){
        state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
        state.componentViewData.pageSize = state.editComponentSize;
      }
      //3=广告名称
      if(state.editComponentType == 3){
        state.componentViewData.adName = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.text;
      }
      //7=标题
      if(state.editComponentType == 7){
        state.componentViewData.titleName = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.text;
      }
    }
    //pageStatus==4 详情页
    if(state.pageStatus == 4){
      
      const targetModuleIndex = state.pageData.article.findIndex(module => module.i === data.id);
      //判断组件类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
      if(state.editComponentType == 1){
        state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
        state.componentViewData.pageSize = state.editComponentSize;
      }
      //2=tabs新闻选项卡
      if(state.editComponentType == 2){
        state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
        state.componentViewData.pageSize = state.editComponentSize;
      }
      //3=广告名称
      if(state.editComponentType == 3){
        state.componentViewData.adName = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.text;
      }
      //7=标题
      if(state.editComponentType == 7){
        state.componentViewData.titleName = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.text;
      }
    }
    //pageStatus==5 搜索页
    if(state.pageStatus == 5){}
    //pageStatus==6 自定义列表页
    if(state.pageStatus == 6){}
    //pageStatus==7 自定义详情页
    if(state.pageStatus == 7){}
  },
  //生成一个随机的广告id
  getRandomAdid(state){
    //网站id
    const websiteId = state.editWebsiteId;
    // 生成 3 个随机字母 (a-z)
    const randomLettersOne = Math.random().toString(36).substring(2, 5);  // 生成随机字母并去除前面的 "0."
    // 获取当前时间戳（毫秒级）
    const timestamp = Date.now();
    // 生成 5 个随机字母 (a-z)
    const randomLettersTwo = Math.random().toString(36).substring(2, 7);  // 生成随机字母并去除前面的 "0."
    // 拼接时间戳和随机字母生成唯一 ID
    const ad_id = `${websiteId}${randomLettersOne}${timestamp}${randomLettersTwo}`;
    state.ad_id = ad_id;
  },
  //0.全局配置 start------------------------------------------------------------>
  //1.配置模块 start------------------------------------------------------------>
  //获得gridlayout对象
  setGridlayoutObj(state,data){
    state.gridlayoutObj = data;
  },
  //添加板块
  addModule(state,data){
    //pageStatus==1 首页 index
    if(state.pageStatus == 1){
      //开始复制 start------------------------------------------------------------>
      //判断当前一共有多少个模块最多能添加10个
      if(state.pageData.index.length >= 10){
        Message.error('最多只能添加10个模块！');
        return;
      }else{
        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
          if(data.jsonData.componentList[0].component_type==3){
            this.commit("template/getRandomAdid")
            //添加板块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,
              adid: state.ad_id,
              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
              content:data.jsonData,
              dataSort:dataSort,
            });
          }else{
            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
          if(data.jsonData.componentList[0].component_type==3){
            this.commit("template/getRandomAdid")
            //添加板块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,
              adid: state.ad_id,
              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
              content:data.jsonData,
              dataSort:dataSort,
            });
          }else{
            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);
          //需要调查一下这里最后的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 {}
        }
      }
      //开始复制 end------------------------------------------------------------>
    }
    //pageStatus==2 分类页 class
    if(state.pageStatus == 2){}
    //pageStatus==3 列表页 list
    if(state.pageStatus == 3){
      //开始复制 start------------------------------------------------------------>
      //判断当前一共有多少个模块最多能添加10个
      if(state.pageData.list.length >= 10){
        Message.error('最多只能添加10个模块！');
        return;
      }else{
        //判断是拖拽的还是点击添加进来的 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;
          //判断添加的是否为广告模块 如果是 添加一个ad_id
          if(data.jsonData.componentList[0].component_type==3){
            this.commit("template/getRandomAdid")
            //添加板块id  
            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,
              adid: state.ad_id,
              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
              content:data.jsonData,
              dataSort:dataSort,
            });
          }else{
            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;
          //判断添加的是否为广告模块 如果是 添加一个ad_id
          if(data.jsonData.componentList[0].component_type==3){
            this.commit("template/getRandomAdid")
            //添加板块id  
            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,
              adid: state.ad_id,
              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
              content:data.jsonData,
              dataSort:dataSort,
            });
          }else{
            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 {}
        }
      }
      //开始复制 end------------------------------------------------------------>
    }
    //pageStatus==4 详情页 article
    if(state.pageStatus == 4){
      //开始复制 start------------------------------------------------------------>
      //判断当前一共有多少个模块最多能添加10个
      if(state.pageData.article.length >= 10){
        Message.error('最多只能添加10个模块！');
        return;
      }else{
        //判断添加的是否为广告模块 如果是 添加一个ad_id
        if(data.jsonData.componentList[0].component_type==3){
          //生成一个随机的ad_id给广告模块
          this.commit("template/getRandomAdid");
          console.log("添加广告模块！id为：" + state.ad_id)
          data.jsonData.componentList[0].componentData.ad_id = state.ad_id;
        }
        
        //判断是拖拽的还是点击添加进来的 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;
          //判断添加的是否为广告模块 如果是 添加一个ad_id
          if(data.jsonData.componentList[0].component_type==3){
            this.commit("template/getRandomAdid")
            //添加板块id  
            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,
              adid: state.ad_id,
              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
              content:data.jsonData,
              dataSort:dataSort,
            });
          }else{
            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;
          //判断添加的是否为广告模块 如果是 添加一个ad_id
          if(data.jsonData.componentList[0].component_type==3){
            this.commit("template/getRandomAdid")
            //添加板块id  
            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,
              adid: state.ad_id,
              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
              content:data.jsonData,
              dataSort:dataSort,
            });
          }else{
            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 {}
        }
      }
      //开始复制 end------------------------------------------------------------>
    }
    //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);
    }
    //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('未找到要删除的模块！');
      }
      //开始复制 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------------------------------------------------------------>
    }
    //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){}
  },
  //保存组件设置的数据
  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) //找到要修改的板块
      //console.log(targetModuleIndex) //找到要修改的板块
      //state.pageData.index[targetModuleIndex].content.componentList[data.sort] //当前编辑的组件 
      //data.data.pid_arr //导航池
      //state.editComponentSize //展示条数

      //判断数据的类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
      //1=普通新闻
      //注意，vue有一个bug就是，当你修改复杂对象的时候，如果对象的内部是数组
      //vue可能无法检测到变化，而当你修改无法被检测变化的数据时，就会把所有数据都修改成相同的值
      //解决办法是通过vue的set方法将整个对象，即你的数组外层那个对象进行深拷贝，然后修改完再替换回去
      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_arr; // 设置 category_id
        module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
        // 使用Vue.set来强制视图更新
        Vue.set(state.pageData.index, targetModuleIndex, module); // 替换为深拷贝的模块
        console.log("当前的板块数据为：");
        console.log(state.pageData.index);
      }
      //2=tabs新闻选项卡
      if(state.editComponentType == 2){
        // 获取当前模块数据并进行深拷贝
        let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex])); // 深拷贝整个模块
        // 更新 category_id 和 pageSize
        module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
        module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
        // 使用Vue.set来强制视图更新
        Vue.set(state.pageData.index, targetModuleIndex, module); // 替换为深拷贝的模块
        console.log("当前的板块数据为：");
        console.log(state.pageData.index);
      }
      //3=广告
      if(state.editComponentType == 3){;
        let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
        module.content.componentList[data.sort].componentData.text = data.data.adName;
        Vue.set(state.pageData.index, targetModuleIndex, module);
        console.log("当前的板块数据为：");
        console.log(state.pageData.index);
      }
      //4=友情链接
      //if(state.editComponentType == 4){}
      //6=静态组件
      //if(state.editComponentType == 6){}
      //7=文本
      if(state.editComponentType == 7){
        let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
        module.content.componentList[data.sort].componentData.text = data.data.titleName;
        Vue.set(state.pageData.index, targetModuleIndex, module);
        console.log("当前的板块数据为：");
        console.log(state.pageData.index);
      }
      //8=评论
      //if(state.editComponentType == 8){}
      //开始复制 end------------------------------------------------------------>
    }
    //pageStatus==2 分类页
    if(state.pageStatus == 2){}
    //pageStatus==3 列表页
    if(state.pageStatus == 3){
      //开始复制 start------------------------------------------------------------>
      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_arr; // 设置 category_id
        module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
        // 使用Vue.set来强制视图更新
        Vue.set(state.pageData.list, targetModuleIndex, module); // 替换为深拷贝的模块
        console.log("当前的板块数据为：");
        console.log(state.pageData.list);
      }
      //2=tabs新闻选项卡
      if(state.editComponentType == 2){
        // 获取当前模块数据并进行深拷贝
        let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex])); // 深拷贝整个模块
        // 更新 category_id 和 pageSize
        module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
        module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
        // 使用Vue.set来强制视图更新
        Vue.set(state.pageData.list, targetModuleIndex, module); // 替换为深拷贝的模块
        console.log("当前的板块数据为：");
        console.log(state.pageData.list);
      }
      //3=广告
      if(state.editComponentType == 3){;
        let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex]));
        module.content.componentList[data.sort].componentData.text = data.data.adName;
        Vue.set(state.pageData.list, targetModuleIndex, module);
        console.log("当前的板块数据为：");
        console.log(state.pageData.list);
      }
      //7=文本
      if(state.editComponentType == 7){
        let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex]));
        module.content.componentList[data.sort].componentData.text = data.data.titleName;
        Vue.set(state.pageData.list, targetModuleIndex, module);
        console.log("当前的板块数据为：");
        console.log(state.pageData.list);
      }
      //开始复制 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.pageSize = state.editComponentSize; // 设置 pageSize
        // 使用Vue.set来强制视图更新
        Vue.set(state.pageData.article, targetModuleIndex, module); // 替换为深拷贝的模块
        console.log("当前的板块数据为：");
        console.log(state.pageData.article);
      }
      //2=tabs新闻选项卡
      if(state.editComponentType == 2){
        // 获取当前模块数据并进行深拷贝
        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.pageSize = state.editComponentSize; // 设置 pageSize
        // 使用Vue.set来强制视图更新
        Vue.set(state.pageData.article, targetModuleIndex, module); // 替换为深拷贝的模块
        console.log("当前的板块数据为：");
        console.log(state.pageData.article);
      }
      //3=广告
      if(state.editComponentType == 3){;
        let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
        module.content.componentList[data.sort].componentData.text = data.data.adName;
        Vue.set(state.pageData.article, targetModuleIndex, module);
        console.log("当前的板块数据为：");
        console.log(state.pageData.article);
      }
      //7=文本
      if(state.editComponentType == 7){
        let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
        module.content.componentList[data.sort].componentData.text = data.data.titleName;
        Vue.set(state.pageData.article, targetModuleIndex, 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){}
  },
  //通过按钮移动板块 (暂时停用)
  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) {
    // 深拷贝数据，避免直接修改原数据
    let clonedData = JSON.parse(JSON.stringify(data));
    // 把ad_id传进去
    for(let item of clonedData.data){
      if(item.adid){
        item.content.componentList[0].componentData.ad_id = item.adid;
      }
    }
    // 按照 clonedData.data.y 的大小排序
    clonedData.data.sort((a, b) => a.y - b.y);
    //console.log(clonedData, clonedData);
    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 == "list") {
      state.webSiteData.template.list = websiteData;
    }
    if (data.type == "article") {
      state.webSiteData.template.article = websiteData;
    }
  },
  //保存模板
  saveTemplate(state) {
    //临时展示保存的数据 后期移除
    state.editWebsiteTemplateJsonWindow = true;
    //调用mutations中的方法无需使用$store
    //格式化index的信息
    this.commit('template/formatTemplateInfo',{data:state.pageData.index,type:"index"});
    //格式化list的信息
    this.commit('template/formatTemplateInfo',{data:state.pageData.list,type:"list"});
    //格式化article的信息
    this.commit('template/formatTemplateInfo',{data:state.pageData.article,type:"article"});
    // console.log(state.webSiteData);
    // console.log(state.editWebsiteId)
    //给与网站id和模板风格id
    state.webSiteData.base.websiteId = state.editWebsiteId;
    state.webSiteData.style.styleId = state.editWebsiteClass;
  },
  //随机生成模板
  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) {}
  },
  //提交数据之前执行完整度检查
  IntegrityCheck(state){
    //先设置为true看能否通过判断
    state.canSubmit = true;
    //先判断当前有哪几个板块可用
    //state.canSubmit == false 不可以提交
    //state.canSubmit == true 可以提交
    //首页
    if(state.showPage.index == true){
      if(state.template.index == []){
        state.canSubmit = false;
      }
    }
    //分类页
    if(state.showPage.class == true){
      if(state.template.class == []){
        state.canSubmit = false;
      }
    }
    //列表页
    if(state.showPage.list == true){
      if(state.template.list == []){
        state.canSubmit = false;
      }
    }
    //详情页
    if(state.showPage.article == true){
      if(state.template.article == []){
        state.canSubmit = false;
      }
    }
    //搜索页
    if(state.showPage.search == true){
      if(state.template.search == []){
        state.canSubmit = false;
      }
    }
    //自定义列表页
    if(state.showPage.aloneList == true){
      if(state.template.aloneList == []){
        state.canSubmit = false;
      }
    }
    //自定义详情页
    if(state.showPage.aloneArticle == true){
      if(state.template.aloneArticle == []){
        state.canSubmit = false;
      }
    }

    //最后判断一下是否可以提交
    if(state.canSubmit == ture){

    }else{
      Message.error('您还有未构建的页面，请检查！');
    }
  },
  //1.配置模块 end------------------------------------------------------------>

  //2.获取站点信息 start------------------------------------------------------------>
  //获取站点详情
  setWebsiteInfo(state,data){
    state.webSiteInfo = data;
  },
  //获取站点导航池
  setGetSiteCategory(state,data) {
    state.webSiteMenu = data;
  },
  //设置地区
  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 获取行政区划
  selectWebsiteArea({commit},data){
    return new Promise((resolve, reject) => {
      selectWebsiteArea(data).then(response => {
        commit('setArea', response.data);
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },
  //1.5 获取所有职能部门
  selectWebsiteDepartment({commit},data){
    return new Promise((resolve, reject) => {
      selectWebsiteDepartment(data).then(response => {
        commit('setDepartment', response.data);
        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，则验证是否已经关联导航池
  addWebsiteTemplateintel({commit},data){
    return new Promise((resolve, reject) => {
      addWebsiteTemplateintel(data).then(response => {
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },
  //2.3 获取网站基本信息
  getWebsiteTemplateintel({commit},data){
    return new Promise((resolve, reject) => {
      getWebsiteTemplateintel(data).then(response => {
        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 保存模板
  addWebsiteTemplate({commit},data){
    return new Promise((resolve, reject) => {
      addWebsiteTemplate(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.构建网站json end------------------------------------------------------------>
}

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