<template>
  <!-- 创客资金管理 -->
  <div class="makerfund">
    <div class="pAHeader">
      <div class="pAHeader1">创客资金管理</div>
      <el-button type="primary" style="font-size: 16px;" @click="apply">创客资金申请</el-button>
    </div>
    <hr>
    <!-- 搜索框开始 -->
    <div class="selects">
      <div class="selectsBlock">
        <div class="selectLabel">项目筛选</div>
        <el-select v-model="pavalues.value" placeholder="我的项目">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <div class="selectLabel">部门</div>
        <el-select v-model="pavalues.value1" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <div class="selectLabel">分类</div>
        <el-select v-model="pavalues.value2" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <div class="selectLabel">负责人</div>
        <el-select v-model="pavalues.value3" placeholder="请选择">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

    </div>
    <!-- 搜索框结束 -->

<!-- 表格开始 -->
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        @selection-change="handleSelectionChange">
        
        <el-table-column
          prop="projectName"
          label="项目名称"
          align="center"
          min-width="10%"
          >
        </el-table-column>
        <el-table-column
          prop="projectPerson"
          align="center"
          min-width="8%"

          label="负责人"
          >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="8%"

          prop="relevancy"
          label="项目类型"
          >
        </el-table-column>
        <el-table-column
          prop="budget"
          align="center"
          min-width="8%"

          label="申请经费(元)"
          >
        </el-table-column>
        <el-table-column
          prop="useBudget"
          align="center"
          min-width="8%"

          label="实际使用(元)"
          >
        </el-table-column>
        <el-table-column
          prop="dept"
          align="center"
          min-width="8%"

          label="所在部门"
          >
        </el-table-column>
        <el-table-column
          prop="status"
          align="center"
          min-width="7%"

          label="状态"
          >
        </el-table-column>
        <el-table-column
          prop="date"
          align="center"
          min-width="10%"

          label="申请时间"
          >
        </el-table-column>
        <el-table-column
          prop="operation"
          width="340"
          align="center"
          label="操作"
          >
          <template #default="scope">
              <div class="operations">
                  <!-- <el-button type="primary" > -->
                        <el-button type="primary" class="bt1" size="mini" @click="details">查看详情</el-button>
                        <el-button type="primary" class="bt1" size="mini" @click="Audit">{{status==-1?"审核":status?"撤回":'审核'}}</el-button>
                        <el-button type="primary" class="bt1" size="mini" @click="edit(scope.row.id,scope.row.status)">申请表</el-button>
                        <el-button type="primary" class="bt1" size="mini">完结</el-button>
                  <!-- </el-button> -->
              </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!-- 表格结束 -->

    <!-- 审核对话框开始 -->
    <div class="dialog">
      <el-dialog
        title="立项审核"
        :visible.sync="dialogVisible"
        width="750px"
        :before-close="init">
        <div class="diaTit1" style="margin-top: 0;">
            <div class="spans">项目名称:</div><div style="margin-right: 30px;color: #adadad;">人工智能分链机器</div>
            <div class="spans">项目负责人:</div><div style="color:#adadad">徐晓霞</div>
        </div>

        <div class="diaTit1">
          <div class="spans1">所在部门</div>
          <div>
            <el-input v-model="input" disabled placeholder="信通学院"></el-input>
          </div>
        </div>

        <div class="diaTit1">
          <div class="spans1">使用经费</div>
          <div>
            <el-input v-model="input" disabled placeholder="6000"></el-input>
          </div>
        </div>

        <div class="diaTit1">
          <div class="spans1">联系电话</div>
          <div>
            <el-input v-model="input" disabled placeholder="13854449525"></el-input>
          </div>
        </div>

        <div class="diaTit1">
          <div class="spans1">项目类型</div>
          <div>
            <el-select v-model="value" disabled placeholder="个人创客">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="diaTit1">
          <div class="spans1">直接经费</div>
          <div>
            <el-select v-model="value" disabled placeholder="测试化验加工费">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="diaTit1">
          <div class="diaTit5">
            <div class="spans1">预算</div>
            <div>
              <el-input v-model="input" placeholder="6000"></el-input>
            </div>
          </div>

          <div class="diaTit5">
            <div class="spans1">已支付</div>
            <div>
              <el-input v-model="input" disabled placeholder="-"></el-input>
            </div>
          </div>
          <div class="diaTit5">
            <div class="spans1">余额</div>
            <div>
              <el-input v-model="input" placeholder="6000"></el-input>
            </div>
          </div>
        </div>
        
        <div class="diaTit1">
          <div class="spans1">事由</div>
          <el-input
            type="textarea"
            :rows="3"
            resize="none"
            style="width: 100%;"
            placeholder="请输入内容"
            v-model="textarea">
          </el-input>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="init" class="diaBtn">审核通过</el-button>
          <el-button @click="init" class="diaBtn">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 审核对话框结束 -->


    <!-- 立项撤回提交对话框开始 -->
    <div class="dialog">
      <el-dialog
        title="立项撤回提交"
        :visible.sync="revocation"
        width="900px"
        :before-close="init">
        <div class="diaTit1" style="margin-top: 0;">
            <div class="spans">项目名称:</div><div style="margin-right: 30px;color: #adadad;">人工智能分链机器</div>
            <div class="spans">项目负责人:</div><div style="color:#adadad">徐晓霞</div>
        </div>

        <div class="diaTit1">
          <div class="spans1">所在部门</div>
          <div>
            <el-input v-model="input" disabled placeholder="信通学院"></el-input>
          </div>
        </div>

        <div class="diaTit1">
          <div class="spans1">使用经费</div>
          <div>
            <el-input v-model="input" disabled placeholder="6000"></el-input>
          </div>
        </div>

        <div class="diaTit1">
          <div class="spans1">联系电话</div>
          <div>
            <el-input v-model="input" disabled placeholder="13854449525"></el-input>
          </div>
        </div>

        <div class="diaTit1">
          <div class="spans1">项目类型</div>
          <div>
            <el-select v-model="value" disabled placeholder="个人创客">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="diaTit1">
          <div class="spans1">直接经费</div>
          <div>
            <el-select v-model="value" disabled placeholder="测试化验加工费">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="diaTit1">
          <div class="diaTit5">
            <div class="spans1">预算</div>
            <div>
              <el-input v-model="input" placeholder="6000"></el-input>
            </div>
          </div>

          <div class="diaTit5">
            <div class="spans1">已支付</div>
            <div>
              <el-input v-model="input" disabled placeholder="-"></el-input>
            </div>
          </div>
          <div class="diaTit5">
            <div class="spans1">余额</div>
            <div>
              <el-input v-model="input" placeholder="6000"></el-input>
            </div>
          </div>
        </div>
        
        <div class="diaTit1">
          <div class="spans1" style="position: relative;top:-17px">事由</div>
          <el-input
            type="textarea"
            :rows="3"
            resize="none"
            style="width: 70%;"
            placeholder="请输入内容"
            v-model="textarea">
          </el-input>
        </div>
        <hr style="margin: 40px;width: 90%;">
        <div class="diaTit1">
          <div class="spans1" style="position: relative;top:-20px">撤回意见</div>
          <el-input
            type="textarea"
            :rows="4"
            resize="none"
            style="width: 100%;"
            placeholder="请输入内容"
            v-model="textarea">
          </el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="init" class="diaBtn">审核通过</el-button>
          <el-button @click="init" class="diaBtn">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 立项撤回提交对话框结束 -->


  </div>
</template>

<script>
    export default {
      data() {
        return {
          dialogVisible:false,
          revocation:false,
          status:-1,
          input:'',
          value:'',
          textarea:'',  //立项审核事由
          options:[],
          options1:[],
          options2:[],
          options3:[],
          options4:[],
          tableData:[{
            projectName:'陆地游泳辅助器',
            projectPerson:'王多鱼',
            relevancy:'西虹市',
            budget:'200',
            useBudget:'2000',
            date:'2022年-11月-12日',
            tel:'16625153432',
            status:'已审核',
            dept:'中德制造'
          },
          {
            projectName:'北极运冰',
            projectPerson:'王多鱼',
            relevancy:'西虹市',
            budget:'500',
            useBudget:'20000',
            date:'2022年-11月-12日',
            tel:'16625153432',
            status:'已审核',
            dept:'中德制造'

          }
          ],
          pavalues:{
            value:'',
            value1:'',
            value2:'',
            value3:'',
          }
        }
      },
      methods:{
        edit(){

        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        apply(){
          this.$router.push('/makerfundApply')
        },
        init(){
          this.dialogVisible=false
        },
        Audit(){
          this.dialogVisible=true
        },
        details(){
          this.$router.push('/makerfundDetails')
        }
      }
    }
</script>

<style lang="less">
.makerfund{

  .el-dialog{
    border-radius: 5px;
    overflow: hidden;
  }
  // .el-input__inner{
  //     width: 300px;
  //   }
  .dialog-footer{
    width: 100%;
    display: flex;
    justify-content: center;
  }





  .dialog{
    .el-dialog__header{
      background: #32455b;
    }
    .el-dialog__title{
      color: #fff;
    }
    .diaBtn{     //dialog按钮
      font-size: 16px;
    }
    .el-dialog__body{
          padding:30px 0px 30px 50px ;
    }
    .diaTit{
      width: 100%;
      display: flex;
      font-size: 16px;
      // margin-right: 20px;
      justify-content: flex-start;
      
    }
    .diaTit1{
      display: flex;
      margin-top: 20px;
      font-size: 16px;
      width: 91%;
      .spans{
        font-size: 16px;
        color: #000;
        box-sizing: border-box;
        padding-right: 10px;
      }

    }
    
    .spans1{
      color: #000;
      min-width: 70px;
      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;
    }
    // .el-input__inner{
    //   width: 300px;
    // }
    .diaTit5{
      display: flex;
      margin-right: 15px;
      .el-input__inner{
        width: 100px;
      }
    }
  }
}
</style>