<template>
  <el-dialog
    :title="dialogObj.title"
    :visible.sync="dialogObj.show"
  >
      <el-table
          :data="classList" 
          style="width: 100%">
           <el-table-column
        label="购买人"
        className="f-c"
        width="150">
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.avatar"/> {{scope.row.nickname}}<br>(ID:{{scope.row.user_id}})
        </template>
      </el-table-column>
          <el-table-column
            prop="out_trade_no"
            label="交易订单号"
          >
          </el-table-column>
           <el-table-column
            prop="goods_name"
            label="商品名字"
          >
          </el-table-column>
          <el-table-column
            prop="money"
            label="金额(元)" 
          >
          </el-table-column>
           <el-table-column
            prop="pay_at"
            label="支付时间"
          >
          </el-table-column>
        </el-table>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
  </el-dialog>
</template>

<script>
    import {getTeacherClassApi} from "../../service/api";

  import page from '../framework/page'

  export default {
    props:[
      'dialogObj'
    ],
    data(){
      return{
         nowPage: 1,
        total: 0,
        limit: 10,
        classList:[],
      }
    },
    components:{
      page
    },
    methods:{
       onPageChange(val){
        this.nowPage = val;
        this.classListOption();
      },
      onSizeChange(val){
        this.limit = val;
        this.nowPage = 1;
        this.classListOption();
      },
     classListOption(){
       if(this.dialogObj.timeValue[0] == undefined){
          this.dialogObj.timeValue[0]=""
       }
        if(this.dialogObj.timeValue[1] == undefined){
          this.dialogObj.timeValue[1]=""
       }
         let json ={
           page:this.nowPage,
           limit:this.limit,
           start_at:this.dialogObj.timeValue[0],
           end_at:this.dialogObj.timeValue[1],
         }  
         getTeacherClassApi(json,this.dialogObj.teacher_id).then(res=>{
                    this.classList=res.list
                    this.total=res.total;
         })
     },

    },
    watch:{
      'dialogObj.show'(value){
        if(value){
        this.classListOption()
        }
      }
    }
  }
</script>
<style scoped>
.avatar{
  width: 50px;
  min-width: 50px;
  height: 50px;
  margin-right: 5px;
  border-radius: 50%;
}
.order {
  padding: 20px 0;
}
</style>
<style>
  .f-c > .cell {
    display: flex !important;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }
</style>