<template>
  <!-- 项目立项申请项目内容表达 -->
      <div class="projectApplicationApply2">
        <div class="left">
          <div class="sx">
            <div class="qiu"></div>
          </div>
          <div class="leftTits">
            <div @click="toPage(1)">项目创新点</div>
            <div @click="toPage(2)" style="position: relative;right: 5px;">
              <el-tooltip class="item" effect="light" content="预期取得的成果" placement="bottom-start">
                <p>预期取得的成果</p>
              </el-tooltip>
            </div>
            <div @click="toPage(3)">实施计划</div>
            <div @click="toPage(4)">下一步</div>
          </div>
        </div>
        <div class="right">
            <div id="q" class="vfpHeader">
              <div class="titleOne">项目立项申请</div>
              <el-button @click="backBtn1" type="primary" size="mini">返回</el-button>
            </div>
            <hr>
            <div id="w">
              <p class="pTit">项目创新点</p>
              <div class="editor">
                <vue-editor  :editorToolbar="customToolbar" v-model="data.contentOne"></vue-editor>
              </div>
            </div>
            <div>
              <p class="pTit">预期取得的成果</p>
              <div>
                <p class="pTit2">一、项目预期成果、数量及形式</p>
                <div class="editor">
                  <vue-editor  :editorToolbar="customToolbar" v-model="data.contentTwo"></vue-editor>
                </div>
              </div>
              <div>
                <p class="pTit2">二、创客人才培养预期成果、数量</p>
                <div class="editor">
                  <vue-editor  v-model="data.contentThree" :editorToolbar="customToolbar"></vue-editor>
                </div>
              </div>
              <div>
                <p class="pTit2">三、项目预期孵化、转化创业项目情况</p>
                <div class="editor">
                  <vue-editor :editorToolbar="customToolbar" v-model="data.contentFour"></vue-editor>
                </div>
              </div>
            </div>
            <div id="e">
              <p class="pTit">项目实施计划</p>
              <div class="editor">
                <vue-editor v-model="data.contentFive" :editorToolbar="customToolbar"></vue-editor>
              </div>
            </div>
            <div id="r" class="baseBtn">
              <div class="blockWidth">
                <el-button type="primary" class="backBtn" @click="backBtn1" size:small>上一步</el-button>
                <el-button type="primary" class="backBtn" @click="backBtn" size:small>下一步</el-button>
              </div>
            </div>
        </div>
      </div>
  </template>
  
  <script>
  import { VueEditor } from "vue2-editor";
      export default {
        props:["data","next",'back'],
        components:{
          VueEditor
        },
        data() {
          return {
            content:'',
            customToolbar: [
              ["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }],
              [{ align: "" }, { align: "center" }, { align: "right"}, { align: "justify"}],
              [{header:[false,1,2,3,4]}]
            ],
          }
        },
        methods:{
          backBtn(){
            this.next();
          },
          backBtn1(){
            this.back();
          },
          toPage(val){
            if (val==1) {
              document.getElementById("q").scrollIntoView({ behavior: "smooth" });
            }else if(val==2){
              document.getElementById("w").scrollIntoView({ behavior: "smooth" });
            }else if(val==3){
              document.getElementById("e").scrollIntoView({ behavior: "smooth" });
            }else if(val==4){
              document.getElementById("r").scrollIntoView({ behavior: "smooth" });
            }
          }
        }
      }
  </script>
  
  <style lang="less">
  .projectApplicationApply2{
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 100px;

    .item {
      margin: 4px;
    }
    
  }


    .pTit{
      color: #3994ff;
      font-weight: 550;
      font-size: 18px;
    }
    .pTit2{
      margin-top: 15px;
      color: #3994ff;
      font-weight: 550;
      font-size: 16px;
    }
    .editor{
      width: 100%;
      min-width: 700px;
      box-sizing: border-box;
      padding: 15px 0px 10px 0px;
    }
  </style>