<template>
	<view class="index">
		<view class="boxcontent">
			<u-steps :current="datalist.status.status_b" dot direction="column">
				<u-steps-item v-for="(item,index) in datalist.status.refund" :key="index" :title="item"></u-steps-item>
			</u-steps>
		</view>
		<view class="onecontent" style="margin-top: 32rpx;">
			<view class="onecontentone_one">
				退款信息
			</view>
			<view class="onecontentone_otow flex-between" @click="detailsInfo(datalist.store_service_id)">
				<image :src="datalist.order_img" mode="aspectFill"></image>
				<view class="flex-colum-start">
					<view class="onecontentone">
						{{datalist.order_title}}
					</view>
					<view class="onecontenttow">
						<view class="onecontenttowabsolute">
							x{{datalist.number}}
						</view>
						<text style="font-size:28rpx;">¥</text>{{datalist.order_price}}
					</view>
				</view>
			</view>
			<view class="onecontentone_item flex-between">
				<view class="onecontentone_itemone">
					退款原因
				</view>
				<view class="onecontentone_itemtow">
					{{datalist.reason}}
				</view>
			</view>
			<view class="onecontentone_item flex-between">
				<view class="onecontentone_itemone">
					退款金额
				</view>
				<view class="onecontentone_itemtow">
					{{datalist.order_price}}
				</view>
			</view>
			<view class="onecontentone_item flex-between">
				<view class="onecontentone_itemone">
					申请件数
				</view>
				<view class="onecontentone_itemtow">
					{{datalist.number}}
				</view>
			</view>
			<view class="onecontentone_item flex-between">
				<view class="onecontentone_itemone">
					申请时间
				</view>
				<view class="onecontentone_itemtow">
					{{datalist.createtime}}
				</view>
			</view>
			<view class="onecontentone_item flex-between">
				<view class="onecontentone_itemone">
					退款编号
				</view>
				<view class="onecontentone_itemtow flex-start">
					{{datalist.out_trade_no}}
					<text class="therecontentfive_box" @click="copy(datalist.out_trade_no)">复制</text>
				</view>
			</view>
		</view>
		<view :style="{height:height}">

		</view>
		<view class="fixedview flex-between" v-if="datalist.status.status == 0 || datalist.status.status == 2">
			<view class="fixedview_one flex-start">
				<!-- 	<view class="fixedview_oneone">
					应付金额：
				</view>
				<view class="fixedview_onetow">
					<text>¥</text>11
				</view> -->
			</view>
			<view class="fixedview_tow" @click="cancelrefund">
				取消退款
			</view>
		</view>
	</view>
</template>

<script>
	import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
	export default {
		data() {
			return {
				height: '',
				datalist: {
					status: {
						status_b: '',
						status: ''
					}
				},
				order_id: ""
			}
		},
		async onLoad(e) {
			this.order_id = e.id
			try {
				let res = await this.api.orderrefunddetail({
					order_id: this.order_id
				})
				if (res) {
					this.datalist = res
				}
			} catch (e) {}
			// this.generate()
		},
		mounted() {
			var query = uni.createSelectorQuery().in(this).select('.fixedview')
			query.boundingClientRect(ele => {
				var that = this;
				uni.getSystemInfo({
					success(res) {
						that.height = (ele.height) + "px";
						that = null;
					}
				})
			}).exec();
		},
		methods: {
			detailsInfo(e) { //查看订单详情
				uni.pro.navigateTo('order/orderInfo', {
					id: e,
				})
			},
			copy(value) {
				//提示模板
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({
							title: '复制成功'
						})
					}
				});
			},
			async orderorderrefundcancel() {
				let res = await this.api.orderorderrefundcancel({
					order_id: this.datalist.order_id
				})
				if (res) {
					uni.showToast({
						title: '成功取消退款',
						icon: 'none'
					});
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/my/order/index?e=0'
						});
					}, 1500);
				}

			},

			cancelrefund() {
				uni.showModal({
					title: '提示',
					content: '确定取消退款吗?',
					success: (res) => {
						if (res.confirm) {
							this.orderorderrefundcancel()
						} else if (res.cancel) {}
					}
				})
			}
		}

	}
</script>

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

	.index {
		padding: 32rpx 28rpx;

		.boxcontent {
			padding: 24rpx 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx;
		}

		.onecontent {
			width: 100%;
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 12rpx;

			.onecontentone_one {
				font-size: 32rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: bold;
				color: #333333;
			}

			.onecontentone_otow {
				margin-top: 32rpx;

				image {
					width: 176rpx;
					height: 176rpx;
				}

				.flex-colum-start {
					flex: auto;
					margin-left: 20rpx;
					height: 176rpx;
					justify-content: space-around;

					.onecontentone {
						width: 400rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 32rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #1A1A1A;
					}

					.onecontenttow {
						position: relative;
						margin-top: 16rpx;
						width: 100%;
						font-size: 40rpx;
						font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
						font-weight: normal;
						color: #333333;

						.onecontenttowabsolute {
							position: absolute;
							bottom: 0;
							right: 0;
							font-size: 28rpx;
							font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
							font-weight: normal;
							color: #333333;
						}
					}
				}
			}

			.onecontentone_item {
				margin-top: 16rpx;
				width: 100%;

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

				.onecontentone_itemtow {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #999999;

					.therecontentfive_box {
						padding: 6rpx 10rpx;
						font-size: 20rpx;
						font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
						font-weight: normal;
						color: #666666;
						background: #FFFFFF;
						margin-left: 6rpx;
						border-radius: 8rpx;
						border: 2rpx solid #D5D5D5;
					}
				}
			}
		}

		.fixedview {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 24rpx 28rpx;
			background: #FFFFFF;

			.fixedview_one {
				.fixedview_oneone {
					font-size: 28rpx;
					font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
					font-weight: normal;
					color: #333333;
				}

				.fixedview_onetow {
					font-size: 44rpx;
					font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
					font-weight: normal;
					color: #F45C4C;
					font-weight: bold;

					text {
						font-size: 28rpx;
					}
				}
			}

			.fixedview_tow {
				background: linear-gradient(143deg, #8689AF 0%, #494A5F 100%);
				border-radius: 34rpx;
				padding: 10rpx 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}

		}

		.buoot {
			margin: 40rpx auto;
			width: 80%;
			padding: 16rpx 0;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background: linear-gradient(115deg, #7E81A5 0%, #4D4E64 100%);
			border-radius: 40rpx;
		}

		.therecontent {
			margin-top: 24rpx;
			padding: 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 18rpx;

			.therecontentone {
				width: 100%;
				padding: 10rpx 0;
				border-bottom: 1px solid #F7F7F7;

				.therecontentone_one {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.therecontentone_text {
					flex: auto;
					margin-left: 20rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

			}



			.fourcontent_items {
				position: relative;
				margin-top: 16rpx;
				margin-left: 20rpx;
				width: 112rpx;
				height: 112rpx;
				background: #f9f9f9;
				border-radius: 16rpx;
			}

			.fourcontent {
				.fourcontent_item {
					position: relative;
					margin-top: 16rpx;
					margin-left: 20rpx;
					width: 112rpx;
					height: 112rpx;
					border-radius: 16rpx;

					image {
						width: 112rpx;
						height: 112rpx;
						border-radius: 16rpx;
					}

					.fourcontent_itemtext {
						position: absolute;
						top: 0rpx;
						right: 0rpx;
					}
				}
			}

			.entowakst {
				font-size: 28rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #333333;
			}

			.therecontentfive_box {
				padding: 6rpx 10rpx;
				font-size: 20rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #666666;
				background: #FFFFFF;
				margin-left: 6rpx;
				border-radius: 8rpx;
				border: 2rpx solid #D5D5D5;
			}
		}


	}
</style>