<!--suppress ALL -->
<template>
    <div class="">
        <div class="filters">
            <el-button type="primary" @click="create()">创建</el-button>
            <div class="num"> 共{{totalNumber}}标签</div>
        </div>

        <el-table :data="rows"
                  ref="table"
                  height="600"
                  border
                  style="width: 100%"
                  element-loading-text="拼命加载中"
                  stripe
                  v-loading="loading">
            <el-table-column
                    label="序号"
                    type="index"
                    width="70"
                    align="center">
            </el-table-column>
            #foreach ($column in $columns)
                <el-table-column
                        prop="$column.attrname"
                        label="$column.comments"
                        align="center">
                </el-table-column>
            #end
            <el-table-column label="操作 " width="250px" fixed="right" align="center">
                <template slot-scope="scope">
                    <el-button size="small" @click="editRow(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="deleteRow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-wrapper" v-show="!loading">
            <el-pagination layout="sizes, prev, pager, next" :page-size="pageSize" :total="totalNumber"
                           :current-page="currentPage" @current-change="pageChange" @size-change="sizeChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ZhaoPin',
        created() {
            this.getRows();
        },
        data() {
            return {
                loading: false,
                rows: [],
                totalNumber: 0,
                totalPage: 10,
                currentPage: 1,
                pageSize: 20,
            }
        },
        filters: {
            formatDate(date) {
                date = new Date(date);
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                if (month < 10) {
                    month = '0' + month;
                }
                return year + '-' + month + '-' + day;
            }
        },
        methods: {
            getRows() {

                this.丨http.get(this.丨store.state.httpApi + '${moduleName}/${pathName}/page?currentPage=' + this.currentPage + '&pageNumber=' + this.pageSize).then(response => {

                    if (response.status == 200) {
                        this.rows = response.data.data.pp;
                        this.totalNumber = response.data.data.page.totalNumber;
                        this.丨message.success('数据加载成功');
                    } else {
                        this.丨message.success('服务器连接异常');
                    }
                }, response => {
                    this.丨message.success('服务器连接异常');
                })
            },

            deleteRow(data) {
                this.丨confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var httpApi = this.丨store.state.httpApi;
                    this.丨http.post(this.丨store.state.httpApi + '${moduleName}/${pathName}/del?id=' + data.id).then(response => {
                        if (response.status == 200) {
                            console.log(response)
                            if (response.data.success) {
                                this.丨message.success('删除成功');
                                this.getRows();
                            } else {
                                this.丨message.success('删除失败');
                            }
                        } else {
                            this.丨message.success('服务器连接异常');
                        }
                    }, response => {
                        this.丨message.success('服务器连接异常');
                    })
                }).catch(() => {
                    this.丨message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            editRow(data) {
                this.丨router.push({path: '/home/${pathName}s', query: {id: data.id}})
            },
            pageChange: function (page) {
                this.currentPage = page;
                this.getRows();
            },
            sizeChange: function (size) {
                this.pageSize = size;
                this.getRows();
            },
            create() {
                this.丨router.push({path: '/home/${pathName}s'})
            },
        },
    }
</script>
