<template>
  <div class="template-editor-wrap">
      <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird"></bread-crumb>
      
      <div class="add-content screenSet" id="screenSet" v-if="editor">
        <div class="top-lin"></div>
        <step-content
          :active="active"
          :fished="fished"
          @nextStep="nextStep"
          @complete="complete"
        />
        <!-- 基础组件 -->
        <base-message
          ref="baseMessage"
          v-if="active == 0 && ((!newBuild && editor && messageObj.portalOpenTemplateModel) || newBuild)"
          :isEditor="editor"
          :messageObj="messageObj"
          :newBuild="newBuild"
          @next="next"
        />
        <!-- 选择项目组件 -->
        <select-template
          ref="selectTemplate"
          v-if="active == 1 && ((!newBuild && editor && messageObj.portalOpenTemplateModel) || newBuild)"
          :isEditor="editor"
          :openTemplateId="openTemplateId"
          :messageObj="messageObj"
          :newBuild="newBuild"
        />
      </div>

      <div class="add-content screenSet" id="screenSet" v-else>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基础信息" name="first">
            <base-message
              v-if="messageObj.portalOpenTemplateModel"
              ref="baseMessage"
              :isEditor="editor"
              :messageObj="messageObj"
              :newBuild="newBuild"
              @next="next"
            />
          </el-tab-pane>
          <el-tab-pane label="选中组件" name="second">
            <select-template
              v-if="messageObj.portalOpenTemplateModel"
              ref="selectTemplate"
              :isEditor="editor"
              :openTemplateId="openTemplateId"
              :messageObj="messageObj"
              :newBuild="newBuild"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
  </div>
</template>

<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import stepContent from "../../components/education/template/stepContent";
import baseMessage from "../../components/education/template/baseMessage";
import selectTemplate from "../../components/education/template/selectTemplate";
import selectRegion from "../../components/education/template/selectRegion";
import setOrganization from "../../components/education/template/setOrganization";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
export default {
  data() {
    return {
      curmbFirst: "教培项目",
      curmbSecond: "模板管理",
      curmbThird: '新建项目模板',
      active: 0,
      fished: false,  // 是到到最后一步
      messageObj: {}, 
      openTemplateId: '',
      activeName: 'first',
      editor: true,  // 是否为编辑状态 还是查看状态
      newBuild: true // 是否为新建状态
    }
  },
  components: {
    BreadCrumb,
    stepContent,
    baseMessage,
    selectTemplate,
    selectRegion,
    setOrganization
  },
  created() {
    if (!this.$route.query.id) {
      this.newBuild = true;
      this.editor = true;
    } else if (this.$route.query.isEdit == 1) {
      this.openTemplateId = this.$route.query.id;
      this.newBuild = false;
      this.editor = true;
    } else {
      this.openTemplateId = this.$route.query.id;
      this.newBuild = false;
      this.editor = false;
    }
    this.fished = this.active == 0 ? false : true;
    if (!this.newBuild) {
      this.getBaseMessage()
    }
  },
  mounted() {
    commonUtil.resizeHeight();
  },
  methods: {
    //用于存储基本信息
    nextStep() {
      if(this.active == 0) {
        let flag = this.$refs.baseMessage.nextStep();
      }
    },
    // 下一步
    next(openTemplateId) {
      this.openTemplateId = openTemplateId;
      this.active = 1;
      this.fished = true;
    },
    complete() {
      console.log('完成');
      //1暂存2保存3发布
      this.$refs.selectTemplate.componentDraft(3);
    },
    handleClick() {
    },
     // 获取已有的基本信息
    getBaseMessage() {
      openLoading(this);
      this.GET(`portal/openTemplate/getOpenTemplateInfo/${this.openTemplateId}`).then(res => {
        closeLoading(this);
        if (res.code == "000000") {
          this.messageObj = res.data
        } else {
          this.$message.info(res.message);
        }
      });
    },
  }
}
</script>

<style>
.template-editor-wrap .el-tabs__header {
   z-index: 1001;
  background: #fff;
  position: fixed;
  right: 30px;
  left: 285px;
}
.template-editor-wrap .el-tabs__item {
  width: 240px;
  text-align: center;
  margin-right: 20px;
  height: 64px;
  line-height: 64px;
  font-size:16px;
  font-family:PingFangSC-Medium,PingFang SC;
  font-weight:500;
  color:rgba(48,49,51,1);
}

</style>
<style lang="scss" scoped>
.template-editor-wrap {
  .top-lin {
    position: fixed;
    height: 30px;
    background: #F0F2F5;
    right: 30px;
    left: 285px;
    z-index: 1001;
    top: 125px;
  }
  .add-content {
    background: #fff;
  }
}
</style>
