<template>
    <div class="app-container">
        demo 组件引用，接口调用
        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column align="center" label="ID" width="95">
                <template slot-scope="scope">
                    {{ scope.$index }}
                </template>
            </el-table-column>
            <el-table-column label="Title">
                <template slot-scope="scope">
                    {{ scope.row.title }}
                </template>
            </el-table-column>
            <el-table-column label="Author" width="180" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.author }}</span>
                </template>
            </el-table-column>
            <el-table-column label="Pageviews" width="110" align="center">
                <template slot-scope="scope">
                    {{ scope.row.pageviews }}
                </template>
            </el-table-column>
            <el-table-column class-name="status-col" label="Status" width="110" 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="Created at" width="250">
                <template slot-scope="scope">
                    <i class="el-icon-time" />
                    <span>{{ scope.row.timestamp | parseTime }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { getArticles } from "@/api/articles";
import { IArticleData } from "@/api/types";

@Component({
    name: "Table",
    filters: {
        statusFilter: (status: string) => {
            const statusMap: { [key: string]: string } = {
                published: "success",
                draft: "gray",
                deleted: "danger",
            };
            return statusMap[status];
        },
        parseTime: (timestamp: string) => {
            return new Date(timestamp).toISOString();
        },
    },
})
export default class extends Vue {
    private list: IArticleData[] = [];
    private listLoading = true;
    private listQuery = {
        page: 1,
        limit: 20,
    };

    created() {
        this.getList();
    }

    private async getList() {
        this.listLoading = true;
        const { data } = await getArticles(this.listQuery);
        this.list = data.items;
        // Just to simulate the time of the request
        setTimeout(() => {
            this.listLoading = false;
        }, 0.5 * 1000);
    }
}
</script>
