<template>
  <!-- 创客创新-活动申请 详细信息表单 -->
    <div class="makerActvityContent">
      <div class="pAmid">

        <!-- 左边栏导航区开始 -->
        <div class="left">
          <div class="sx">
            <div class="qiu"></div>
          </div>
          <div class="leftTits">
            <span @click="toPage(1)">活动计划</span>
            <span @click="toPage(2)">预期目标</span>
            <span @click="toPage(3)">活动受面</span>
            <span @click="toPage(4)">经费支出计划</span>
            <span @click="toPage(5)">完成</span>
          </div>
        </div>
        <!-- 左边导航区结束 -->
        
        <!-- 右方数据展示区开始 -->
        <div class="right">
          <!-- 标题 -->
          <div class="vfpHeader">
              <div class="titleOne">活动申请</div>
              <el-button type="primary" @click="back()">返回</el-button>
          </div>
            <hr>

            <div id="z">
              <p class="pTit">活动计划</p>
              <div class="editor">
                <vue-editor :editorToolbar="customToolbar" v-model="content"></vue-editor>
              </div>
            </div>

            <div id="x">
                <p class="pTit">预期目标</p>
                <div class="editor">
                  <vue-editor :editorToolbar="customToolbar" v-model="content"></vue-editor>
                </div>
              </div>

              <div id="c">
                <p class="pTit">活动受面</p>
                <div class="editor">
                  <vue-editor :editorToolbar="customToolbar" v-model="content"></vue-editor>
                </div>
              </div>
              <div id="v">
                <p class="pTit">经费支出计划</p>
                <div class="editor">
                  <vue-editor :editorToolbar="customToolbar" v-model="content"></vue-editor>
                </div>
              </div>
              
            <div id="b" class="baseBtn">
              <div class="blockWidth">
                <el-button type="primary" class="backBtn" @click="back()" size:small>上一步</el-button>
                <el-button type="primary" class="backBtn" @click="putIn" size:small>提交</el-button>
              </div>
            </div>
        </div>
        <!-- 右方数据展示区结束-->


      </div>

      <!-- 提交对话框开始 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible1"
        width="600px"
        class="MAputIn"
        :before-close="init">
        <div class="addDialogLogo">LOGO</div>
        <div class="deleteContent">是否提交“×××”项目活动？</div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="init" class="btn5" size="small">确认提交</el-button>
            <el-button @click="init" class="btn5" style="background:#cccccc" size="small">取消</el-button>
        </span>
      </el-dialog>
      <!-- 提交对话框结束 -->
    </div>
      
  </template>
  
  <script>
  import { VueEditor } from "vue2-editor";
      export default {
        props:["back"],
        components:{
          VueEditor
        },
        data() {
          return {
            content:'',
            dialogVisible1:false,
            customToolbar: [
              ["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }],
              [{ align: "" }, { align: "center" }, { align: "right"}, { align: "justify"}],
              [{header:[false,1,2,3,4]}]
            ],
          }
        },
        methods:{
            init(){
            //重置
            // this.dialogVisible=false;
            this.dialogVisible1=false;
            // this.dialogVisible2=false;
            },
            putIn(){
            // alert('333')
            this.dialogVisible1=true;
            // this.$router.push('/projectApplicationfund')
          },
          backBtn1(){
            this.$router.push('/makerActvityApply')
          },
          homeExit(){

          },
          toPage(val){
            if (val==1) {
              document.getElementById("z").scrollIntoView({ behavior: "smooth" });
            }else if(val==2){
              document.getElementById("x").scrollIntoView({ behavior: "smooth" });
            }else if(val==3){
              document.getElementById("c").scrollIntoView({ behavior: "smooth" });
            }else if(val==4){
              document.getElementById("v").scrollIntoView({ behavior: "smooth" });
            }else if(val==5){
              document.getElementById("b").scrollIntoView({ behavior: "smooth" });
            }
          }
        }
      }
  </script>
  
  <style lang="less">
   .makerActvityContent{
      width: 100%;
      position: relative;

      .el-dialog__header{
        background: #32455b;
        justify-content: center;
      }
      .el-dialog{
        border-radius: 5px;
        overflow: hidden;
      }

    .pTit{
      margin: 20px 5px 0px 0; 
      color: #3994ff;
      font-weight: 550;
      font-size: 18px;
    }

    .editor{
      min-width: 700px;
      box-sizing: border-box;
      padding: 15px 20px 10px 0px;
    }


.MAputIn{   //提交对话框样式
  .deleteContent{
    width: 100%;
    text-align: center;
    font-size: 25px;
    color: #000;
  }
  .addDialogLogo{
    width: 60px;
    height: 30px;
    line-height: 30px;
    background: #f2f2f2;
    position: absolute;
    left: 10px;
    top: 10px;
    text-align: center;
  }
 
  .el-dialog__title{
    margin-left:250px;
    color:rgb(246, 247, 246);
  }
  
  .dialog-footer{
    display: flex;
    justify-content: center;
    .btn5{
      background: #0e72e6;
      height: 40px;
      width: 200px;
      font-size: 16px;
    }
  }
}
   }
  </style>