<template>
  <!-- 项目立项申请项目内容表达 -->
      <div class="projectApplicationApply2">
        <div class="left">
          <div class="sx">
            <div class="qiu"></div>
          </div>
          <div class="leftTits">
            <div @click="toPage(1)" style="position: relative;right: 5px;">
              <el-tooltip class="item" effect="light" content="项目建设内容及目标" placement="bottom-start">
                <p>项目建设内容及目标</p>
              </el-tooltip>
            </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(5)" style="position: relative;right: 5px;">
              <el-tooltip class="item" effect="light" content="立项基础及条件" placement="bottom-start">
                <p>立项基础及条件</p>
              </el-tooltip>
            </div>
            <div @click="toPage(4)">下一步</div>
          </div>
        </div>
        <div class="right">
            <div id="l" 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>
                <p class="pTit2">一、建设内容<span>（空间优化/场馆规划方面拟解决的关键问题及主要建设指标）</span></p>
                <div class="editor">
                  <el-input
                    type="textarea"
                    :rows="6"
                    resize="none"
                    class="textArea"
                    placeholder="请输入内容"
                    v-model="data.Construction">
                  </el-input>
                  <!-- <vue-editor  :editorToolbar="customToolbar" v-model="data.Construction"></vue-editor> -->
                </div>
              </div>
            </div>
            <div id="a">
              <p class="pTit">预项目建设论证报告</p>
              <div>
                <p class="pTit2">一、立项依据<span> （说明本项目的目的、意义以及国内外高校现状、市场预测和发展趋势，预期达到的目标，研究的预期效果分析，成果受益面）</span></p>
                <div class="editor">
                  <el-input
                    type="textarea"
                    :rows="6"
                    resize="none"
                    class="textArea"
                    placeholder="请输入内容"
                    v-model="data.ProjectBasis">
                  </el-input>
                  <!-- <vue-editor  :editorToolbar="customToolbar" v-model="data.ProjectBasis"></vue-editor> -->
                </div>
              </div>
            </div>
            <div id="q">
              <p class="pTit">预期成果</p>
              <div>
                <p class="pTit2">一、创客空间物理环境、制度建设及软件设施建设情况<span>（环境优化/制度完善/设施改造）</span></p>
                <div class="editor">
                  <el-input
                    type="textarea"
                    :rows="6"
                    resize="none"
                    class="textArea"
                    placeholder="请输入内容"
                    v-model="data.customToolbar">
                  </el-input>
                  <!-- <vue-editor  v-model="data.development" :editorToolbar="customToolbar"></vue-editor> -->
                </div>
              </div>

              <div>
                <p class="pTit2">二、学生创客工作室建设情况<span>（工作室数量及活动开展情况）</span></p>
                <div class="editor">
                  <el-input
                    type="textarea"
                    :rows="6"
                    resize="none"
                    class="textArea"
                    placeholder="请输入内容"
                    v-model="data.studio">
                  </el-input>
                  <!-- <vue-editor :editorToolbar="customToolbar" v-model="data.studio"></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.studentTeam">
                  </el-input>
                  <!-- <vue-editor :editorToolbar="customToolbar" v-model="data.studentTeam"></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.studentActivities">
                  </el-input>
                  <!-- <vue-editor :editorToolbar="customToolbar" v-model="data.studentActivities"></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.Transforming">
                  </el-input>
                  <!-- <vue-editor :editorToolbar="customToolbar" v-model="data.Transforming"></vue-editor> -->
                </div>
              </div>
            </div>
            <div id="p">
              <p class="pTit">立项基础及条件</p>
              <div>
                <p class="pTit2">一、基础条件<span>（物理环境/设备设施/项目实施/活动开展/技术力量/社会资源）</span></p>
                <div class="editor">
                  <el-input
                    type="textarea"
                    :rows="6"
                    resize="none"
                    class="textArea"
                    placeholder="请输入内容"
                    v-model="data.condition">
                  </el-input>
                  <!-- <vue-editor  :editorToolbar="customToolbar" v-model="data.condition"></vue-editor> -->
                </div>
              </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("w").scrollIntoView({ behavior: "smooth" });
            }else if(val==2){
              document.getElementById("a").scrollIntoView({ behavior: "smooth" });
            }else if(val==3){
              document.getElementById("q").scrollIntoView({ behavior: "smooth" });
            }else if(val==4){
              document.getElementById("r").scrollIntoView({ behavior: "smooth" });
            }else if(val==5){
              document.getElementById("p").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;
      span{
        font-size: 14px;
      }
    }
    .editor{
      width: 100%;
      box-sizing: border-box;
      padding: 15px 0px 10px 0px;
    }
  </style>