<template>
	<view style="background: #F1F2F8;min-height: 100vh;">
		<view style="padding: 30rpx 30rpx 250rpx 30rpx;">
			<view style="background-color: #ffffff;border-radius: 20rpx;padding:30rpx">
				<view style="display: flex;align-self: center;align-items: start;">
					<view style="width: 45%;">
						<image :src="info.detail.headimage" style="width: 280rpx; height: 200rpx;" mode="aspectFill">
						</image>
					</view>
					<view style="padding-left: 20rpx;">
						<view style="font-size: 36rpx;font-weight: 600;">{{info.detail.title}}</view>
						<view style="font-size: 26rpx;color: #7A7A7A;margin-top: 15rpx;">
							<image src="/static/center/address.png"
								style="width: 40rpx;height: 40rpx;vertical-align: middle;"></image>
							<text style="vertical-align: middle;">{{info.detail.address}}</text>
						</view>
					</view>
				</view>
				<view style="height: 1px;width: 70%;background: #D9D9D9;margin: 45rpx auto;"></view>
				<view v-if="info!=''" class="item-spacing"
					style="display: flex; justify-content: space-between; font-size: 26rpx;">
					<view style="color: #7A7A7A;">当前状态</view>
					<span class="status"
						v-if="info.serviceorder && info.serviceorder.status == 1 && info.serviceorder.service_stauts == 1"
						style="font-size: 26rpx;color: #FF2323;">待机构处理</span>
					<span class="status"
						v-if="info.serviceorder && info.serviceorder.status == 4 && info.serviceorder.service_stauts == 7"
						style="font-size: 26rpx;color: #FF2323;">售后通过结单中</span>
					<span class="status"
						v-if="info.serviceorder && info.serviceorder.status == 4 && info.serviceorder.service_stauts == 4"
						style="font-size: 26rpx;color: #FF2323;">待用户确认</span>
					<span class="status"
						v-if="info.serviceorder && info.serviceorder.status == 7 && info.serviceorder.service_stauts == 4"
						style="font-size: 26rpx;color: #FF2323;">售后结单完成</span>
					
					<span class="status" v-if="info.status == 0" style="font-size: 26rpx;color: #008CFF;">待支付</span>
					<span class="status" v-if="info.status == 3" style="font-size: 26rpx;color: #008CFF;">使用中</span>
					<span class="status" v-if="info.status == 6" style="font-size: 26rpx;color: #FF2323;">已退款</span>
					<span class="status" v-if="info.status == 9" style="font-size: 26rpx;color: #34DC12;">已完成</span>
				</view>
				<view class="item-spacing" style="display: flex; justify-content: space-between; font-size: 26rpx;">
					<view style="color: #7A7A7A;">课程机构</view>
					<view style="color: #343434;">{{info.shop.name}}</view>
				</view>
				<view class="item-spacing" style="display: flex; justify-content: space-between; font-size: 26rpx;">
					<view style="color: #7A7A7A;">讲师/电话</view>
					<view style="color: #71D0FF;" @click="callPhone(info.shop.tel)">
						<text style="vertical-align: middle;">{{info.detail.teacher.name}}/{{info.shop.tel}}</text>
						<image src="/static/tel.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;"></image>
					</view>
				</view>
				<view class="item-spacing" style="display: flex; justify-content: space-between; font-size: 26rpx;" v-if="info.status != 3">
					<view style="color: #7A7A7A;">退款原因</view>
					<view style="color: #343434;">{{info.serviceorder.reason}}</view>
				</view>
				<view class="item-spacing" style="display: flex; justify-content: space-between; font-size: 26rpx;">
					<view style="color: #7A7A7A;">订单号</view>
					<view style="color: #343434;">{{info.order_no}}</view>
				</view>
				<view class="item-spacing" style="display: flex; justify-content: space-between; font-size: 26rpx;">
					<view style="color: #7A7A7A;">购买时间</view>
					<view style="color: #343434;">
						{{ info.detail ? formatTimestamp(info.detail.createtime) : '加载中...' }}
					</view>
				</view>
				<view class="item-spacing" style="display: flex; justify-content: space-between; font-size: 26rpx;">
					<view style="color: #7A7A7A;">全部课时</view>
					<view style="color: #343434;">{{info.detail.classes_num}}</view>
				</view>
				<view class="item-spacing" style="display: flex; justify-content: space-between; font-size: 26rpx;">
					<view style="color: #7A7A7A;">已用课时</view>
					<view style="color: #343434;">{{info.detail.use_num}}</view>
				</view>
				<view style="display: flex; justify-content: space-between; font-size: 26rpx;">
					<view style="color: #7A7A7A;">购买价格</view>
					<view style="color: #FF5F5F;" v-if="info.detail.feel == 0">￥{{info.detail.price}}</view>
					<view style="color: #FF5F5F;" v-if="info.detail.feel == 1">免费</view>
				</view>
				<view class="line-row" v-if="(info.serviceorder && info.serviceorder.status == 4 && info.serviceorder.service_stauts == 4) || info.status == 6 || info.status == 9 || (info.serviceorder && info.serviceorder.status == 4 && info.serviceorder.service_stauts == 7)"></view>
				<view class="item-spacing" style="display: flex; justify-content: space-between; font-size: 26rpx;"  v-if="(info.serviceorder && info.serviceorder.status == 4 && info.serviceorder.service_stauts == 4) || info.status == 6 || info.status == 9 || (info.serviceorder && info.serviceorder.status == 4 && info.serviceorder.service_stauts == 7)">
					<view style="color: #7A7A7A;">商家退款金额</view>
					<view style="color: #FF2323;font-weight: 800;font-size: 36rpx;">{{'￥' + info.serviceorder.tbc_price}}</view>
				</view>
			</view>
			<!-- <view class="flex flex-column" style="background-color: #ffffff;border-radius: 20rpx;padding:30rpx;margin-top: 42rpx;">
				<span style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 24rpx;color: #7A7A7A;">用户驳回退款金额</span>
				<view class="line-row" style="margin: 24rpx 0 18rpx 0;"></view>
				<span style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 24rpx;color: #343434;">课程质量没有问题</span>
			</view> -->
			
			<view class="refund flex flex-column" v-if="info.status == 3 && info.detail.feel != 1">
				<span class="title">退款金额</span>
				<view class="price flex align-items">
					<span>￥</span>
					<input class="uni-input" focus="true" v-model="price" type="digit" placeholder-class="plasty"
						style="height: 60rpx;" />
				</view>
				<span class="line"></span>
				<span class="text">退款金额可修改，上限为课程购买价格(损耗百分比:{{loss_proportion}}%)</span>
				<u--textarea v-model="reason" placeholder="请输入内容" count maxlength="150" height='100'></u--textarea>
			</view>
		</view>
		<view class="buttonClack" v-if="info.status == 3 || (info.status == 4 && info.serviceorder.status == 1 && info.detail.feel != 1)  ">
			<view class="flex align-items" style="text-align: center;justify-content: space-around;">
				<view style="width: 100%;" v-if="info.status == 3">
					<view @click="cancelRefund"
						style="margin: 0 auto;border: 2rpx solid #FF5F5F;color: #FF5F5F;width: 80%;height: 80rpx;border-radius: 401rpx;line-height: 80rpx;">
						取 消</view>
				</view>
				<view style="width: 100%;" v-if="info.status == 3">
					<view @click="submitRefund"
						style="margin: 0 auto;background-color: #008CFF;color: #ffffff;width: 80%;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;">
						退 款</view>
				</view>
				<view style="width: 100%;"
					v-if="info.serviceorder && info.serviceorder.status == 1 && info.serviceorder.service_stauts == 1">
					<view @click="refuseShow = true"
						style="margin: 0 auto;background-color: #008CFF;color: #ffffff;width: 80%;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;">
						拒 绝</view>
				</view>
				<view style="width: 100%;"
					v-if="info.serviceorder && info.serviceorder.status == 1 && info.serviceorder.service_stauts == 1">
					<view @click="agreeShow = true"
						style="margin: 0 auto;background-color: #008CFF;color: #ffffff;width: 80%;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;">
						同 意</view>
				</view>
			</view>
		</view>
		<view class="buttonClack" v-if="info.detail.feel == 1 && info.status == 3">
			<view class="flex align-items" style="text-align: center;justify-content: space-around;">
				<view style="width: 100%;">
					<view @click="quxiao()"
						style="margin: 0 auto;border: 2rpx solid #FF5F5F;color: #FF5F5F;width: 80%;height: 80rpx;border-radius: 401rpx;line-height: 80rpx;">
						取 消 免 费 课 程</view>
				</view>
			</view>
		</view>
		<!-- 拒绝 -->
		<u-popup :show="refuseShow"  mode="center" :zIndex="99999" :custom-style="popupStyle"  @close="refuseClose" @open="refuseOpen" :closeable="true">
			<view class="center-box flex flex-column">
				<span class="title">拒绝理由</span>
				<span class="line"></span>
				<view style="width: 630rpx;margin-left: 30rpx;margin-top: 31rpx;">
					<u--textarea v-model="reasonText" placeholder="请输入内容" count maxlength="150" height='100'></u--textarea>
				</view>
				<view class="flex align-items btnList" style="justify-content: space-evenly;">
					<span style="border-radius: 401rpx;border: 2rpx solid #008CFF;color: #008CFF;" @click.stop="qx()">取消</span>
					<span style="border-radius: 401rpx;background: #008CFF;color: #FFFFFF;" @click.stop="next()">确认</span>
				</view>
			</view>
		</u-popup>
		<!-- 同意 -->
		<u-popup :show="agreeShow"  mode="center" :zIndex="99999" :custom-style="popupStyle"  @close="agreeClose" @open="agreeOpen" :closeable="true">
			<view class="center-box flex flex-column">
				<span class="title">同意退款</span>
				<span class="line"></span>
				<span class="jine">退款金额
				<span class="red">(必填)</span>
				</span>
				<view class="price flex align-items">
					<span>￥</span>
					<input class="uni-input" focus="true" v-model="reasonPrice" type="digit" placeholder-class="plasty"
						style="height: 60rpx;" />
				</view>
				<span class="line" style="width: 630rpx;margin-left: 30rpx;"></span>
				<span class="text">退款金额可修改，上限为课程购买价格</span>
				<span class="text" style="margin-top: 16rpx;">课程购买价格：
				<span class="red">￥{{info.detail.price}}</span>
				</span>
				<view class="flex align-items btnList" style="justify-content: space-evenly;">
					<span style="border-radius: 401rpx;border: 2rpx solid #008CFF;color: #008CFF;" @click.stop="TyQx()">取消</span>
					<span style="border-radius: 401rpx;background: #008CFF;color: #FFFFFF;" @click.stop="Tynext()">确认</span>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				price: '',
				reason: '',
				reasonPrice:'', //同意金额
				list: '',
				refuseShow: false,
				agreeShow: false,
				id: 0,
				info: {},
				classes_service_order_id: 0,
				reasonText:'',
				loss_proportion: '', //损耗
				popupStyle: {
					width: '690rpx',
					// height: '564rpx',
					borderRadious:'20rpx',
					margin: '0 auto', // 水平居中
					display: 'flex',
					justifyContent: 'center',
					alignItems: 'center'
				},
			};

		},
		onLoad(op) {
			this.classes_service_order_id = op.id;
			// this.getRefundInfo();
			this.getOrderInfo(op.id);
			//classes_service_order_id

		},
		computed: {

		},
		methods: {
			formatTimestamp(timestamp) {
				const date = new Date(timestamp * 1000); // 乘以1000转换为毫秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			//免费课程取消
			quxiao(){
				uni.$u.http.post('/api/school/worker/order/cancel', {
					order_no: this.info.order_no,
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '取消免费课程成功',
							icon: 'none',
							duration: 2000,
							complete: function() {
								setTimeout(function() {
									uni.navigateBack(1)
								}, 2000);
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(error => {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none',
						duration: 2000
					});
				});
			},
			// 取消退款
			cancelRefund() {
				uni.navigateBack(1)
			},
			refuseClose(){
				this.refuseShow = false
				this.reasonText = ''
			},
			refuseOpen(){
				this.refuseShow = true
			},
			agreeClose(){
				this.agreeShow = false
			},
			agreeOpen(){
				this.agreeShow = true
			},
			// 取消
			qx(){
				this.refuseShow = false
				this.reasonText = ''
			},
			TynextQx(){
				this.agreeShow = fasle
			},
			Tynext(){
				uni.$u.http.post('/api/school.worker.service_order/shop_confirmation', {
					order_no: this.info.serviceorder.id,
					price: this.reasonPrice,
					status: 'yes'
				}).then(res => {
					if (res.code == 1) {
						this.agreeShow = false
						uni.showToast({
							title: '已同意',
							icon: 'none',
							duration: 2000,
							complete: function() {
								setTimeout(function() {
									uni.navigateBack(1)
								}, 2000);
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(error => {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none',
						duration: 2000
					});
				});
			},
			// 驳回退款
			next(){
				uni.$u.http.post('/api/school.worker.service_order/shop_confirmation', {
					order_no:  this.info.serviceorder.id,
					reject_reason: this.reasonText,
					status: 'no'
				}).then(res => {
					if (res.code == 1) {
						this.refuseShow = false
						this.reasonText = ''
						uni.showToast({
							title: '已拒绝',
							icon: 'none',
							duration: 2000,
							complete: function() {
								setTimeout(function() {
									uni.navigateBack(1)
								}, 2000);
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(error => {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none',
						duration: 2000
					});
				});
			},
			// 上架发起退款
			submitRefund() {
				uni.$u.http.post('/api/school.worker.service_order/create', {
					classes_order_id: this.id,
					reason: this.reason,
					price: this.price

				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '发起成功',
							icon: 'none',
							duration: 2000,
							complete: function() {
								setTimeout(function() {
									uni.navigateBack(1)
								}, 2000);
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(error => {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none',
						duration: 2000
					});
				});
			},
			// 退款金额
			getMoney(id) {
				uni.$u.http.get('/api/school.worker.service_order/create', {
					params: {
						classes_order_id: id
					}
				}).then(res => {
					if (res.code == 1) {
						this.loss_proportion = res.data.order_data.loss_proportion
						if (res.data.order_data.auto_recommend_price <= 0) {
							this.price = res.data.order_data.sub_refundprice
						} else {
							this.price = res.data.order_data.auto_recommend_price
						}
						// this.price = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(error => {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none',
						duration: 2000
					});
				});
			},

			//订单详情
			getOrderInfo(id) {
				uni.$u.http.get('/api/school/worker/order/detail', {
					params: {
						id: id
					}
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data.detail;
						
						if (this.info.serviceorder && (this.info.status == 4 && this.info.serviceorder.status == 1 )) {
							if (res.data.detail.serviceorder.auto_recommend_price <= 0) {
								this.reasonPrice = res.data.detail.serviceorder.sub_refundprice
							} else {
								this.reasonPrice = res.data.detail.serviceorder.auto_recommend_price
							}
						}
					
						if (res.data.detail.status == 3) {
							this.id = res.data.detail.id
							this.getMoney(res.data.detail.id)
						} 
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(error => {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none',
						duration: 2000
					});
				});
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F1F2F8;
	}

	.buttonClack {
		padding-top: 20rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		padding-bottom: calc(env(safe-area-inset-bottom));
		box-shadow: 0rpx -6rpx 12rpx 0rpx rgba(111, 190, 255, 0.1);
	}

	.item-spacing {
		padding-bottom: 30rpx;
	}

	.w-100 {
		width: 100%;
	}

	.flex {
		display: flex;
	}

	.justify-center {
		justify-content: center;
	}

	.space-between {
		justify-content: space-between;
	}

	.align-items {
		align-items: center;
	}

	.flex-column {
		flex-flow: column;
	}

	.justify-start {
		justify-content: start;
	}

	.mar-top-30 {
		margin-top: 30rpx;
	}

	.refund {
		padding: 15rpx;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #343434;
		}

		.price {
			margin-top: 32rpx;
			height: 53rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 62rpx;
			color: #FF5F5F;
		}

		input {
			height: 53rpx;
		}

		.line {
			width: 642rpx;
			height: 1rpx;
			background: #D9D9D9;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			margin: 17rpx 0 7rpx 0;
		}

		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #7A7A7A;
			margin-bottom: 42rpx;
		}
	}

	::v-deep.plasty {
		height: 53rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 62rpx;
		color: #FF5F5F;
	}
	.center-box{
		    width: 690rpx;
		.title{
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 42rpx;
			color: #008CFF;
			padding: 30rpx;
			
		}
		.text{
			padding: 0 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #7A7A7A;
		}
		.jine{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #343434;
		}
		.line{
			width: 690rpx;
			height: 1rpx;
			background: #D9D9D9;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			margin: 11rpx 31rpx  0 0;
		}
		.price {
			margin-top: 32rpx;
			height: 53rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 62rpx;
			color: #FF5F5F;
			padding: 0 30rpx;
			width: 630rpx;
		}
		.jine{
			padding: 30rpx;
		}
		.red{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FF5F5F;
		}
		
		input {
			height: 53rpx;
		}
		.btnList{
			padding: 30rpx;
			span{
				width: 306rpx;
				height: 80rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 34rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.line-row{
		width: 630rpx;
		height: 1rpx;
		background: #D9D9D9;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 32rpx 0 38rpx 0;
	}
</style>