<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="selectInp.filter" @change="getData" placeholder="我的项目">
          <el-option label="所有项目" value=""></el-option>
          <el-option
            v-for="item in filterSelects"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <div class="selectLabel">部门</div>
        <el-select v-model="selectInp.department" @change="getData" placeholder="请选择">
          <el-option label="所有部门" value=""></el-option>
          <el-option
            v-for="item in departmentSelect"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <div class="selectLabel">分类</div>
        <el-select v-model="selectInp.type" @change="getData" placeholder="请选择">
          <el-option label="所有分类" value=""></el-option>
          <el-option
            v-for="item in typeSelects"
            :key="item.value"
            :label="item.label"
            :value="item.label">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <div class="selectLabel">负责人</div>
        <el-select v-model="selectInp.leader" @change="getData" placeholder="请选择">
          <el-option label="所有负责人" value=""></el-option>
          <el-option
            v-for="(item,index) in leaderSelects"
            :key="index"
            :label="item.pro_leader"
            :value="item.pro_leader">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <div class="selectLabel">状态</div>
        <el-select v-model="selectInp.status" @change="getData" placeholder="请选择">
          <el-option label="所有状态" value=""></el-option>
          <el-option
            v-for="item in statusSelects"
            :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="title"
          label="项目名称"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="pro_leader"
          align="center"
          label="负责人"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="type"
          label="项目类型"
          >
        </el-table-column>
        <el-table-column
          prop="fund"
          align="center"
          label="申请经费(元)"
          >
        </el-table-column>
        <el-table-column
          prop="usedFund"
          align="center"
          label="实际使用(元)"
          >
        </el-table-column>
        <el-table-column
          prop="name"
          width="150"
          align="center"
          label="所在部门"
          >
        </el-table-column>
        <el-table-column
          prop="status"
          align="center"
          label="状态"
          >
          <template #default="scope">
            <div>
              <span v-show="scope.row.state==0">未审核</span>
              <span v-show="scope.row.state==1">未报销</span>
              <span v-show="scope.row.state==2">已报销</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="time"
          width="160"
          align="center"
          label="申请时间"
          >
        </el-table-column>
        <el-table-column
          prop="operation"
          width="370"
          align="center"
          label="操作"
          >
          <template #default="scope">
              <div class="operations">
                <el-button type="primary" class="bt1" size="mini" @click="details(scope.row.fid)">查看详情</el-button>

                <el-button type="primary" v-show="scope.row.state==0" style="width: 74px;" class="bt1" size="mini" @click="Audit(scope.row)">审核</el-button>
                <el-button type="primary" disabled v-show="scope.row.state==1" style="background-color: #c8c9cc;border-color: #c8c9cc;cursor: no-drop;" class="bt1" size="mini">已审核</el-button>
                <el-button type="primary" disabled v-show="scope.row.state==2" style="background-color: #c8c9cc;border-color: #c8c9cc;cursor: no-drop;" class="bt1" size="mini">已审核</el-button>

                <el-button type="primary" class="bt1" size="mini" @click="edit(scope.row.id,scope.row.status)">申请表</el-button>

                <el-button disabled v-show="scope.row.state==0"  style="width: 74px;background-color: #c8c9cc;border-color: #c8c9cc;cursor: no-drop;" @click="endDialogShow(scope.row.fid)" type="primary" class="bt1" size="mini">完结</el-button>
                <el-button  v-show="scope.row.state==1"  style="width: 74px;" @click="endDialogShow(scope.row.fid)" type="primary" class="bt1" size="mini">完结</el-button>
                <el-button  v-show="scope.row.state==2" disabled style="width: 74px;background-color: #c8c9cc;border-color: #c8c9cc;cursor: no-drop;" @click="endDialogShow(scope.row.fid)" type="primary" class="bt1" size="mini">已完结</el-button>

              </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!-- 表格结束 -->


    <!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="table.currentPage"
      :page-size="table.packageSize"
      layout=" prev, pager, next"
      background
      class="paginations"
      :total="table.total">
    </el-pagination>
  <!-- 分页结束 -->
    <!-- 审核对话框开始 -->
      <el-dialog
        title="立项审核"
        :visible.sync="dialogVisible"
        width="750px"
        class="dialog"
        :before-close="init">
        <div class="diaTit1" style="margin-top: 0;">
            <div class="spans">项目名称:</div><div style="margin-right: 30px;color: #adadad;">{{ ProjectFundData.title }}</div>
            <div class="spans">项目负责人:</div><div style="color:#adadad">{{ ProjectFundData.pro_leader }}</div>
        </div>
        <div class="addDialogLogo">LOGO</div>
        <div class="diaTit1">
          <div class="spans1">所在部门</div>
          <div>
            <el-input v-model="ProjectFundData.name" disabled placeholder="信通学院"></el-input>
          </div>
        </div>

        <div class="diaTit1">
          <div class="spans1">使用经费</div>
          <div>
            <el-input v-model="ProjectFundData.usedFund" disabled></el-input>
          </div>
        </div>

        <div class="diaTit1">
          <div class="spans1">联系电话</div>
          <div>
            <el-input v-model="ProjectFundData.phone" disabled></el-input>
          </div>
        </div>

        <div class="diaTit1">
          <div class="spans1">项目类型</div>
          <div>
            <el-select v-model="ProjectFundData.type" 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="input" 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="ProjectFundData.fund" placeholder="6000"></el-input>
            </div>
          </div>

          <div class="diaTit5">
            <div class="spans1">已支付</div>
            <div>
              <el-input v-model="ProjectFundData.usedFund" disabled placeholder="-"></el-input>
            </div>
          </div>
          <div class="diaTit5">
            <div class="spans1">余额</div>
            <div>
              <el-input :value="ProjectFundData.fund - ProjectFundData.usedFund" placeholder="6000"></el-input>
            </div>
          </div>
        </div>
        
        <div class="diaTit1">
          <div class="spans1" style="position: relative;top:-20px">事由</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="auditPass" class="AllDialogBtn">审核通过</el-button>
          <el-button @click="init" class="AllDialogBtn">取消</el-button>
        </div>
      </el-dialog>
    <!-- 审核对话框结束 -->


    <!-- 立项撤回提交对话框开始 -->
    <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="AllDialogBtn">审核通过</el-button>
          <el-button @click="init" class="AllDialogBtn">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 立项撤回提交对话框结束 -->
    <!-- 完结对话框开始 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="600px"
      class="endDialog">
      <div class="addDialogLogo">LOGO</div>
      <span class="deleteContent">确定完结?</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmEnd" class="AllDialogBtn">确认完结</el-button>
        <el-button @click="dialogVisible1=false" class="AllDialogBtn">取消</el-button>
      </span>
    </el-dialog>
<!-- 完结对话框结束-->

  </div>
</template>

<script>
    export default {
      data() {
        return {
          ProjectFundData:{},
          projectFundState:'',
          dialogVisible1:false,
          dialogVisible:false,         //立即审核
          revocation:false,            //撤回
          textarea:'',  //立项审核事由
          input:'',
          value:'',
          options:[],
          status:'',
          table:{   // 分页数据
            total:0,
            packageSize:8,
            currentPage:1
          },   
          filterSelects:[],        
          departmentSelect:[],
          typeSelects:[
            {
              value:0,
              label:'个人创客'
            },
            {
              value:1,
              label:'活动创客'
            }
          ],
          leaderSelects:[],
          statusSelects:[
            {
              value:0,
              label:'未审核'
            },
            {
              value:1,
              label:'已审核'
            },
          ],
          tableData:[         //列表
          ],
          selectInp:{    //搜索下拉框的值
            filter:'',
            department:'',
            type:'',
            leader:'',
            status:''
          }
        }
      },
      methods:{
        Audit(val){          //显示审核对话框
          console.log(val);
          this.ProjectFundData=val;
          this.dialogVisible=true;
        },
        auditPass(){     //审核通过
          // console.log(111);
          let param={
            uid:this.$store.state.userInfo.userid,
            fid:this.ProjectFundData.fid,
            status:1
          }
          this.ajax
              .post(this.$store.state.api+"/UpdateMakerFundState",param)
              .then(res=>{
                  this.dialogVisible=false;
                  if (res.data) {
                      this.$message.success('审核成功')
                      this.getData()
                    }else{
                      this.$message.error('审核失败')
                    }
              },err=>{
                console.log(err);
              })
        },
        endDialogShow(val){      //完结对话框显示
            this.dialogVisible1=true
            this.projectFundState=val
            console.log(val);
        },
        confirmEnd(){        //确定完结
          let param={
            uid:this.$store.state.userInfo.userid,
            fid:this.projectFundState,
            status:2
          }
          console.log(param);
          this.ajax
              .post(this.$store.state.api+"/UpdateMakerFundState",param)
              .then(res=>{
                console.log(res);
                  this.dialogVisible1=false
                  if (res.data) {
                      this.$message.success('完结成功')
                      this.getData()
                    }else{
                      this.$message.error('完结失败')
                    }
              },err=>{
                console.log(err);
              })
        },
       
        handleCurrentChange(val) {   //当页数发生改变的时候调用获取列表数据请求
          // console.log(`当前页: ${val}`);
          this.table.currentPage=val
          this.getData()
        },
        getData(){
            let param={
              uid:this.$store.state.userInfo.userid,
              filter:this.selectInp.filter,
              department:this.selectInp.department,
              type:this.selectInp.type,
              leader:this.selectInp.leader,
              status:this.selectInp.status,
              page:this.table.currentPage,
              lim:this.table.packageSize
            }
            this.ajax
                .get(this.$store.state.api+'/SelectMakerFund',param)
                .then(res=>{
                  let data=res.data;
                  console.log(data);
                  this.tableData=data[0];
                  this.filterSelects=data[1];
                  this.departmentSelect=data[2];
                  this.leaderSelects=data[3];
                  console.log(data[4][0]);
                  this.table.total=data[4][0].total
                },err=>{
                  console.log(err);
                })
        },
        edit(){

        },
        handleSelectionChange(val) {     //批量选择
          this.multipleSelection = val;
        },
        apply(){              //创客资金申请跳转界面
          this.$router.push('/makerfundApply')
        },
        init(){         
          this.dialogVisible=false
        },
        details(Id){       //跳转详情页面
          this.$router.push(`/makerfundDetails?Id=${Id}`)
        }
      },
      mounted(){
        this.getData();
      }
    }
</script>

<style lang="less">
.makerfund{     
  .endDialog{    //提交对话框
      font-size: 18px;
      .el-dialog{
        border-radius: 5px;
        overflow: hidden;
      }
      .deleteContent{
        // margin: 30px 0;
        font-size: 22px;
        color: #000;
      }
      .el-dialog__body{
          display: flex;
          justify-content: center;
        }
      .addDialogLogo{
        width: 60px;
        height: 30px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        line-height: 30px;
        background: #f2f2f2;
        position: absolute;
        left: 20px; top: 15px; 
      }
      .el-dialog__header{
      background: #32455b;
      }
      .el-dialog__title{
        color:#fff;
        display: flex;
        justify-content: center;
        font-size: 18px;
        position: relative;
        top: -2px;
      }
      .addDialogMid{
        box-sizing: border-box;
        padding:0 60px 0 10px;
        .addDialogTit{
          display: flex;
          span{
            width: 80px;
            font-size: 16px;
            line-height: 40px;
            text-align: left;
            
          }
        }
        .addDialogTit1{
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;
        }
        .addDialogTit2{
          margin-top: 10px;
          font-size: 16px;
          color: #000;
          text-indent: 2em;
          text-align: left;
          line-height: 1.7em;
        }
        .addDialogCon{
          margin-top: 20px;
        }
      }
    }
  .el-dialog{
    border-radius: 5px;
    overflow: hidden;
  }

  .dialog-footer{
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .dialog{
    .el-dialog__header{
      background: #32455b;

    }
    .addDialogLogo{
        width: 60px;
        height: 30px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        line-height: 30px;
        background: #f2f2f2;
        position: absolute;
        left: 20px; top: 15px; 
      }
    .el-dialog__title{
        color:#fff;
        display: flex;
        justify-content: center;
        font-size: 18px;
        position: relative;
        top: -2px;
    }
    .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>