<template>
  <div class="editer">
    <div class="top-bar">
      <div class="left">
        <div class="project-name">{{ tupoName }}</div>
        <div class="project-type">/ {{ categoryName }}</div>
        <div class="project-save">自动保存成功- V{{ version }}</div>
      </div>
      <div class="right">
        <el-tooltip
          class="item"
          effect="dark"
          content="下载"
          placement="bottom"
        >
          <span @click="saveTopoImg" class="icon iconfont icon-xiazai"></span>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="保存"
          placement="bottom"
        >
          <span @click="saveTopo" class="icon iconfont icon-baocun"></span>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="发布"
          placement="bottom"
        >
          <span @click="issueTopo" class="icon iconfont icon-fabu"></span>
        </el-tooltip>
      </div>
    </div>
    <topo-editer></topo-editer>
  </div>
</template>
<script>
import topoEditer from "@/components/editview/topoEditer.vue";
import bus from "@/bus/bus";
import { mapState,mapMutations } from "vuex";
export default {
  components: { topoEditer },
  data() {
    return {
      categoryName: "", //项目分类
    };
  },
  methods: {
     ...mapMutations(["SETPROJECTID"]),
    // 保存图片
    saveTopo() {
      bus.$emit("saveTopo");
    },
    // 发布
    issueTopo() {
      bus.$emit("issueTopo");
    },
    // 下载图片
    saveTopoImg() {
      bus.$emit("saveTopoImg");
    },
  },
  computed: {
    ...mapState(["tupoName", "version", "projectId"]),
  },
  created() {
    this.$route.query.projectId ? this.SETPROJECTID(this.$route.query.projectId) :''
  },
  mounted() {
    this.categoryName = decodeURI(this.$route.query.categoryName);
  },
};
</script>
<style lang="less" scoped>
.editer {
  width: 100%;
  height: calc(~"100% - 37px");
  .top-bar {
    width: 100%;
    height: 36px;
    border-bottom: 1px solid #e4e5e7;
    padding: 0 20px 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .project-name {
        font-size: 16px;
        color: #1f2429;
        font-weight: bold;
      }
      .project-type {
        color: #8d9399;
        font-size: 14px;
        margin: 0 4px;
      }
      .project-save {
        color: #8d9399;
        font-size: 12px;
        margin-left: 16px;
      }
    }
    .right {
      span {
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>
