<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.activityName" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="selectMid">
                      <div class="selectLeft">
                          <div class="inpBlock">
                              <div class="label">所属项目</div>
                              <el-select v-model="data.select.pid" @change="checkProjectMoney(data.select.pid,data.select.fund)" style="width: 100%;" placeholder="请选择">
                                <el-option
                                  v-for="item in data.project"
                                  :key="item.courseId"
                                  :label="item.title"
                                  :value="item.courseId">
                                </el-option>
                              </el-select>
                          </div>
                          <div class="inpBlock">
                              <div class="label">预算经费</div>
                              <el-input type="number" v-model.number="data.select.fund" @blur="checkProjectMoney(data.select.pid,data.select.fund)" placeholder="请输入内容"></el-input>
                              <div style="position: absolute;right: -30px;top: 10px;">(元)</div>
                          </div>
                          <div class="inpBlock">
                              <div class="label">负责人</div>
                              <el-input v-model="data.select.leader" 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.class"
                                  :key="item.id"
                                  :label="item.name"
                                  :value="item.id">
                                </el-option>
                              </el-select>
                          </div>

                      </div>

                      <div class="selectRight">
                        <div class="inpBlock">
                              <div class="label">活动时间</div>
    
                              <el-date-picker
                                v-model="data.select.time"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                style="width: 100%;"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                              </el-date-picker>
                          </div>
                          <div class="inpBlock">
                              <div class="label">参加学生人数</div>
                              <el-input type="number" v-model.number="data.select.people" placeholder="请输入内容"></el-input>
                          </div>
                          <div class="inpBlock">
                              <div class="label">联系电话</div>
                              <el-input v-model="data.select.tel" @blur="checkPhone(data.select.tel)" 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="data.select.teacher"
                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="work"
                  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" @click="updateTeacher(scope.$index)">修改</el-button>
                              <el-button type="primary" size="mini" @click="deleteRow(scope.$index)">删除</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.select.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="isAddTeacher?'添加指导老师':'修改指导老师'"
            :visible.sync="addMemberDialog"
            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.work"></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 v-if="isAddTeacher" type="primary" @click="commit" class="AllDialogBtn" size="small">确认提交</el-button>
                <el-button v-if="!isAddTeacher"  type="primary" @click="change" class="AllDialogBtn" size="small">确认修改</el-button>
                <el-button @click="handleClose" class="AllDialogBtn" size="small">取消</el-button>
              </div>
        </el-dialog>
      <!--添加成员dialog对话框结束 -->
      <!-- 删除指导老师开始 -->
      <el-dialog
        title="提示"
        :visible.sync="DelTeacherDialog"
        width="600px"
        class="MAputIn AddMember">
        <div class="addDialogLogo">LOGO</div>
        <div class="deleteContent">是否删除“{{ delTeacherTable.Name}}”指导老师？</div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="DelTeacherYes" class="AllDialogBtn" size="small">确认删除</el-button>
            <el-button @click="DelTeacherDialog=false;" class="AllDialogBtn" size="small">取消</el-button>
        </span>
      </el-dialog>
      <!-- 删除指导老师结束 -->


    </div>
      
  </template>
  
  <script>
      export default {
        props:["next","data","checkPhone","checkProjectMoney"],
        data() {
          return {
            addMemberDialog:false,
            Member:{
              Name:'',
              work:'',
              takeCharge:''
            },
            isAddTeacher:true,
            delTeacherTable:{
              index:"",
              Name:"",
            },
            DelTeacherDialog:false,
          }
        },
        methods:{
          handleSelectionChange(val) {
            this.multipleSelection = val;
          },
          
          addTeacher(){
              this.addMemberDialog=true;
          },
          backBtn1(){
            this.$router.push('/makerActvity')
          },
          commit(){
            //判断是否全部填写
            for(let a in this.Member)if(/^\s*$/g.test(this.Member[a]))return this.$message.error("请不要留空")
            let pushData={};
            Object.assign(pushData,this.Member)
            this.data.select.teacher.push(pushData);
            for(let i in this.Member)this.Member[i] = '';
            this.addMemberDialog=false;
            this.$message({
              message:"添加成功",
              type:"success"
            });
            this.isAddTeacher = true;
          },
          
          handleClose(){
            for(let i in this.Member)this.Member[i] = '';
            this.addMemberDialog=false;
            this.isAddTeacher = true;
          },
          updateTeacher(index){    //显示修改对话框
            Object.assign(this.Member,this.data.select.teacher[index]);
            this.Member['index'] = index;
            this.isAddTeacher = false;
            this.addMemberDialog = true;
          },
          change(){  //成员信息确定修改
            if(this.isAddTeacher)return this.$message.error("错误");
            for(let a in this.Member)if(/^\s*$/g.test(this.Member[a]))return this.$message.error("请不要留空")
            Object.assign(this.data.select.teacher[this.Member.index],this.Member)
            for(let i in this.Member)this.Member[i]='';
            this.addMemberDialog = false;
            this.isAddTeacher = true;
          },
          deleteRow(index){
            this.delTeacherTable = this.data.select.teacher[index];
            this.delTeacherTable["index"] = index;
            this.DelTeacherDialog = true;
          },
          DelTeacherYes(){
            this.data.select.teacher.splice(this.delTeacherTable["index"],1);
            this.DelTeacherDialog = false;
            this.$message.success("删除成功")
          },
          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" });
            }
          },

        },
      }
  </script>
  
  <style lang="less">
  .makerActvityApplyPAapply{
      width: 100%;
      position: relative;
    }
    .MAputIn{   //提交对话框样式
  .deleteContent{
    width: 100%;
    text-align: center;
    font-size: 25px;
    color: #000;
  }
  .addDialogLogo{
    width: 60px;
        height: 30px;
        display: flex;
        justify-content: center;
        line-height: 30px;
        border-radius: 5px;
        background: #f2f2f2;
        position: absolute;
        left: 20px; top: 15px; 
  }
 
  .el-dialog__title{
    color:#fff;
        display: flex;
        justify-content: center;
        font-size: 18px;
        position: relative;
        top: -2px;
  }
  
  .dialog-footer{
    display: flex;
    justify-content: center;
  }
}
.littleBlock{
  .dialogLabel{
    width: 15% !important;
  }
}

  </style>