<template>
	<view class="content">
		<block v-if="logs.length <= 0">
			<view class="null-pages">
				<u-empty
					mode="history"
					icon="http://cdn.uviewui.com/uview/empty/history.png"
					text="暂无合同签约记录"
				>
				</u-empty>
			</view>
		</block>
		<block v-else>
			<view class="log-blcok" v-for="(item, index) in logs" :key="index" @click="onInfo(item.business_order_id)">
				<view class="flex">
					<label>订单编号：</label>
					<view class="val">{{item.order_no}}</view>
				</view>
				<view class="flex">
					<label>业务类型：</label>
					<view class="val">
						<text v-for="(titem, tindex) in item.item_type" :key="tindex">{{titem.title}}</text>
					</view>
				</view>
				<view class="flex">
					<label>签约时间：</label>
					<view class="val">{{item.created_at}}</view>
				</view>
			</view>
			<view class="pages-loding" v-if="isLoding">
				<u-loadmore :status="status" loadingIcon="semicircle" />
			</view>
		</block>
	</view>
</template>

<script>
	import { getSignLogs, getFlows } from '@/apis/interfaces/user.js'
	export default {
		data() {
			return {
				status	: 'loading',
				isLoding: false,
				logs	: [],
				page	: { current	: 0 }
			};
		},
		created() {
			this.getLog()
		},
		methods: {
			getLog(){
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				getSignLogs({
					page: this.page.current
				}).then(res => {
					let { data, page }  = res;
					let atArr		    = page.current == 1 ? [] : this.logs
					this.logs 			= atArr.concat(data)
					this.page 			= page
					this.status 		= !page.has_more ? 'nomore': 'loading'
					this.isLoding		= !page.has_more
					uni.hideLoading()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			onInfo(id){
				this.$Router.push({
					name	: 'SignContract',
					params	: { id }
				})
			}
		},
		onReachBottom(){
			this.isLoding = true
			if(this.page.has_more){
				this.page.current++
				this.getLog()
			}
		}
	}
</script>

<style lang="scss">
	.content{ padding: 30rpx 30rpx 10rpx; box-sizing: border-box; }
	
	// 订单列表
	.log-blcok{ 
		background: white;
		border-radius: $radius;
		padding: $padding;
		position: relative;
		margin-bottom: 20rpx;
		// .log-icon{ position: absolute; right: $margin; top: 50%; margin-top: -14rpx; }
		.flex{
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			line-height: 60rpx;
			label{ color: gray; }
		}
	}
	
	// 分页加载
	.pages-loding{ padding: 10rpx; }
	
	// 记录为空
	.null-pages{ display: flex; align-items: center;  justify-content: space-around; height: 80vh;}
</style>
