<template>
  <div class="not_buy">
    <div class="head clear-both">
      <el-button plain type="success" style="float: right;margin-bottom:20px;" v-if="!$store.state.readonly" @click="entranceObj.show=true">无需登录入口</el-button>
    </div>
    <el-table :data="configList" style="width: 100%">
      <el-table-column label="用户ID" sortable prop="scope.row.user_id"  className="userInfo">
         <template slot-scope="scope">
           <img class="avatar" :src="scope.row.avatar">
          {{scope.row.nickname}}(ID:{{scope.row.user_id}})

        </template>
      </el-table-column>
      <el-table-column prop="class_name" label="班级名称">
      </el-table-column>
      <el-table-column label="期数标题" prop="periods_name">
      </el-table-column>
      <el-table-column label="商品名称" prop="goods_name">
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" sortable>
      </el-table-column>
      <el-table-column prop="updated_at" label="结束时间" sortable>
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total" @pageChange="onPageChange" @sizeChange="onSizeChange" />
    <entrance :entranceObj="entranceObj" />
  </div>
</template>

<script>
import entrance from "./entrance";
import { getClassConfigApi } from "../../service/api";
import page from "../framework/page";

export default {
  name: "notBuyClass",
  data() {
    return {
      nowPage: 1,
      total: 0,
      limit: 10,
      configList: [],
      entranceObj: {
        title: "无需登录入口",
        show: false
      }
    };
  },
  components: {
    entrance,
    page
  },
  mounted() {
    this.getList();
  },

  methods: {
    onPageChange(val) {
      this.nowPage = val;
      this.getList();
    },
    onSizeChange(val) {
      this.nowPage = 1;
      this.limit = val;
      this.getList();
    },
    getList() {
      let json = {
        limit: this.limit,
        page: this.nowPage
      };
      getClassConfigApi(json).then(res => {
        console.log(res);
         this.total = res.total;
        this.configList=res.list;
      });
    }
  }
};
</script>

<style scoped lang="less">
.not_buy {
  .head {
    margin-bottom: 10px;
  }
  width: 100%;
  padding: 20px 0;
  .page-div {
    text-align: center;
    padding-top: 20px;
  }
}
 .avatar {
   width: 50px;
   min-width:50px !important;
   height: 50px;
    border-radius: 50%;
   line-height:1;
  }
</style>
<style>
  .userInfo >div{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
  }
</style>


