<template>
	<view class="content">
		<view class="contentbox" v-for="(item,index) in list" :key="index" @click.stop="clickinof(item)">
			<view class="contentboxitemtop flex-between">
				<view class="contentboxitemone">
					{{item.user_name}}
				</view>
				<view class="contentboxitemboxtow">
					<view class="contentboxitemboxtows" @click.stop="clickconfirm(item,6)">
						拒绝
					</view>
					<view class="contentboxitemboxone" @click.stop="clickconfirm(item,1)">
						通过
					</view>
				</view>
			</view>
			<view class="contentboxitembottom flex-between">
				<view class="contentboxitembottomleft flex-colum-start">
					<view class="contentboxitembottomleftone">¥<text>{{item.price || '-'}}</text></view>
					<view class="flex-start">
						<u-icon name="clock" color="#666666" size="16"></u-icon>
						<view class="flexstartico">
							{{item.createtime}}
						</view>
					</view>
				</view>
				<view class="contentboxitembottomright" @click.stop="previewImage(item.img)">
					<image class="contentboxitembottomrightimage" :src="item.album" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="flex-colum" style="width: 100%;">
			<u-loadmore :status="form.status" />
		</view>
		<u-popup :show="clickconfirmshow" mode="center" :round="10">
			<view class="popupshow">
				<view class="Box_box flex-between">
					<view>拒绝理由：</view>
					<u--textarea v-model="no" placeholder="请输入拒绝理由"></u--textarea>
				</view>
				<view class="content_bottom">
					<view class="content_bottomone"
						@click="saveMerchantBaseInfo(saveMerchantBaseInfolsit.item,saveMerchantBaseInfolsit.i)">
						确定
					</view>
					<view class="content_bottomtow" @click="clickconfirmshow = false">
						取消
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				clickconfirmshow: false,
				is_end: false,
				list: [],
				form: {
					page: 1,
					status: 'loadmore',
				},
				no: '',
				saveMerchantBaseInfolsit: {
					item: {

					},
					i: ''
				}
			};
		},
		async onLoad(e) {
			try {
				if (e.userId) {
					uni.cache.set('userId', e.userId);
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		onShow() {
			this.list = []
			this.is_end = false
			this.form.status = 'loadmore'
			this.form.page = 0
			this.storeinvoicingrecordsthatneed()
		},
		methods: {
			clickinof(item) {
				uni.pro.navigateTo('index/orderinfoauditbilling', {
					id: item.id
				})
			},
			saveMerchantBaseInfo(item, i) {
				this.clickconfirmshow = false
				this.storereviewandinvoicing(item, i)
			},
			async clickconfirm(item, i) {
				if (i == 1) {
					uni.showModal({
						title: '提示',
						content: '确认通过吗?',
						success: async (res) => {
							if (res.confirm) {
								this.storereviewandinvoicing(item, i)
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					this.saveMerchantBaseInfolsit.item = item
					this.saveMerchantBaseInfolsit.i = i
					this.clickconfirmshow = true
				}
			},
			async storereviewandinvoicing(item, i) {
				let res = await this.api.storereviewandinvoicing({
					store_id: uni.cache.get('userId'),
					id: item.id,
					no: this.no,
					s_type: i
				})
				if (res.code == 1) {
					this.storeinvoicingrecordsthatneed()
				}
			},
			// 预览图片
			previewImage(e) {
				uni.previewImage({
					urls: [e],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			async storeinvoicingrecordsthatneed() {
				let res = await this.api.storeinvoicingrecordsthatneed({
					store_id: uni.cache.get('userId')
				})
				console.log(res)
				if (res.code == 1) {
					if (res.data.length == 0) {
						this.is_end = true
						this.form.status = 'nomore'
						return false;
					} else {
						this.form.status = 'loading';
						this.form.page = ++this.form.page;
						setTimeout(() => {
							this.list = [...this.list, ...res.data];
							if (res.data.length == 10) {
								this.form.status = 'loading';
							} else {
								this.is_end = true;
								this.form.status = 'nomore';
							}
						}, 500)
					}
				}

			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}

	.content {
		padding: 28rpx;

		.contentbox {
			padding: 32rpx 16rpx;
			margin-top: 40rpx;
			width: 100%;
			background: #FFFFFF;

			.contentboxitemtop {
				padding-bottom: 18rpx;
				border-bottom: 1rpx solid #E3E3E3;

				.contentboxitemone {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}

				.contentboxitemboxtow {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.contentboxitemboxone {
						margin-left: 10rpx;
						width: 104rpx;
						height: 44rpx;
						background: #318AFE;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 44rpx;
						text-align: center;
					}

					.contentboxitemboxtows {
						width: 104rpx;
						height: 44rpx;
						background: red;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 44rpx;
						text-align: center;
					}
				}

			}

			.contentboxitembottom {
				padding-top: 16rpx;

				.contentboxitembottomleft {
					.contentboxitembottomleftone {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 26rpx;
						color: #C92E2E;

						text {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 32rpx;
							color: #C92E2E;
						}
					}

					.flex-start {
						margin-top: 20rpx;

						.flexstartico {
							margin-left: 12rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
						}
					}

				}

				.contentboxitembottomright {
					position: relative;
					width: 148rpx;
					height: 104rpx;
					border-radius: 10rpx;

					.contentboxitembottomrightimage {
						width: 148rpx;
						height: 104rpx;
						border-radius: 10rpx;
					}

					.contentboxitembottomrightimage::after {
						content: '查看大图';
						position: absolute;
						top: 0;
						left: 0;
						width: 148rpx;
						height: 104rpx;
						background: rgba(0, 0, 0, 0.5);
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 104rpx;
						text-align: center;
					}
				}
			}
		}

		.popupshow {
			width: 600rpx;
			border-radius: 16rpx;

			.Box_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				text-align: right;
				padding: 24rpx;
				border-bottom: 1px solid #e5e5e5;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}

			.content_bottom {
				margin: 70rpx auto 60rpx auto;
				width: 70%;
				height: 84rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.content_bottomone {
					padding: 16rpx 60rpx;
					background: #288EFB;
					border-radius: 32rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
				}

				.content_bottomtow {
					padding: 16rpx 60rpx;
					background: red;
					border-radius: 32rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}
</style>