<template>
  <div class="m-right-block fr mh576" style="position: relative;">
    <div class="right-block-bd">
      <div class="mb10 tc mt20">
        <span class="p-ico2 worm-ico-o"></span>
        注：未付款的订单设置3小时时限,3小时过后未付的订单就不再显示。
      </div>

      <div  class="ng-scope">

        <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
          <el-table-column label="培训内容" >
            <template slot-scope="{row, $index}">
              <span>{{row.name}}</span>
            </template>
          </el-table-column>

          <el-table-column label="证书类型" >
            <template slot-scope="{row, $index}">
              <span>{{row.type}}-{{row.nd}}</span>
            </template>
          </el-table-column>

          <el-table-column label="学时">
            <template slot-scope="{row, $index}">
              <span>{{row.xs/10}}</span>
            </template>
          </el-table-column>

          <el-table-column label="金额(元)">
            <template slot-scope="{row}">
              <span>{{ row.totalFee|money }} </span>
            </template>
          </el-table-column>

          <el-table-column label="实付款(元)">
            <template slot-scope="{row}">
              <span>{{ row.payFee|money }}</span>
            </template>
          </el-table-column>

          <el-table-column label="订单状态">
            <template slot-scope="{row}">
              <span>{{ row| payStatus }}</span>
            </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";
  import {str2time} from '@/utils/date.js'


  export default {
    name: "Index",
    data() {
      return {
        page: 1,
        size: 12,
        total: 1,
        list: [],
        listLoading: false
      };
    },
    beforeMount() {
      this.getData()
    },
    filters:{
      money(val){
        return '￥'+ (val/100);
      },
      payStatus(item){
        if(item.status == 2){
          return '支付完成';
        }
        let nowsec= Date.now()/1000
        if( nowsec - item.create_time > 300 ){
          return "支付超时"
        }
        return "支付中"
      }
    },
    methods: {
      getData() {
        let param = {from: (this.page - 1) * this.size,size:this.size}
        httpServer('course.getPayCourseList', param).then(({
          data,
          code
        }) => {
          this.list = data.list || 0;
          this.total = data.total || 0;
        })
      },
      handleCurrentChange: function(page) {
        this.page = page
        this.getData()
      }
    }
  }
</script>

<style>
</style>
