<template>
  <div class="template-editor-wrap">
    <bread-crumb
      :curmbFirst="curmbFirst"
      :curmbSecond="curmbSecond"
      :curmbThird="curmbThird"
      :jumPathThird="jumPathThird"
    ></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: '模板管理',
      jumPathThird: 'template-manager',
      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>
