<template>
<view class="page">
	<page-header></page-header>
    <view class="ant-layout content">
        <view class="ant-layout-header header">
            <div class="title">运行日志</div>
        </view>
        <view class="ant-layout-content container">
            <view class="log">
                <div class="log-item" v-for="(item, index) in log" :key="index" v-if="log.length">
                    <span class="date">{{ item.create_time }}</span>
                    <span class="info">
                        {{ item.name }} {{ item.action }}
                    </span>
                </div>
                <div class="log-item" style="justify-content: center;" v-else>
                    <text>暂无数据</text>
                </div>
            </view>
        </view>
        <view class="ant-layout-footer footer">
            <view class="pagenation">
                <uni-row>
                    <uni-col :span="8" style="text-align: left;">
                        <view class="ant-btn" @click="pre">上一页</view>
                    </uni-col>
                    <uni-col :span="8" style="line-height: 48px;">
                        第{{ page }}页/共 {{ totalPage }} 页
                    </uni-col>
                    <uni-col :span="8" style="text-align: right;">
                        <view class="ant-btn" @click="next">下一页</view>
                    </uni-col>
                </uni-row>
            </view>            
        </view>
    </view>
	<page-footer></page-footer>
</view>

</template>

<script>

import PageHeader from '@/components/PageHeader.vue'
import PageFooter from '@/components/PageFooter.vue'
import * as db from '@/db/sqlite.js'
export default {
	components: {
		PageFooter, PageHeader
	},
    data() {
        return {
            log: [
                // { id: 1, create_time: '2021-05-01 10:10:10', name: 'SN00394287 内镜取出' },
                // { id: 1, create_time: '2021-05-01 10:10:10', name: 'SN00394287 内镜取出' },
                // { id: 1, create_time: '2021-05-01 10:10:10', name: 'SN00394287 内镜取出' },
                // { id: 1, create_time: '2021-05-01 10:10:10', name: 'SN00394287 内镜取出' },
                // { id: 1, create_time: '2021-05-01 10:10:10', name: 'SN00394287 内镜取出' },
                // { id: 1, create_time: '2021-05-01 10:10:10', name: 'SN00394287 内镜取出' },
                // { id: 1, create_time: '2021-05-01 10:10:10', name: 'SN00394287 内镜取出' },
                // { id: 1, create_time: '2021-05-01 10:10:10', name: 'SN00394287 内镜取出' },
            ],
            page: 1,
            totalPage: 0
        }
    },
    onBackPress() {
        uni.navigateTo({ url: '/pages/index', animationType: 'fade-in' })
        return true;
    },
    mounted() {
        this.getLog()
    },
    methods: {
        getLog() {
            db.getDataList('log', this.page, 15, 'create_time', 'desc').then(res => { 
                // console.log(res);
                this.log = res.list
                this.totalPage = res.totalPage
            })
        },
        // 上一页
        pre() {
            if (this.page > 1) {
                this.page--
                this.getLog()
            } 
        },
        // 下一页
        next() {
            if (this.page < this.totalPage) {
                this.page++
                this.getLog()
            }
        },
    }
}
</script>

<style scoped>
.page{
	height: 100%;
	display: flex;
	flex-direction: column;

}
.content{
    color: #747A8D;
	flex: 1;
    height: 100%;
}
.content,
.header,
.footer{
    background: transparent;
}
.title{
    color: #747A8D;
    font-size: 26px;
}

.log{
    background: #2F3242;
    height: 100%;
    margin: 0 20px;
    border-radius: 10px;
    color: #747A8D;
    padding: 30px;
}
.log-item{
    line-height: 42px;
    font-size: 18px;
    font-weight: 400;
    text-align: left;
    display: flex;
}

.log-item .date{
    width: 200px;
}
.log-item .info{
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.footer{
    padding: 20px;
}
.pagenation{
    height: 50px;
    color: #747A8D;
    font-size: 16px;
    letter-spacing: 2px;
}
.ant-btn{
    width: 143px;
    height: 50px;
    border-radius: 50px;
    box-shadow: none;
    font-size: 24px;
    font-weight: 500;
    background: #2F3242;
    color: #fff;
    border-color: #2F3242;
    line-height: 40px;
}
</style>