<template>
  <div class="warp">
    <div class="dropMain">
      <div class="left" v-if="!full">
        <menuChunk
          :dropElement="dropElement"
          :littleModule="littleModule"
        ></menuChunk>
      </div>
      <div class="center">
        <contentChunk :drop="drop"></contentChunk>
      </div>
      <div class="right" v-if="!full">
        <optionsChunk @viewHanlde="viewHanlde"></optionsChunk>
      </div>
    </div>
    <div class="exitView" v-if="viewFLag">
      <el-button @click="openDrap">{{
        drop ? "关闭拖拽" : "开启拖拽"
      }}</el-button>
      <el-button @click="exitViewHanlde">退出预览</el-button>
    </div>
  </div>
</template>

<script>
import dropData from "./config/indexChunkConfig";
import menuChunk from "./components/menuChunk/index.vue";
import contentChunk from "./components/contentChunk/index.vue";
import optionsChunk from "./components/optionsChunk/index.vue";
import { GetPppedomSet } from "@/api/apis/jurisdiction";
import { getInfo } from "@/utils/auth";
// import {
//   GeWidgetPepedomLoginUserAPI,
//   GetMyWidgetAPI,
// } from "@/api/apis/layOutAuth.js";
import { mapMutations } from "vuex";
import littleModule from "./config/littleModule";
export default {
  props: {},
  data() {
    return {
      dropElement: [], //左侧拖拽模块(首页模块)
      littleModule: littleModule.config, //小组件模块
      viewFLag: false, //开启预览模式
      drop: true, //开启拖拽
      full: false, //开启全屏模式
    };
  },
  components: {
    menuChunk,
    contentChunk,
    optionsChunk,
  },
  created() {
    this.GetMyWidgetHanlde();
  },
  activated() {
    this.GetMyWidgetHanlde();
  },
  methods: {
    //获取首页小组件事件
    async GetMyWidgetHanlde() {
      const authRes = await GeWidgetPepedomLoginUserAPI();
      let tempAuthStr = authRes.data[0];
      let tempArr = [];
      dropData.config.forEach((item) => {
        if (tempAuthStr.includes(item.componentName)) {
          this.dropElement.push(item);
        }
      });
      const res = await GetMyWidgetAPI();
      if (res.code === 1) {
        if (res.data.length && res.data[0]) {
          tempArr = JSON.parse(res.data[0]).filter((item) => {
            if (tempAuthStr.includes(item.componentName)) {
              item.component = this.$options.components[item.componentName];
              return item;
            }
          });
          this.SET_ELEMENT_LIST(tempArr);
        } else {
          //没模版
        }
      }
    },
    async initAuth() {},
    //点击预览$emit上来
    viewHanlde() {
      // this.drop = false;
      this.viewFLag = true;
      this.full = true;
    },
    //退出预览事件
    exitViewHanlde() {
      this.drop = true; //开启拖拽
      this.viewFLag = false; //关闭预览按钮
      this.full = false; //关闭全屏模式
    },
    //拖拽开启切换
    openDrap() {
      this.drop = !this.drop;
    },
    ...mapMutations("dropIndex", ["SET_ELEMENT_LIST"]),
  },
};
</script>

<style lang='scss' scoped>
.warp {
  width: 100%;
  position: relative;
  overflow-x: auto;
  > .dropMain {
    padding: 10px;
    display: flex;
    height: 90vh;
    .left {
      flex: 1;
    }
    .center {
      margin: 0 10px;
      flex: 4.5;
      background-color: #fff;
    }
    .right {
      flex: 1;
      background-color: #fff;
    }
  }
  .exitView {
    position: absolute;
    top: 10px;
    right: 25px;
  }
}
</style>
