<template>
  <!-- 创客创新-查看详细 -->
     <div class="makerActvityDetails">

            <div class="vfpHeader">
              <div class="titleOne">活动详情</div>
              <el-button type="primary" @click="backBtn">返回</el-button>
            </div>
            <hr>
            <!-- 活动基本信息开始 -->
            <div class="tabTit">
              <div><p>活动基本信息</p></div>
            </div>
          <!-- 活动申请填写信息区域开始 -->
          <div class="select">
                    <div class="selectTop">
                      <div class="label">活动名称</div>
                      <el-input v-model="data.projectName" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="selectMid">
                      <div class="selectLeft">
                          <div class="inpBlock" style="position: relative;">
                              <div class="label">预算经费</div>
                              <el-input v-model="data.budget" placeholder="请输入内容"></el-input>
                              <div style="position: absolute;right: -28px;top:8px">(元)</div>
                          </div>
                          <div class="inpBlock">
                              <div class="label">负责人</div>
                              <el-input v-model="data.person" placeholder="请输入内容"></el-input>
                          </div>
                          <div class="inpBlock">
                              <div class="label">所在部门</div>
                              <el-select v-model="data.department" style="width: 100%;" placeholder="请选择">
                                <el-option
                                  v-for="item in data.departmentOptions"
                                  :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.tel" placeholder="请输入内容"></el-input>
                          </div>
                      </div>

                      <div class="selectRight">
                        <div class="inpBlock" style="position: relative;">
                              <div class="label">实际使用经费</div>
                              <el-input v-model="data.fund" placeholder="请输入内容"></el-input>
                              <div style="position: absolute;right: -28px;top:8px">(元)</div>
                          </div>
                          <div class="inpBlock">
                              <div class="label">参与学生人数</div>
                              <el-input v-model="data.num" placeholder="请输入内容"></el-input>
                          </div>
                          <div class="inpBlock">
                              <div class="label">活动时间</div>
                              <el-input v-model="data.date" placeholder="请输入内容"></el-input>
                          </div>
                      </div>
                    </div>
                   
          </div>
             
            <!-- 活动完结报告开始 -->
            <div class="tabTit">
                <div><p>活动完结报告</p></div>
            </div>
            <div style="width: 85%;float: left;">
              <div style="display: flex;">
                  <div class="download">智能分链机器公开赛.pdf 点击下载</div>
                  <div class="addMoneyBtn">
                      <div class="jia">+</div>添加
                  </div>
              </div>
            </div>
            <!-- 活动完结报告结束 -->

            <!-- 活动指导老师开始 -->
              <div 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' }"
                >
                <!-- 数据根据prop进行遍历填充 -->
                <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" > -->
                              <el-button type="primary" size="mini" style="background: #477edd;font-size: 14px;">修改</el-button>
                              <el-button type="primary" size="mini" style="background: #477edd;font-size: 14px;" @click="DeleteS(scope.rows.id)">删除</el-button>
                          <!-- </el-button> -->
                      </div>
                  </template>
                </el-table-column>
              </el-table>
            <!-- 活动指导老师结束 -->

            <!-- 多行文本框部分开始 -->
            <div class="tabTit">
                 <div><p>活动介绍</p></div>
            </div>
              <el-input
                type="textarea"
                :rows="6"
                placeholder="请输入内容"
                v-model="activity.introduce">
              </el-input>
            <div class="tabTit">
                 <div><p>活动计划</p></div>
            </div>
              <el-input
                type="textarea"
                :rows="6"
                placeholder="请输入内容"
                v-model="activity.plan">
              </el-input>
            <div class="tabTit">
                 <div><p>预期目标</p></div>
            </div>
              <el-input
                type="textarea"
                :rows="6"
                placeholder="请输入内容"
                v-model="activity.target">
              </el-input>
            <div class="tabTit">
                 <div><p>活动受面</p></div>
            </div>
              <el-input
                type="textarea"
                :rows="6"
                placeholder="请输入内容"
                v-model="activity.scope">
              </el-input>
            <div class="tabTit">
                 <div><p>经费支出计划</p></div>
            </div>
              <el-input
                type="textarea"
                :rows="6"
                class="textArea"
                placeholder="请输入内容"
                v-model="activity.expend">
              </el-input>
            <!-- 多行文本框部分结束 -->

            <div class="baseBtn">
              <div class="blockWidth">
                <el-button type="primary" class="makerActvity1backBtn" @click="check" size:small>保存</el-button>
                <el-button type="primary" class="makerActvity1backBtn" @click="check" size:small>立即审核</el-button>
              </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 {
  data() {
    return {
      addMemberDialog:false,
            data:{
                projectName:'疯狂星期四',
                budget:'200',
                fund:"200000",
                department:'肯德基',
                person:'袁一鸣',
                num:'10',
                departmentOptions: [{
                  value: '1',
                  label: '肯德基'
                },
                {
                  value: '2',
                  label: '肯德基'
                }],
                date:'2023-11-12',
                tel:'17739460368'
            },
            activity:{
              introduce:'每周四福利大放送',
              plan:'没有计划，主打真诚',
              target:'为家人谋福利',
              scope:'深技师',
              expend:'1000万'
            },
            Member:{
              Name:'袁一鸣',
              class:'信通学院',
              takeCharge:'ui'
            },
            tableData:[{
              Name:'袁一鸣',
              class:'22电子通信G5',
              takeCharge:'ui设计',
            },
            ],
          
      }
  },
  methods:{
    DeleteS(){

    },
    check(){
      // alert('1111')
    },
    commit(){
      this.addMemberDialog=false;
      this.tableData.push(this.Member)
    },
    handleClose(){
      this.addMemberDialog=false;
    },
    backBtn(){
      this.$router.push('/makerActvity')
    },
    addTeacher(){
      this.addMemberDialog=true;

    }
  }
}
</script>

<style lang="less">
.makerActvityDetails{

    
  .download{   //pdf下载
    margin: 20px 15px;
    width: 250px;
    line-height: 35px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    color: #5391fd;
    cursor: pointer;
  }

    
  textarea{
    font-size: 16px;
    resize: none;
  }

  }
</style>