<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.id}}</span>
            </template>
          </el-table-column>
          <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}}</span>
            </template>
          </el-table-column>

          <el-table-column label="年度">
            <template slot-scope="{row}">
              <span>{{row.nd}}</span>
            </template>
          </el-table-column>

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


          <el-table-column label="订单状态" min-width="120">
            <template slot-scope="{row}">
              <span v-if="row.isPay==1" style="color: green;">支付完成</span>
              <span v-if="row.isPay==0" >待审核</span>
              <span v-if="row.isPay==2" style="color: red;" @click="rebuyInfo(row)">{{row.marks||'拒绝'}}
                <el-button  type="text">修改</el-button>
              </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>

        <el-dialog title="申请开通课程"  :visible.sync="buyCourseDialog" :append-to-body="true"
        width="800px" top="20px" align="center">
          <IBuyCourse :courseId="courseId" @finish="reload"></IBuyCourse>
        </el-dialog>

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

<script>
  import {httpServer } from "@/components/httpServer/httpServer.js";
  import {str2time} from '@/utils/date.js'

  import IBuyCourse from '../components/pay/IBuyCourse.vue'


  export default {
    name: "Index",
    components:{IBuyCourse},
    data() {
      return {
        page: 1,
        size: 12,
        total: 1,
        courseId:0,
        list: [],
        buyCourseDialog: false,
        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: {
      rebuyInfo(row){
        this.courseId = row.courseId||0;
        this.buyCourseDialog = true;
      },
      reload(){
        this.buyCourseDialog = false;
        this.getData();
      },
      getData() {
        let param = {from: (this.page - 1) * this.size,size:this.size}
        httpServer('course.GetSmPayCourseList', 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>
