<template>
    <div class="app-container">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >

        <el-table-column align="center" label="用户id">
          <template slot-scope="scope">{{ scope.$index }}</template>
        </el-table-column>
  
        <el-table-column label="openid">
          <template slot-scope="scope">{{ scope.row.openid }}</template>

        </el-table-column>

  
        <el-table-column label="昵称" width="110" align="center">

          <template slot-scope="scope">

            <span>{{ scope.row.username }}</span>

          </template>
        </el-table-column>

  
        <el-table-column label="头像" width="110" align="center">
          <template slot-scope="scope">{{ scope.row.avatar }}</template>
        </el-table-column>
  
        <el-table-column class-name="status-col" label="状态" align="center">

          <template slot-scope="scope">

            <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>

          </template>
        </el-table-column>

  
        <el-table-column align="center" prop="created_at" label="注册时间">

          <template slot-scope="scope">

            <i class="el-icon-time" />
            <span>{{ scope.row.create_at }}</span>

          </template>
        </el-table-column>

        <el-table-column align="center" prop="created_at" label="成交记录">

          <template slot-scope="scope">

            <i class="el-icon-time" />
            <span>{{ scope.row.pageviews }}</span>

          </template>
        </el-table-column>

        <el-table-column align="center" prop="created_at" label="引流图">

          <template slot-scope="scope">

            <span>
              <el-button type="primary">子用户{{scope.row.pageviews}}</el-button>
            </span>

          </template>
        </el-table-column>
      </el-table>

      <el-pagination background layout="prev, pager, next" :total="100"></el-pagination>

    </div>
  </template>
  
  <script>

  import { getList } from "@/api/table";

  
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {

          published: "success",
          draft: "gray",
          deleted: "danger"
        };
        return statusMap[status];

      }
    },
    data() {
      return {
        list: null,
        listLoading: true

      };

    },
    created() {

      this.fetchData();

    },
    methods: {
      fetchData() {

        this.listLoading = true;

        getList().then(response => {

          console.log("----getList---", response);

          this.list = response.items;

          this.listLoading = false;
        });

      }
    }

  };

  </script>