<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 && formData"
          :projectManger="projectManger"
          @next="next"
        />

        <!-- 选择项目组件 -->
        <select-template
          ref="selectTemplate"
          v-if="active == 1"
          :openTemplateId="openTemplateId"
        />
        <!-- 选择行政区 -->
        <!-- <select-region v-if="active == 1"></select-region> -->

        
        <!-- 设定机构 -->
        <!-- <set-Organization v-if="active == 0"></set-Organization> -->
      </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
              ref="baseMessage"
              :projectManger="projectManger"
              @next="next"
            />
          </el-tab-pane>
          <el-tab-pane label="选中组件" name="second">
            <select-template
              ref="selectTemplate"
              :openTemplateId="openTemplateId"
            />
          </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";
export default {
  data() {
    return {
      curmbFirst: "教培项目",
      curmbSecond: "模板管理",
      curmbThird: '新建项目模板',
      active: 0,
      fished: false,
      projectManger: false,
      formData: {
        openTemplateName: "",    //开放模板名称
        projectBegintime: "",    //模板开始时间
        projectEndtime: "",      //模板结束时间
        openTemplateIntro: "",   //开放模板简介
        type: 1,               //封面类型 1图片2视频 
        expireDay: "",         // 开放有效期
        subjectId: "",          //开放模板所属学科ID
        subjectName: "",       //开放模板所属学科名称
        attachmentUrl1: "",
        attachmentUrl2: "",
        attachmentUrl3: "",
        attachmentMore1: {},
        attachmentMore2: {},
        organizationName: "",       // 发起机构名称（多个机构拼接
        organizationNameList: [''],  //发起机构列表
        openTemplateDetail: ''      //开放模板详情
      },
      attachmentModel:[    //基础信息的图片视频
        {
          attachmentExt: '',// 附件格式
          attachmentName: '',//附件名称
          attachmentSize:'',//附件大小,
          attachmentType: 1,//1：图片 2：视频 3：pdf
          attachmentUrl: '',//附件链接
          id: '', //关联唯一ID
          kind: 1, //1：列表图片 2：封面配置 3：附件配置
          openTemplateId: ''//开放模板id
        },
         {
          attachmentExt: '',// 附件格式
          attachmentName: '',//附件名称
          attachmentSize:'',//附件大小,
          attachmentType: 1,//1：图片 2：视频 3：pdf
          attachmentUrl: '',//附件链接
          id: '', //关联唯一ID
          kind: 1, //1：列表图片 2：封面配置 3：附件配置
          openTemplateId: ''//开放模板id
        }
      ],
      baseobj: {}, 
      formTemplate: {
        component: [],
        configure: 2,
        certificate: ""
      },
      openTemplateId: 26,
      activeName: 'first',
      editor: true  // 是否为编辑状态
    }
  },
  components: {
    BreadCrumb,
    stepContent,
    baseMessage,
    selectTemplate,
    selectRegion,
    setOrganization
  },
  created() {
    this.fished = this.active == 0 ? false : true
  },
  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() {

    }
  }
}
</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>
