<template>
  <!-- 项目管理 项目基本内容 -->
  <div class="ProjectManagement1">
    <div class="vfpHeader">
      <!-- 详情页 -->
        <div class="titleOne">项目管理</div>
        <div class="smallTitle" style="left: 100px;">项目进展详情</div>
        <el-button type="primary" @click="back">返回</el-button>
    </div>
    <hr>

  <!-- 跳转导航开始 -->
  <div class="AppBar">
      <div @click="content" class="AppBarActive">项目基本内容</div>
      <div @click="remark">项目详情</div>
      <div @click="remark2">活动开展</div>
      <div @click="remark4">项目附件</div>
      <div @click="remark5">项目结题附件</div>
    </div>
    <!-- 跳转导航结束 -->

     <!-- 活动申请填写信息区域开始 -->
     <div class="select">
              <div class="selectTop">
                <div class="label">项目名称</div>
                <el-input v-model="input" placeholder="请输入内容"></el-input>
              </div>
              <div class="selectMid">
                <div class="selectLeft">
               
                    <div class="inpBlock">
                        <div class="label">负责人</div>
                        <el-input v-model="input" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="inpBlock">
                        <div class="label">所在部门</div>
                        <el-select v-model="input" style="width: 100%;" placeholder="请选择">
                          <el-option
                            v-for="item in 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="input" placeholder="请输入内容"></el-input>
                    </div>
                </div>

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

    <!-- 项目成员区域开始 -->
      <div class="tabTit">
          <div><p>项目成员</p></div>
      </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="tel"
          label="电话"
          align="center"
          >
        </el-table-column>

        <el-table-column
          prop="score"
          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" class="bt1" size="mini" style="background: #477edd">查看详情</el-button>
                  <!-- </el-button> -->
              </div>
          <!-- </template> -->
        </el-table-column>
      </el-table>
    <!-- 项目成员区域结束 -->

    <!-- 项目简介区域开始 -->
    <div class="tabTit">
          <div><p>项目简介</p></div>
    </div>
    <hr>
    <div class="pmProgressTextArea">
      <el-input
        type="textarea"
        :rows="5"
        class="textArea"
        resize="none"
        placeholder="请输入内容"
        v-model="textarea">
      </el-input>
    </div>
    <!-- 项目简介区域结束 -->

    <div class="pm1footer">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1">
      </el-pagination>
    </div>

  </div>
</template>

<script>
    export default {
      data() {
        return {
          options: [{
            value: '选项1',
            label: '中德学院'
          }],
          value: '中德学院',
          input:'',
          textarea:'',
          tableData:[{
            Name:'徐晓慧',
            class:'22电子通信G5',
            tel:'13751177411',
            score:'-',
          }
          ],
        }
      },
      methods:{
        content(){
            this.$router.push('/ProjectManagement1')
          },
          remark(){
            this.$router.push('/ProjectManagement2')
          },
          remark2(){
            this.$router.push('/ProjectManagement3')
          },
          remark4(){
            this.$router.push('/ProjectManagement4')
          },
          remark5(){
            this.$router.push('/ProjectManagement5')
          },
          back(){
            this.$router.push('/ProjectManagement')
          },
       
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
       
      },
      created(){
        // this.value=(this.options[0].value)
      }
    }
</script>

<style lang="less">
.ProjectManagement1{


  .pm1footer{
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      height: 50px;
      
      .backBtn{
          background: #169bd5;
          float: right;
          width: 100px;
      }
  }
  .pmProgressTextArea{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    
  }

 
}
</style>