import {getSiteInfo,getSiteCategory,selectWebsiteDepartment,selectWebsiteArea,getWebsiteArticlesList,
  selectWebsiteArticleInfo} from '@/api/cms'

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

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

const state = {
  //0.全局配置 start------------------------------------------------------------> 
  editWebsiteId: "",//当前编辑网站的id
  stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
  //0.全局配置 end------------------------------------------------------------>
  
  //1.画布数据 start------------------------------------------------------------>
  pageStatus:1,//当前编辑哪个页面  1=首页 2=分类页 3=列表页 4=详情页 5=搜索页 6=自定义列表页 7=自定义详情页 
  menuType:1, //当前菜单显示板块还是组件 1=板块 2=组件 
  previewStatus: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------------------------------------------------------------>
  editWindowStatus:false,//编辑组件弹出框是否显示
  editComponentWindowStatus:false,//选择组件样式弹出框是否显示
  editWindowTitle:"",//编辑弹出框标题
  editSectorId:0,//当前正在编辑的板块id
  editComponentSort:0,//当前正在编辑的组件id
  editComponentType:0,//当前正在编辑的组件类型
  editComponentSize:0,//当前组件展示的条数
  editComponentStyle:0,//当前编辑的组件样式

  webSiteData:{
    //1.base网站基本信息
    base:{
      websiteId:1,//网站id
    },
    //2.style信息
    style:{
      styleId:1,//风格id
    },
    //3.板块信息 header,menu,footer 是页面自带的无需构建
    template:{  
      //index = 首页 class=分类页 list=列表页 article=详情页 search=搜索页 aloneList=自定义列表页 aloneArticle=自定义详情页
      index:[],
      class:[],//分类页
      list:[],//列表页
      article:[],//详情页
      search:[],//搜索页
      aloneList:[],//自定义列表页
      aloneArticle:[],//自定义详情页
    }
  }
  //3.网站数据 end------------------------------------------------------------>
}

const mutations = {
  //0.全局配置 start------------------------------------------------------------>
  //设置网站的id
  setEditWebsiteId(state,id){
    state.editWebsiteId = 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.editComponentSort = data.sort;
    state.editComponentType = data.type;
    state.editComponentSize = data.size;
  },
  //关闭编辑组件弹出框
  closeEditWindowStatus(state){
    state.editWindowStatus = false;
    // state.editSectorId = "";
    // state.editComponentSort = "";
    // state.editComponentType = "";
    // state.editComponentSize = "";
  },
  //打开选择组件样式弹出框
  setComponentStyleStatus(state,data){
    state.editComponentWindowStatus = true;
    state.editSectorId = data.id;
    state.editComponentSort = data.sort;
    state.editComponentType = data.type;
    state.editComponentStyle = data.style;
  },
  //关闭选择组件样式弹出框
  closeComponentStyleStatus(state){
    state.editComponentWindowStatus = false;
    // state.editSectorId = "";
    // state.editComponentSort = "";
    // state.editComponentType = "";
    // state.editComponentStyle = "";
  },
  //选择组件样式
  selectComponentStyleNumber(state,data){
    state.editComponentStyle = data;
  },
  //设置组件样式
  setComponentStyleNumber(state,data){
    let id = state.editSectorId;
    let sort = state.editComponentSort;
    let num = state.editComponentStyle;

    //pageStatus==1 首页
    if(state.pageStatus == 1){
      // 获取当前模块数据并进行深拷贝
      let module = JSON.parse(JSON.stringify(state.pageData.index[id]));
      //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, id, module);
      console.log("当前的板块数据为：");
      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){}
  },
  //0.全局配置 start------------------------------------------------------------>
  //1.配置模块 start------------------------------------------------------------>
  //添加板块
  addModule(state,data){
    //pageStatus==1 首页
    if(state.pageStatus == 1){
      //判断当前一共有多少个模块最多能添加10个
      if(state.pageData.index.length >= 10){
        Message.error('最多只能添加10个模块！');
        return;
      }else{
        //data.type 组件名称 data.h 模块高度 
        //计算当前布局的最大 y 值
        const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
        console.log(data);
        //添加板块id  
        state.pageData.index.push({
          i: state.pageData.index.length, 
          x: 0, 
          y: maxY + 1, 
          w: 12, 
          h: data.h, 
          type: data.type,
          //content:"",
          //sectorData:data.jsonData
          content:data.jsonData
        });
        // console.log("当前添加的板块id：" + state.pageData.index.length);
        // data.jsonData.sectorId = state.pageData.index.length;
        // console.log("添加完毕后的数据：");
        // 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){}
  },
  //删除板块
  deleteModule(state,data){
    //pageStatus==1 首页
    if(state.pageStatus == 1){
      for(let i = 0; i < state.pageData.index.length; i++) {
        if(state.pageData.index[i].i == data.i) {
          state.pageData.index.splice(i, 1);
        }
      }
      Message.success('模块已删除！');
      console.log("删除后的数据结构：");
      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){}
  },
  //移动板块 (暂时停用)
  moveModule(state, data) {
    Message.error('移动板块功能暂时停用！');
    // pageStatus == 1 首页
    // if (state.pageStatus == 1) {
    //   const moveType = data.moveType;
    //   const moduleId = data.i;
    //   const modules = state.pageData.index;
    //   // 查找模块在数组中的实际索引
    //   const thisIndex = modules.findIndex(module => module.i === moduleId);
    //   if (thisIndex === -1) {
    //     Message.error('模块未找到！');
    //     return;
    //   }
    //   const thisY = modules[thisIndex].y;
    //   let thatY;
    //   if (moveType === 'up') {
    //     thatY = Math.max(
    //       ...modules.filter(item => item.y < thisY).map(item => item.y)
    //     );
    //     if (thatY === -Infinity) {
    //       Message.error('已经是顶部了！');
    //       return;
    //     }
    //     const thatIndex = modules.findIndex(item => item.y === thatY);
    //     if (thatIndex === -1) {
    //       Message.error('上方模块未找到！');
    //       return;
    //     }
    //     [modules[thisIndex].y, modules[thatIndex].y] = [modules[thatIndex].y, modules[thisIndex].y];

    //   } else if (moveType === 'down') {
    //     thatY = Math.min(
    //       ...modules.filter(item => item.y > thisY).map(item => item.y)
    //     );
    //     if (thatY === Infinity) {
    //       Message.error('已经是底部了！');
    //       return;
    //     }
    //     const thatIndex = modules.findIndex(item => item.y === thatY);
    //     if (thatIndex === -1) {
    //       Message.error('下方模块未找到！');
    //       return;
    //     }
    //     [modules[thisIndex].y, modules[thatIndex].y] = [modules[thatIndex].y, modules[thisIndex].y];
    //   } else {
    //     Message.error('未知的移动类型！');
    //     return;
    //   }
    //   // 交换后对模块进行排序以确保顺序一致
    //   modules.sort((a, b) => a.y - b.y);
    //   // 使用 Vue.set 强制更新数组，确保视图更新
    //   Vue.set(state.pageData, 'index', [...modules]);
    //   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) {}
  },
  //修改首页板块高度
  setIndexModuleHeight(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) {}
    // pageStatus == 4 详情页
    if (state.pageStatus == 4) {}
    // pageStatus == 5 搜索页
    if (state.pageStatus == 5) {}
    // pageStatus == 6 自定义列表页
    if (state.pageStatus == 6) {}
    // pageStatus == 7 自定义详情页
    if (state.pageStatus == 7) {}
  },
  //格式化模板信息
  formatTemplateInfo(state, data) {
    //console.log(data.type);
    //按照data.data.y的大小排序
    data.data.sort((a, b) => a.y - b.y);
    console.log(data,data);
    let websiteData = [];
    //获取板块的sort
    for (let index in data.data) {
      console.log(data.data[index].content);
      data.data[index].content.sort = Number(index)+1;
      if(data.type=="index"){
        //不要把数据直接保存到state.webSiteData.template中，否则无法删除
        websiteData.push(data.data[index].content)
      }
    }
    //保存到对应的页面json中
    if(data.type=="index"){
      state.webSiteData.template.index = websiteData;
    }

  },
  //保存模板
  saveTemplate(state) {
    //调用mutations中的方法无需使用$store
    //格式化index的信息
    this.commit('template/formatTemplateInfo',{data:state.pageData.index,type:"index"});
    
    console.log(state.webSiteData);
  },
  //随机生成模板
  randomTemplate(state){
    console.log("随机生成模板");
    const randomIndex = Math.floor(Math.random() * 9) + 1; // Generates a random number between 1 and 2
    console.log(`随机生成的数字是: ${randomIndex}`);

    // pageStatus == 1 首页
    if (state.pageStatus == 1) {}
    // 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) {}
  },
  //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;
    }
  },
  //2.获取站点信息 end------------------------------------------------------------>
}

const actions = {
  //1.站点数据 start------------------------------------------------------------>
  //获取网站基本信息
  getSiteInfo({commit},data){
    return new Promise((resolve, reject) => {
      getSiteInfo(data).then(response => {
        commit('setWebsiteInfo', response.data);
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },
  //获取网站导航池
  getSiteCategory({commit},data){
    return new Promise((resolve, reject) => {
      getSiteCategory(data).then(response => {
        commit('setGetSiteCategory', response.data);
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },
  //设置行政区划
  selectWebsiteArea({commit},data){
    return new Promise((resolve, reject) => {
      selectWebsiteArea(data).then(response => {
        commit('setArea', response.data);
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },
  //获取新闻列表
  getWebsiteArticlesList({commit},data){
    return new Promise((resolve, reject) => {
      getWebsiteArticlesList(data).then(response => {
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },
  //获取新闻详情
  selectWebsiteArticleInfo({commit},data){
    return new Promise((resolve, reject) => {
      selectWebsiteArticleInfo(data).then(response => {
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  }
  //1.站点数据 end------------------------------------------------------------>
}

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