<template>
  <!-- 项目结项 项目基本内容 -->
    <div class="projectSettlement1">

        <!-- 详情页 -->
      <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="psSmallTit">
        <span style="margin-right: 10px;">结题时间:</span>{{ select.endTime }}
      </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.departmentData" style="width: 100%;" placeholder="请选择">
                          <el-option
                            v-for="item in select.department"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </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="datetime"
                          style="width: 100%;"
                          placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="inpBlock" style="position: relative;">
                        <div class="label">预算总经费</div>
                        <el-input v-model="select.Fund" placeholder="请输入内容"></el-input>
                        <span style="position: absolute;right: -20px;top: 9px;">万</span>
                    </div>
                    <div class="inpBlock">
                        <div class="label">选择分类</div>
                        <el-select v-model="select.sort" style="width: 100%;" placeholder="请选择">
                          <el-option
                            v-for="item in select.sortOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                    </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="phone"
            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.rows.id)" size="mini" style="background: #477edd">查看详情</el-button>
                </div>
            </template>
          </el-table-column> -->
        </el-table>
        <!-- 项目成员区域结束 -->

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

      <div class="baseBtn">
        <div class="blockWidth">
          <el-button type="primary" class="backBtn" @click="back">返回</el-button>
        </div>
      </div>
  
    </div>
  </template>
  
  <script>
      export default {
        data() {
          return {
            options: [{
              value: '选项1',
              label: '中德学院'
            }],
            select:{    //数据详情框数据
              project:'',   
              person:'',
              departmentData:"",  //部门框值
              sort:'',     //分类值
              tel:'',
              Date:'',
              Fund:'',
              sortOptions: [], //分类下拉框
              department:[],
              endTime:''

            },
            textarea:'',     //项目简介
            tableData:[],   //项目成员列表


            value: '中德学院',
            input:'',
            
          }
        },
        methods:{
          getData(){
            let param={
            uid:this.$store.state.userInfo.userid,
            pid:JSON.parse(localStorage.getItem('pid'))
          }
          // console.log(param);
            this.ajax
                  .get(this.$store.state.api+'/GetProjectBase',param)
                  .then(res=>{
                    // console.log(res);
                    let data=res.data[0][0]
                    // console.log(data);
                    this.select.project=data.title;
                    this.select.Fund=data.money;
                    this.select.person=data.pro_leader;
                    this.select.Date=data.begintime;
                    this.textarea=data.brief;
                    this.tableData=JSON.parse(data.course_student) 
                    this.select.tel=data.phone;
                    this.select.endTime=data.endTime
                    this.select.departmentData = data['classid']
                    this.select.sort = data['typeid']
                  },err=>{
                    console.log(err);
                  })
          },
          getProjectDepartmentData(){  //获取项目立项申请基础信息页面所在部门数据
              let param={
                uid:this.$store.state.userInfo.userid
              }
                this.ajax
                      .get(this.$store.state.api+'/SelectAllDepartment',param)
                      .then(res=>{
                        this.select.department=res.data[0]
                      },err=>{
                        console.log(err);
                      })
            },
          getProjectTypeData(){  //获取项目立项申请基础信息页面分类数据
            let param={
              uid:this.$store.state.userInfo.userid
            }
              this.ajax
                    .get(this.$store.state.api+'/SelectAllType',param)
                    .then(res=>{
                      this.select.sortOptions=res.data[0]
                    },err=>{
                      console.log(err);
                    })
          },
          lookDetail(){

          },
          content(){
              this.$router.push('/projectSettlement1')
            },
            remark(){
              this.$router.push('/projectSettlement2')
            },
            remark2(){
              this.$router.push('/projectSettlement3')
            },
            remark4(){
              this.$router.push('/projectSettlement4')
            },
            remark5(){
              this.$router.push('/projectSettlement5')
            },
         
            back(){
            this.$router.push('/projectSettlement')
          },
          handleSelectionChange(val) {
            this.multipleSelection = val;
          },
         
        },
        mounted(){
          this.getData();
          this.getProjectDepartmentData();
          this.getProjectTypeData();
          // this.value=(this.options[0].value)
        }
      }
  </script>
  
  <style lang="less">
  .projectSettlement1{
    .psSmallTit{
        width: 100%;
        margin: 15px 0px 20px 0px;
        text-align: left;
        font-size: 16px;
    }
  }
  </style>