<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(3)">团队优势</div>
            <div @click="toPage(4)">研发成本</div>
            <div @click="toPage(5)">预期成果</div>
            <div @click="toPage(6)">预期成果</div>
            <div @click="toPage(7)">下一步</div>
          </div>
        </div>
        <div class="right">
            <div class="vfpHeader">
              <div class="titleOne">项目立项申请</div>
              <el-button @click="backBtn1" type="primary" size="mini">返回</el-button>
            </div>
            <hr>
            <div id="1">
              <p class="pTit">研发内容</p>
              <div>
                <p class="pTit2">一、项目研发背景</p>
                <div class="editor">
                  <el-input
                    type="textarea"
                    :rows="6"
                    resize="none"
                    class="textArea"
                    placeholder="请输入内容"
                    v-model="data.back">
                  </el-input>
                  <!-- <vue-editor  :editorToolbar="customToolbar" v-model="data.back"></vue-editor> -->
                </div>
              </div>
              <div>
                <p class="pTit2">二、项目创新点</p>
                <div class="editor">
                  <el-input
                    type="textarea"
                    :rows="6"
                    resize="none"
                    class="textArea"
                    placeholder="请输入内容"
                    v-model="data.innovate">
                  </el-input>
                  <!-- <vue-editor  :editorToolbar="customToolbar" v-model="data.innovate"></vue-editor> -->
                </div>
              </div>
              <div>
                <p class="pTit2">三、技术研发路线</p>
                <div class="editor">
                  <el-input
                    type="textarea"
                    :rows="6"
                    resize="none"
                    class="textArea"
                    placeholder="请输入内容"
                    v-model="data.path">
                  </el-input>
                  <!-- <vue-editor  :editorToolbar="customToolbar" v-model="data.path"></vue-editor> -->
                </div>
              </div>
              <div>
                <p class="pTit2">四、项目应用场景</p>
                <div class="editor">
                  <el-input
                    type="textarea"
                    :rows="6"
                    resize="none"
                    class="textArea"
                    placeholder="请输入内容"
                    v-model="data.scene">
                  </el-input>
                  <!-- <vue-editor  :editorToolbar="customToolbar" v-model="data.scene"></vue-editor> -->
                </div>
              </div>
              <!-- <div class="editor">
                <vue-editor  :editorToolbar="customToolbar" v-model="data.contentOne"></vue-editor>
              </div> -->
            </div>
            <div id="2">
              <p class="pTit">商业模式及社会价值</p>
              <div>
                <p class="pTit2">一、项目商业模式/社会价值</p>
                <div class="editor">
                  <el-input
                    type="textarea"
                    :rows="6"
                    resize="none"
                    class="textArea"
                    placeholder="请输入内容"
                    v-model="data.worth">
                  </el-input>
                  <!-- <vue-editor  :editorToolbar="customToolbar" v-model="data.worth"></vue-editor> -->
                </div>
              </div>
            </div>
            <div id="3">
              <p class="pTit">团队优势</p>
              <div>
                <p class="pTit2">一、团队构成及优势</p>
                <div class="editor">
                  <el-input
                    type="textarea"
                    :rows="6"
                    resize="none"
                    class="textArea"
                    placeholder="请输入内容"
                    v-model="data.team">
                  </el-input>
                  <!-- <vue-editor  :editorToolbar="customToolbar" v-model="data.team"></vue-editor> -->
                </div>
              </div>
            </div>

            <div id="4">
              <p class="pTit">研发成本</p>
              <div>
                <p class="pTit2">一、研发成本来源及构成</p>
                <div class="editor">
                  <el-input
                    type="textarea"
                    :rows="6"
                    resize="none"
                    class="textArea"
                    placeholder="请输入内容"
                    v-model="data.cost">
                  </el-input>
                  <!-- <vue-editor  :editorToolbar="customToolbar" v-model="data.cost"></vue-editor> -->
                </div>
              </div>
            </div>
            <div id="5">
              <p class="pTit">预期成果</p>
              <div>
                <p class="pTit2">一、项目预期成果、数量及形式（产品原型/发明专利/双创竞赛/成果转化/社会效益）</p>
                <div class="editor">
                  <el-input
                    type="textarea"
                    :rows="6"
                    resize="none"
                    class="textArea"
                    placeholder="请输入内容"
                    v-model="data.expectResults">
                  </el-input>
                  <!-- <vue-editor  :editorToolbar="customToolbar" v-model="data.expectResults"></vue-editor> -->
                </div>
              </div>
              <div>
                <p class="pTit2">二、学生创客人才培养预期成果、数量（教师填写）</p>
                <div class="editor">
                  <el-input
                    type="textarea"
                    :rows="6"
                    resize="none"
                    class="textArea"
                    placeholder="请输入内容"
                    v-model="data.expectResultsTeacher">
                  </el-input>
                  <!-- <vue-editor  :editorToolbar="customToolbar" v-model="data.expectResultsTeacher"></vue-editor> -->
                </div>
              </div>
              <div>
                <p class="pTit2">三、项目预期孵化、转化创业项目情况</p>
                <div class="editor">
                  <el-input
                    type="textarea"
                    :rows="6"
                    resize="none"
                    class="textArea"
                    placeholder="请输入内容"
                    v-model="data.expectConversion">
                  </el-input>
                  <!-- <vue-editor  :editorToolbar="customToolbar" v-model="data.expectConversion"></vue-editor> -->
                </div>
              </div>
            </div>
            <div id="6">
              <p class="pTit">实施计划</p>
              <div class="editor">
                <el-input
                    type="textarea"
                    :rows="6"
                    resize="none"
                    class="textArea"
                    placeholder="请输入内容"
                    v-model="data.plan">
                  </el-input>
                <!-- <vue-editor  :editorToolbar="customToolbar" v-model="data.plan"></vue-editor> -->
              </div>
            </div>
            <div id="7" 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("1").scrollIntoView({ behavior: "smooth" });
            }else if(val==2){
              document.getElementById("2").scrollIntoView({ behavior: "smooth" });
            }else if(val==3){
              document.getElementById("3").scrollIntoView({ behavior: "smooth" });
            }else if(val==4){
              document.getElementById("4").scrollIntoView({ behavior: "smooth" });
            }else if(val==5){
              document.getElementById("5").scrollIntoView({ behavior: "smooth" });
            }else if(val==6){
              document.getElementById("6").scrollIntoView({ behavior: "smooth" });
            }else if(val==7){
              document.getElementById("7").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;
    }

  </style>