<template>
  <div class="m-right-block fr mh576" style="position: relative;">
    <div class="right-block-bd mt20">

      <div  class="ng-scope">
        <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
          <el-table-column label="序号" align="center" prop="id" >
          </el-table-column>

          <el-table-column label="考期" align="center" prop="planName">
          </el-table-column>


          <el-table-column label="岗位名称" align="center" prop="courseName">
          </el-table-column>

          <el-table-column label="费用" align="center" prop="fee">
            <template slot-scope="{row}">
              <span>{{row.fee/100}}元</span>
            </template>
          </el-table-column>

          <el-table-column label="状态" align="center" prop="isPass">
            <template slot-scope="{row}">
              <span v-if="row.status==4">考试完成</span>
              <span v-else-if="row.status==3">同意取消</span>
              <span v-else-if="row.status==2">取消报名</span>
              <span v-else-if="row.status==1">报名成功</span>
              <span v-else-if="row.status==5">拒绝:{{row.marks}}</span>
              <span v-else>等待审核中</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="{row}">
              <el-button v-if="row.status==1" type="primary" @click="unjoinPlan(row)">取消</el-button>
              <el-button v-else-if="row.status==2" type="text">审核中</el-button>
              <el-button v-else-if="row.status==3" type="text">取消成功</el-button>
              <el-button v-else type="text" >不可操作</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="page"
           :page-size="size"
           layout="total, prev,pager, next"
           :total="total">
        </el-pagination>

      </div>
    </div>
  </div>
</template>

<script>
  import {httpServer} from "@/components/httpServer/httpServer.js";
  export default {
    name: "Index",
    data() {
      return {
        page:1,
        size:10,
        total: 0,
        list: [],
        listLoading: false
      };
    },
    beforeMount() {
      this.getData()
    },
    methods: {
      getData() {
        this.listLoading = true
        let {page, size } = this
        let from = page * size - size
        httpServer('Train.GetUserOrderList', {from,size}).then( res=>{
            if( res.code == 200){
              this.list = res.data.list||[];
              this.total = res.data.total;
            }
            this.listLoading = false
        })
      },
      unjoinPlan( row ){
        let param = {logId: row.id}
        httpServer('Train.UnJoinTrainPlan', param).then( res=>{
            if( res.code == 200){
              this.$message.successMsg("取消报名申请中，请以最终审核结果为准", 3)
              row.status = 2
            }
        })

      },
      handleCurrentChange: function(page) {
        this.page = page
        this.getData()
      }
    }
  }
</script>

<style>
</style>
