<template>
  <div id="top">
    <div class="top-box">
      <div class="top-left">门户配置</div>
      <div class="top-right">
        <div class="top-item" @click="toRender()">
          <div class="img-box">
            <img src="../../assets/preview_icon.png" alt />
          </div>
          <div>
            <span>预览</span>
          </div>
        </div>
        <div class="top-item">
          <div class="img-box img-box-release">
            <img src="../../assets/release_icon.png" alt />
          </div>
          <div>
            <span @click="release">发布</span>
          </div>
        </div>

        <el-button @click.native="save" type="primary" size="small">保存</el-button>
      </div>
    </div>
    <div class="render-box" v-if="render_status">
      <div class="close-btn" @click="closeRender">
        <i class="el-icon-close"></i>
      </div>
      <vue-draggable-resizable
        v-for="(item, index) in app.componentList"
        v-if="item.options.mamHidden"
        :key="index"
        :grid="[20, 20]"
        :x="item.options.x"
        :y="item.options.y"
        :w="item.options.width"
        :h="item.options.height"
        :draggable="false"
        :resizable="false"
      >
        <component :is="item.type" :options="item.options" :dom-id="'domId' + index" />
      </vue-draggable-resizable>
    </div>
  </div>
</template>
<script>
export default {
  name: "top",
  inject: ["app"],
  components: {},
  data() {
    return {
      token: "", //获取的localStorage中的token，接口入参用的
      id: "",
      allData: {},
      aaa: "",
      list: [],
      render_status: false
    };
  },
  mounted() {
    // :draggable="false"//定义组件应该是否可拖动。
    // :resizable="false"//定义组件是否可以调整大小。
    //this.token = localStorage.getItem("portal_token");
    this.token = this.$common.getCookie("portal_token");
    //存放id
    this.id = this.$common.getQueryString("id");

    console.log("全局id:", this.$common.getQueryString("id"));
  },
  methods: {
    // 保存
    save() {
      var box = document.getElementById("stage-canvas");
      var width = box.clientWidth;
      var height = box.clientHeight;
      console.log("宽度：", width);
      console.log("高度：", height);
      console.log("数据结构", this.app.componentList);

      this.$request({
        method: "post",
        url: "portal/set/component",
        headers: {
          token: this.token
        },
        data: {
          portalSetting: {
            id: this.id,
            components: this.app.componentList,
            width: width,
            height: height
          }
        }
      })
        .then(res => {
          console.log("res:", res);
          if (res.errcode * 1 == 0) {
            this.$message({
              message: "保存成功",
              type: "success"
            });
          } else {
            this.$message({
              message: res.errmsg,
              type: "error"
            });
          }
        })
        .catch(error => {
          console.log("错误：", error);
        });
    },
    // 发布
    release() {
      this.$request({
        method: "post",
        url: "portal/publish/" + this.id,
        headers: {
          token: this.token
        },
        data: {}
      })
        .then(res => {
          console.log("发布res:", res);
          if (res.errcode * 1 == 0) {
            this.$message({
              message: "发布成功",
              type: "success"
            });
          } else {
            this.$message({
              message: res.errmsg,
              type: "error"
            });
          }
        })
        .catch(error => {
          console.log("错误：", error);
        });
    },
    // 去预览页面
    toRender() {
      this.render_status = true;
      console.log("预览数据结构：", this.app.componentList);
      return false;
      console.log("koko", this.$router);
      this.$router.push({
        path: "/render",
        name: "render"
      });
      this.allData.components = aaa.data.components;
      var box = document.getElementById("stage-canvas");
      var width = box.clientWidth;
      var height = box.clientHeight;
      this.allData.components = this.app.componentList;
      this.allData.width = width;
      this.allData.height = height;
      //this.allData.key = '123'
      console.log("lop", this.allData);
      this.render_status = true;
      //localStorage.setItem("allData", JSON.stringify(this.allData));

      //
      //var allData = localStorage.getItem("allData");
      //this.allData = JSON.parse(allData);
      //this.list = this.allData.components;
      //this.allData = this.$route.query.allData
      console.log("this.allData", this.allData);
      //this.$router.push("./render");
    },
    closeRender() {
      this.render_status = false;
    }
  }
};
</script>
<style lang="scss">
.top-box {
  width: 100%;
  height: 60px; //   border: 1px solid #f00;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 21px 0 15px;
}

.top-left {
  font-size: 16px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}

.top-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-item {
  width: 60px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 19px;
  cursor: pointer;
}

.img-box {
  width: 19px;
  height: 18px;
}

.top-item img {
  width: 19px;
  height: 18px;
}

.img-box-release {
  width: 16px;
  height: 16px;
}

.img-box-release img {
  width: 16px;
  height: 16px;
}
.render-box {
  width: 100%;
  height: 100vh;
  // border: 1px solid #f00;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 999;
}
.close-btn {
  width: 30px;
  height: 30px;
  // border: 1px solid yellow;
  position: absolute;
  top: 10px;
  right: 10px;
  text-align: right;
  cursor: pointer;
}
</style>
