<template>
  <!-- 创客创新-活动申请基础信息表单 -->
    <div class="makerActvityApplyPAapply">
      <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>
            </div>
        </div>
      <!-- 左边导航区结束 -->

        <!-- 右边填写信息区域开始 -->
        <div class="right">
              <div id="a" class="vfpHeader">
                  <div class="titleOne">创客创新-活动申请</div>
                  <el-button type="primary" @click="$router.back()">返回</el-button>
              </div>
              <hr>

              
              <!-- 活动申请填写信息区域开始 -->
              <div class="select">
                    <div class="selectTop">
                      <div class="label">项目名称</div>
                      <el-input v-model="data.select.projectName" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="selectMid">
                      <div class="selectLeft">
                          <div class="inpBlock">
                              <div class="label">预算经费</div>
                              <el-input v-model="data.select.fund" placeholder="请输入内容"></el-input>
                          </div>
                          <div class="inpBlock">
                              <div class="label">负责人</div>
                              <el-input v-model="data.select.person" placeholder="请输入内容"></el-input>
                          </div>
                          <div class="inpBlock">
                              <div class="label">所在部门</div>
                              <el-select v-model="data.select.value" style="width: 100%;" placeholder="请选择">
                                <el-option
                                  v-for="item in data.options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                              </el-select>
                          </div>
                          <div class="inpBlock">
                              <div class="label">联系电话</div>
                              <el-input v-model="data.select.tel" placeholder="请输入内容"></el-input>
                          </div>
                      </div>

                      <div class="selectRight">
                        <div class="inpBlock">
                              <div class="label">项目开始时间</div>
                              <el-date-picker
                                v-model="data.select.date"
                                type="date"
                                style="width: 100%;"
                                placeholder="选择日期">
                              </el-date-picker>
                          </div>
                          <div class="inpBlock">
                              <div class="label">预算总经费</div>
                              <el-input v-model="data.select.fund" placeholder="请输入内容"></el-input>
                          </div>
                          
                      </div>
                    </div>
                   
              </div>
              <!-- 活动申请填写信息区域结束 -->

              <!-- 活动指导老师开始 -->
              <div id="s" class="tabTit">
                  <div><p>活动指导老师</p></div>
                  <el-button type="primary" @click="addTeacher"  size="mini">添加教师</el-button>
              </div>
              <hr>
              <el-table
                :data="tableData"
                tooltip-effect="dark"
                stripe
                class="fontSize"
                :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
                >
              
                <el-table-column
                  prop="Name"
                  label="姓名"
                  align="center"
                  >
                </el-table-column>
                <el-table-column
                  prop="class"
                  label="工作单位"
                  align="center"
                  >
                </el-table-column>
  
                <el-table-column
                  prop="takeCharge"
                  label="活动分工"
                  align="center"
                  >
                </el-table-column>
               
                <el-table-column
                  prop="operation"
                  align="center"
                  label="操作"
                  >
                  <template #default="scope">
                      <div class="operations">
                              <el-button type="primary" size="mini" >修改</el-button>
                              <el-button type="primary" size="mini" @click="deleteRow(scope)">删除</el-button>
                      </div>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 活动指导老师结束 -->

            <!-- 活动介绍区域开始 -->
            <div id="d" class="tabTit">
                  <div><p>活动介绍</p></div>
            </div>
            <hr>
            <div class="textArea">
              <el-input
                type="textarea"
                :rows="6"
                resize="none"
                class="textArea"
                placeholder="请输入内容"
                v-model="data.introduce">
              </el-input>
            </div>
            <!-- 活动介绍区域结束 -->


            <div id="f" class="baseBtn">
              <div class="blockWidth">
                <el-button type="primary"  @click="backBtn1" size:small>上一步</el-button>
                <el-button type="primary"  @click="next()" size:small>下一步</el-button>
              </div>
            </div>
        </div>
        <!-- 右边填写信息区域结束 -->
      </div>
  
        <!--添加成员dialog对话框开始 -->
         <el-dialog
            title="添加成员"
            :visible.sync="addMemberDialog"
            :modal="false"
            :close-on-click-modal="false"
            class="AddMember"
            :before-close="handleClose">

              <div class="littleBlock">
                <div class="dialogLabel">姓名</div>
                <div>
                  <el-input v-model="Member.Name"></el-input>
                </div>
              </div>

              <div class="littleBlock">
                <div class="dialogLabel">班级</div>
                <div>
                  <el-input v-model="Member.class"></el-input>
                </div>
              </div>

              <div class="littleBlock">
                <div class="dialogLabel">电话</div>
                <div>
                  <el-input v-model="Member.takeCharge"></el-input>
                </div>
              </div>
              <div slot="footer" class="footer">
                <el-button @click="commit" class="diaBtn" style="background: #0e72e6;color: #fff;" size="small">确认提交</el-button>
                <el-button @click="handleClose" class="diaBtn" style="background: #cccccc;color: #000;" size="small">取消</el-button>
              </div>
        </el-dialog>
      <!--添加成员dialog对话框结束 -->


    </div>
      
  </template>
  
  <script>
      export default {
        props:["next","data"],
        data() {
          return {
            addMemberDialog:false,
            value1:'',  //日期
            options: [{
              value: '选项1',
              label: '黄金糕'
            }],
            Member:{
              Name:'袁一鸣',
              class:'21通信',
              takeCharge:'ui设计'
            },
            value: '中德学院',
            input:'',
            textarea:'',
            tableData:[{
              Name:'徐晓慧',
              class:'22电子通信G5',
              takeCharge:'UI设计',
            },
            ],
          }
        },
        methods:{
          handleSelectionChange(val) {
            this.multipleSelection = val;
          },
          
          addTeacher(){
              this.addMemberDialog=true;
          },
          backBtn1(){
            this.$router.push('/makerActvity')
          },
          commit(){
            this.addMemberDialog=false;
            this.tableData.push(this.Member)
          },
          handleClose(){
            this.addMemberDialog=false;
          },
          deleteRow(){
            console.log(111);
          },
          toPage(val){
            if (val==1) {
              document.getElementById("a").scrollIntoView({ behavior: "smooth" });
            }else if(val==2){
              document.getElementById("s").scrollIntoView({ behavior: "smooth" });
            }else if(val==3){
              document.getElementById("d").scrollIntoView({ behavior: "smooth" });
            }else if(val==4){
              document.getElementById("f").scrollIntoView({ behavior: "smooth" });
            }
          }
        },
        created(){
          this.value=(this.options[0].value)
        }
      }
  </script>
  
  <style lang="less">
  .makerActvityApplyPAapply{
      width: 100%;
      position: relative;
    }


  </style>