<template>
  <div class="user">
    <el-table
      :data="userList"
      style="width: 100%">
      <el-table-column
        prop="out_trade_no"
        label="订单号">
      </el-table-column>
      <el-table-column
        prop="user_nickname"
        label="用户名">
      </el-table-column>
      <el-table-column
        label="头像">
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.user_avatar">
        </template>
      </el-table-column>
      <el-table-column
        prop="goods_name"
        label="商品名称">
      </el-table-column>
      <el-table-column
        prop="periods_id"
        label="期数ID">
      </el-table-column>
      <el-table-column
        label="实付金额"
      >
        <template slot-scope="scope">
          {{scope.row.money|moneytFilter}}
        </template>
      </el-table-column>
      <el-table-column
        label="推广人" width="150">
        <template slot-scope="scope">
          类型:{{scope.row.invite_type | inviteType}}<br>
          {{scope.row.invite_id ? `ID:${scope.row.invite_id}` : ''}}
        </template>
      </el-table-column>
      <el-table-column
        label="购买方式">
        <template slot-scope="scope">
          {{scope.row.buy_type === 1 ? '团购' : '单买'}}
        </template>
      </el-table-column>
      <el-table-column
        label="是否是团长">
        <template slot-scope="scope">
          {{scope.row.is_captain === 1 ? '是' : '否'}}
        </template>
      </el-table-column>
      <el-table-column
        label="付款状态">
        <template slot-scope="scope">
          {{scope.row.status|status}}
        </template>
      </el-table-column>
      <el-table-column
        prop="pay_at"
        label="支付时间">
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间">
      </el-table-column>
    </el-table>
    <page :total="total" v-model="nowPage"/>
  </div>
</template>

<script>
  import {getOrderListApi} from "../../service/api";
  import page from '../framework/page'
  import {INVITETYPE,ORDERSTATUS,BUYTYPE} from "../../util/wordbook";
  export default {
    name: "index",
    data(){
      return {
        userList:[],
        total:0,
        nowPage:1,
        id: ''
      }
    },
    components:{
      page
    },
    mounted(){
      this.id = this.$route.params.id;
      this.getUser()
    },
    methods:{
      getUser(){
        let json = {
            user_id: this.id
        }
        getOrderListApi(json).then(res=>{
          this.userList = res.list;
          this.total = res.total
        })
      }
    },
    filters:{
      payMentFilter(val){
        return val=='1'?'已付款':'未付款'
      },
      courseTypeFilter(val){
        return val.type=='1'?`正式课(${val.duration}个月)`:`试听课(${val.duration}天)`
      },
      inviteType(value){
        return INVITETYPE[value]
      },
      status(value){
        return ORDERSTATUS[value]
      },
      buyType(value){
        return BUYTYPE[value]
      },
      moneytFilter(val){
        return val = val / 100 + '元'
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .avatar {
    width: 50px;
  }
  .user{
    height: 100%;
    overflow: auto;
    padding: 20px;
    .btn-content{
      text-align: center;
    }
  }
</style>