<style lang="scss">
    .apply{
       .filter{
            background: #fff;
            padding: 20px 20px 10px; 
            border:1px solid #EDEDED;
            border-radius:2px;
            margin-bottom: 10px;
            margin-top: 10px;
            .el-form-item{
                margin-bottom: 10px;
            }
            .el-input,.el-select{
                width: 150px;
            }
    
       }
       .el-divider--horizontal{
           margin: 10px 0 20px;
       }
       .divider{
        //    margin-bottom: 15px;
           background: #fff;
           padding: 10px;
       }
       thead{
           th{
               background: #eee;
           }
       }
    }
</style>
<template>
    <section class="apply">
        <p>报名信息  >  新办</p>
        <div class="filter">
            <el-form label-width="80px" :inline="true">
                <el-form-item label="类别">
                    <Subject @subChange='subChange'/>
                </el-form-item>
                <br>
                <!-- <el-divider></el-divider> -->
                <el-form-item label="姓名">
                        <el-input placeholder="姓名" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                        <el-input placeholder="联系电话" v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="报名时间">
                    <el-date-picker clearable
                    v-model="form.signup_time"
                    type="date"
                    placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="发票类型">
                    <el-select v-model="form.bill_type" placeholder="请选择" clearable>
                        <el-option  label="不需要发票"  :value="0"></el-option>
                        <el-option  label="个人发票"  :value="1"></el-option>
                        <el-option  label="公司发票"  :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="领证方式" clearable>
                    <el-select v-model="form.a" placeholder="请选择">
                        <el-option  label="邮寄"  :value="1"></el-option>
                        <el-option  label="自取"  :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="考试设置">
                    <el-select v-model="form.a" placeholder="请选择" clearable>
                        <el-option  label="已设置考试时间"  :value="1"></el-option>
                        <el-option  label="未设置考试时间"  :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="考试时间" >
                    <el-date-picker clearable
                    v-model="form.exam_time"
                    type="date"
                    placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="培训班级">
                    <el-select v-model="form.a" placeholder="请选择">
                        <el-option  label="不需要发票"  :value="0"></el-option>
                        <el-option  label="纸质发票"  :value="0"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="培训时间">
                    <el-date-picker clearable
                    v-model="form.train_time"
                    type="date"
                    placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="公司名称">
                        <el-input placeholder="公司名称" v-model="form.name"></el-input>
                </el-form-item> -->
                <el-form-item>
                       <el-button @click="list=[],getData()" type="primary" icon="el-icon-search">搜索</el-button>
                </el-form-item>
                <el-divider></el-divider>
            </el-form>
            <el-tabs v-model="order_status" @tab-click="tabClick">
                <el-tab-pane name="-3" label="全部"></el-tab-pane>
                <el-tab-pane name="0" label="待审核"></el-tab-pane>
                <el-tab-pane name="2" label="已支付待培训"></el-tab-pane>
                <el-tab-pane name="-2" label="审核未通过"></el-tab-pane>
                <el-tab-pane name="1" label="待付款"></el-tab-pane>
                <el-tab-pane name="-1" label="待上传资料"></el-tab-pane>
                <!-- <el-tab-pane name="7" label="已培训待考试"></el-tab-pane> -->
                <el-tab-pane name="3" label="考试完成"></el-tab-pane>
                <!-- <el-tab-pane name="9" label="已取消"></el-tab-pane> -->
            </el-tabs>
        </div>
        <div class="divider">
                <el-button size="small" type="success" >审核通过</el-button><el-button size="small" type="info" >审核不通过</el-button>
                <el-button size="small" type="primary" >已付款</el-button><el-button size="small" type="danger" >已培训</el-button>
                <el-button size="small" type="success" >考试完成</el-button><el-button size="small" type="primary" >设置培训时间</el-button>
                <el-button size="small" type="primary" >设置考试时间</el-button>
                <el-divider  direction="vertical"></el-divider>
                <el-button size="small" type="warning" >导出考勤表与申报考试表</el-button>
                <el-button size="small" type="warning" >导出学员申报资料</el-button>
        </div>

        <el-table
                class="table"
                :data="list"
                border 
                style="width: 100%">
                <el-table-column
                type="selection" fixed="left"
                width="55">
                </el-table-column>
                <el-table-column
                prop="name"
                label="姓名">
                </el-table-column>
                <el-table-column
                prop="phone"
                label="联系电话">
                </el-table-column>
                <el-table-column
                prop="order_status"
                label="状态">
                <template slot-scope="scope">
                    <el-tag v-if='scope.row.order_status == -2' type="info">审核未通过</el-tag>
                    <el-tag v-if='scope.row.order_status == -1' >待提交资料</el-tag>
                    <el-tag v-if='scope.row.order_status == 0' type="warning">待审核</el-tag>
                    <el-tag v-if='scope.row.order_status == 1' >已审核立即支付</el-tag>
                    <el-tag v-if='scope.row.order_status == 2' type="warning">学习中</el-tag>
                    <el-tag v-if='scope.row.order_status == 3' type="success">已完成</el-tag>
                    <!-- -2:审核未通过,-1:待提交资料，0：待审核，1：已审核立即支付，2：学习中，3：已完成 -->
                </template>
                </el-table-column>
                <el-table-column
                prop="remark"
                label="管理员备注">
                </el-table-column>
                <el-table-column
                prop="subject_item0"
                label="报名类型">
                </el-table-column>
                <el-table-column
                prop="subject_item1"
                label="作业类别">
                </el-table-column>
                <el-table-column
                prop="subject_item2"
                label="准操项目">
                </el-table-column>
                <el-table-column
                prop="train_type"
                label="培训类型">
                </el-table-column>
                <el-table-column
                prop="zip" width="230"
                label="操作">
                <template>
                    <el-button size="mini" type="success">查看</el-button>
                    <el-button size="mini" type="warning">编辑</el-button>
                    <el-button size="mini"  type="danger">删除</el-button>
                </template>
                </el-table-column>
        </el-table>
        <Page  ref="pageButton"  :total='total' @pageChange='gopage'/>
    </section>
</template>
<script>
import Page from '../../components/Page';
import Subject from '../../components/Subject';
// import { Base64 } from 'js-base64';
export default {
  components:{
        Page,Subject
    },
  data(){
    return{
      form:{train_type:'新办',subject_item:'',order_status:''},
      activeName:"1",
      total:1,
      list:[],
      order_status:'-3'
    }
  },
  methods:{
      gopage(){},
      getData(){
          var parm=this.form;
          if(this.order_status != '-3'){parm.order_status=this.order_status}
          console.log(parm)
          this.$api.getSignList(parm).then(res=>{
              this.list=res.data.data.list
              this.total=res.data.data.total
          })
      },
      subChange(data){
          this.form.subject_item=data.join('|')
      },
      tabClick(tab){
          this.form.order_status=tab.name
          this.list=[]
          this.getData()
      }
  },
  created(){
      this.getData()
  }
}
</script>
