<template>
	<view class="content">
		<view class="logs" v-if="list.length > 0">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="item-flex">
					<label>所属机构</label>
					<view class="value nowrap">{{item.item || '-'}}</view>
				</view>
				<view class="item-flex">
					<label>操作老师</label>
					<view class="value nowrap"><text>{{item.operate.type}}</text>{{item.operate.name || '-'}}</view>
				</view>
				<view class="item-flex">
					<label>操作时间</label>
					<view class="value nowrap">{{item.created_at || '-'}}</view>
				</view>
				<view class="item-flex">
					<label>备注信息</label>
					<view class="value">{{item.description || '-'}}</view>
				</view>
			</view>
			<!-- 分页 -->
			<u-loadmore v-if="pagesShow" :status="status" />
		</view>
		<view class="vertical order-null" v-else>
			<u-empty
				mode="order"
				icon="http://cdn.uviewui.com/uview/empty/order.png"
				text="暂无订单操作记录"
			>
			</u-empty>
		</view>
	</view>
</template>

<script>
	import { orderLog } from '@/apis/interfaces/order.js'
	export default {
		data() {
			return {
				list		: [],
				// 分页
				page		: {
					current	: 1,
					has_more: false,
				},
				pagesShow	: false,
				status   	: ''
			};
		},
		created() {
			this.getList()
		},
		methods: {
			getList(){
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				orderLog(this.$Route.query.orderId, this.page.current ).then(res => {
					let { data, page } = res;
					let atList   	= page.current == 1 ? [] : this.list
					this.list 		= atList.concat(data)
					this.page  		= page
					this.pagesShow 	= false
					uni.hideLoading()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		},
		onReachBottom() {
			this.pagesShow = true;
			if(this.page.has_more){
				this.status    = 'loading';
				this.page.current++
				this.getList()
				return
			}
			this.status    = 'nomore';
		}
	}
</script>

<style lang="scss">
	// 空
	.order-null{
		height: 100vh;
		background: white;
		padding-bottom: 20vh;
		box-sizing: border-box;
	}
	// 列表
	.logs{
		padding: 10rpx;
		.item{
			background: white;
			border-radius: 20rpx;
			padding: 30rpx;
			margin: 20rpx;
			.item-flex{
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				padding: 10rpx 0;
				label{
					width: 200rpx;
					color: gray;
					line-height: 40rpx;
				}
				.value{
					width: calc(100% - 200rpx);
					text-align: right;
					line-height: 40rpx;
					word-wrap: break-word;
					text{
						background: $main-color;
						color: white;
						margin-right: 20rpx;
						padding: 0 10rpx;
						border-radius: 10rpx;
						font-size: 26rpx;
					}
				}
			}
		}
	}
	// 
</style>
