<template>
  <!-- 项目立项申请查看详细项目基本内容 -->
  <div class="projectApplication1">
    <div class="vfpHeader">
      <!-- 详情页 -->
        <div class="titleOne">项目立项申请</div>
        <span class="smallTitle">项目进展详情</span>
        <el-button @click="back()" type="primary" size="mini">返回</el-button>
    </div>


    <hr>
    <!-- 跳转导航开始 -->
    <div class="AppBar">
      <div @click="content" class="AppBarActive">项目基本内容</div>
      <div @click="remark">项目详情</div>
    </div>
    <!-- 跳转导航结束 -->

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

                <div class="selectRight">
                  <div class="inpBlock">
                        <div class="label">项目开始时间</div>
                        <el-date-picker
                          v-model="select.Date"
                          type="date"
                          style="width: 100%;"
                          placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="inpBlock">
                        <div class="label">预算总经费</div>
                        <el-input v-model="select.Fund" 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" @click="lookDetail(scope)" size="mini">查看详情</el-button>
              </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 项目成员结束 -->

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


    <div class="baseBtn">
      <div class="blockWidth">
        <el-button type="primary" class="backBtn" @click="backBtn2">立即审核</el-button>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          select:{
            project:'疯狂星期四',
            person:'袁一鸣',
            department:[
              {
                value: '1',
                label: '肯德基'
              },
              {
                value: '2',
                label: '麦当劳'
              },
              {
                value: '3',
                label: '华莱士'
              },
            ],
            tel:'17739460368',
            Date:'2023-11-12',
            Fund:'200000',
            input:"肯德基",
          },

          options: [{
            value: '选项1',
            label: '中德学院'
          }],
          value: '中德学院',
          textarea:'周四福利大放送',
          input:'',
        
          tableData:[{
            Name:'徐晓慧',
            class:'22电子通信G5',
            tel:'13751177411',
            score:'-',
          },
          ],
          pavalues:{
            value:'',
            value1:'',
            value2:'',
            value3:'',
            value4:'',

          }
        }
      },
      methods:{
        lookDetail(){   //查看详情

        },
        content(){
          this.$router.push('/projectApplicationDetails')
        },
        remark(){
          this.$router.push('/projectApplication2')
        },
        backBtn2(){
          // this.$router.push('/projectApplication')
          this.$message.success('审核成功')
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        back(){
          this.$router.push('/projectApplication')
        }
      },
      created(){
        this.value=(this.options[0].value)
      }
    }
</script>

<style lang="less">
.projectApplication1{

  .selects{
      width: 85%;
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
    .inp1{
      display: flex;
      width:35%;
      margin-right: 7%;
      margin-top: 10px;
      .inpText{
        // max-width: 100px;
        min-width: 100px;
        margin-right: 5px;
        display: inline-block;
        text-align: justify;
        text-justify:distribute-all-lines;
        text-align-last: justify;
        transform: translate(0,22%);
        padding-right: 15px;
        font-size: 16px;
      }
    }
    
  }


  .footer{
      width: 90%;
      margin: 30px 20px;
      display: flex;
      justify-content: flex-end;
      .backBtn{
          background: #169bd5;
      }
  }
  .projectApplicationDetailstextArea{
    display: flex;
    justify-content: flex-start;
    margin-left: 10px;
    textarea{
      resize: none;outline: none;
      background: #f2f2f2;
      box-sizing: border-box;
      padding: 10px;
    }
  }
  
}
</style>