<template>
	<view class="content">
		<view class="container">
			<headers :titles="titles"><uni-icons type="arrow-left" color="#fff" size="22px"></uni-icons></headers>

			<view class="list-box" v-for="(item,index) in dataList" :key="index">
				<view class="top-bs">
					<image src="../../static/imgs/tcsyl.png" mode=""></image>
					<view class="h-size">
						使用进度:{{dealNum(item.packageLimit-item.lastLimit)}}/{{dealNum(item.packageLimit)}}</view>
				</view>
				<view class="jd-box">
					<u-line-progress
						:percentage="parseFloat(item.packageLimit-item.lastLimit)*100/parseFloat(item.packageLimit)"
						:showText="false"></u-line-progress>
				</view>
				<view class="top-bs">
					<view class="wushi">
						<view class="wu-title">商户名称</view>
						<view class="wu-size">
							{{item.merName}}
						</view>
					</view>
					<view class="wushi">
						<view class="wu-title">套餐名称</view>
						<view class="wu-size">{{item.packageName}}</view>
					</view>
				</view>
				<view class="top-bs">
					<view class="wushi">
						<view class="wu-title">有效期</view>
						<view class="wu-size">{{item.packageStartTime}}~{{item.packageEndTime}}</view>
					</view>
					<view class="wushi">
						<view class="wu-title">创建时间</view>
						<view class="wu-size">{{item.createDate}}</view>
					</view>
				</view>
			</view>

			<u-loadmore :status="status" v-if="show == true" />
		</view>

	</view>
</template>

<script>
	import headers from '../../components/header/headers.vue'
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				titles: "套餐查询",
				msg: "1",
				dataList: [],
				page: 1,
				totalPage: 0,
				limit: 10,
				show: false,
				status: 'loading',
				merId: null
			}
		},
		onLoad(option) {

			if (option.merId) {
				this.merId = option.merId
			}
		},
		onShow() {
			this.dataList = []
			this.page = 1
			this.getTradeList()
		},
		onPullDownRefresh() {
			this.page = 1,
				this.limit = 10,
				this.totalPage = 0,
				this.dataList = [],
				this.getTradeList();

			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// 触底加载
			if (this.page < this.totalPage) {
				this.page++
				this.getTradeList()

			} else {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})
			}
		},
		components: {
			headers
		},
		methods: {
			dealNum(data) {
				if (data >= 10000) {
					return (parseFloat(data) / 10000).toFixed(2) + "万元"
				} else {
					return parseFloat(data).toFixed(2) + "元"
				}
			},
			getTradeList() {

				request({
					url: 'app/packageMerRecord/getMerPackage',
					method: 'post',
					data: {
						limit: this.limit,
						page: this.page,
						merId: this.merId
					},
				}).then(res => {
					if (res.data) {
						if (this.page != 1) {
							this.dataList = this.dataList.concat(res.data.records)
						} else {
							this.dataList = res.data.records
						}
						this.totalPage = res.pages

					}
					console.log(this.dataList, 'this.dataList');

				}).finally(rrr => {

				})
			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f4f5f6;
		height: 100vh;
	}

	.container {
		width: 100%;
		background: #f4f5f6;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.list-box {
		width: 95%;
		border-radius: 4px;
		margin: 10px auto;
		box-sizing: border-box;
		padding: 15px;
		background: #fff;

	}

	.top-bs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 100px;
			height: 18px;
		}
	}

	.h-size {
		font-size: 16px;
		color: #9b9d9b;
	}

	.jd-box {
		width: 100%;
		margin: 10px auto;
	}

	.wushi {
		width: 50%;

	}

	.wu-title {
		font-size: 16px;
		color: #9b9d9b;
		margin-bottom: 5px;
	}

	.wu-size {
		font-size: 14px;
		color: #000;
	}
</style>