<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="infoRefund.detail.headimage" style="width: 280rpx; height: 200rpx;"
							mode="aspectFill">
						</image>
					</view>
					<view style="padding-left: 20rpx;">
						<view style="font-size: 36rpx;font-weight: 600;">{{infoRefund.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;">{{infoRefund.detail.address}}</text>
						</view>
					</view>
				</view>
				<view style="height: 1px;width: 70%;background: #D9D9D9;margin: 45rpx auto;"></view>
				<view v-if=" infoRefund != '' " class="item-spacing"
					style="display: flex; justify-content: space-between; font-size: 26rpx;">
					<view style="color: #7A7A7A;">当前状态</view>
					<view style="color: #FF6D6D;" v-if="infoRefund.service_stauts== 1">机构处理中</view>
					<view style="color: #FF6D6D;" v-if="infoRefund.service_stauts== 4">待用户确认</view>
					<view style="color: #FF6D6D;" v-if="infoRefund.service_stauts== 7">结算中</view>
					<view style="color: #FF6D6D;" v-if="infoRefund.service_stauts== 10">已完成</view>
					<view style="color: #FF6D6D;" v-if="infoRefund.service_stauts== -3">驳回</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;">{{infoRefund.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: #343434;" @click="callPhone(infoRefund.shop.tel)">
						<text
							style="vertical-align: middle;">{{infoRefund.detail.teacher.name}}/{{infoRefund.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;">
					<view style="color: #7A7A7A;">订单号</view>
					<view style="color: #343434;">{{infoRefund.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;">
						{{ infoRefund.detail ? formatTimestamp(infoRefund.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;">{{infoRefund.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;">{{infoRefund.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;">￥{{infoRefund.detail.price}}</view>
				</view>
				<!-- 待用户确认 -->
				<template v-if="infoRefund!=''&&infoRefund.service_stauts == 4">
					<view style="height: 1px;width: 100%;background: #D9D9D9;margin: 20rpx auto;"></view>
					<view style="display: flex; justify-content: space-between; font-size: 26rpx;">
						<view style="color: #7A7A7A;">商家退款金额</view>
						<view style="color: #FF2323;font-size: 40rpx;font-weight: 600;">
							￥{{infoRefund.tbc_price}}</view>
					</view>
				</template>
				<!-- 结算中 -->
				<template v-if="infoRefund!=''&&infoRefund.service_stauts == 7">
					<view style="height: 1px;width: 100%;background: #D9D9D9;margin: 20rpx auto;"></view>
					<view style="display: flex; justify-content: space-between; font-size: 26rpx;">
						<view style="color: #7A7A7A;">商家退款金额</view>
						<view style="color: #FF2323;font-size: 40rpx;font-weight: 600;">
							￥{{infoRefund.c_price}}</view>
					</view>
				</template>
				<!-- 已完成 -->
				<template v-if="infoRefund!=''&&infoRefund.service_stauts == 10">
					<view style="height: 1px;width: 100%;background: #D9D9D9;margin: 20rpx auto;"></view>
					<view style="display: flex; justify-content: space-between; font-size: 26rpx;">
						<view style="color: #7A7A7A;">商家退款金额</view>
						<view style="color: #FF2323;font-size: 40rpx;font-weight: 600;">
							￥{{infoRefund.real_refundprice}}</view>
					</view>
				</template>
			</view>
			<template v-if="infoRefund!=''">
				<view style="background-color: #ffffff;border-radius: 20rpx;padding:30rpx;margin-top: 30rpx;">
					<view class="flex space-between flex-column"
						style="font-size: 26rpx;color: #7A7A7A;align-items: flex-start">
						<view>
							<text>退款原因</text>
						</view>
						<view style="height: 1px;width: 100%;background: #D9D9D9;margin: 20rpx auto;"></view>
						<view
							style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 24rpx;color: #343434;">
							{{infoRefund.reason}}
						</view>
					</view>
				</view>
				<view v-if="infoRefund.sales_type==1"
					style="background-color: #ffffff;border-radius: 20rpx;padding:30rpx;margin-top: 30rpx;">
					<view class="flex align-items space-between" style="font-size: 26rpx;color: #7A7A7A;">
						<view>
							<text>机构驳回退款原因</text>
						</view>
					</view>
					<view style="height: 1px;width: 100%;background: #D9D9D9;margin: 20rpx auto;"></view>
					<view style="font-size: 26rpx;">{{infoRefund.reject_reason}}</view>
					<view style="margin-top: 20rpx;">
						<u-grid :border="false" :col="3" align="center">
							<u-grid-item v-for="(item,index) in infoRefund.reject_images" @click="clickImg(item,index)">
								<image :src="item" style="width: 200rpx;height: 200rpx;border-radius: 20rpx;"
									mode="aspectFill">
								</image>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
				<view v-if="infoRefund.sales_type==4"
					style="background-color: #ffffff;border-radius: 20rpx;padding:30rpx;margin-top: 30rpx;">
					<view class="flex align-items space-between" style="font-size: 26rpx;color: #7A7A7A;">
						<view>
							<text>用户驳回退款原因</text>
						</view>
					</view>
					<view style="height: 1px;width: 100%;background: #D9D9D9;margin: 20rpx auto;"></view>
					<view style="font-size: 26rpx;">{{infoRefund.reject_reason}}</view>
					<view style="margin-top: 20rpx;">
						<u-grid :border="false" @click="click" :col="3" align="center">
							<u-grid-item v-for="(item,index) in infoRefund.reject_images">
								<image :src="item" style="width: 200rpx;height: 200rpx;border-radius: 20rpx;"
									mode="aspectFill">
								</image>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
				<view v-if="infoRefund.sales_type==7"
					style="background-color: #ffffff;border-radius: 20rpx;padding:30rpx;margin-top: 30rpx;">
					<view class="flex align-items space-between" style="font-size: 26rpx;color: #7A7A7A;">
						<view>
							<text>平台驳回退款原因</text>
						</view>
					</view>
					<view style="height: 1px;width: 100%;background: #D9D9D9;margin: 20rpx auto;"></view>
					<view style="font-size: 26rpx;">{{infoRefund.reject_reason}}</view>
				</view>
			</template>
		</view>
		<view class="buttonClack" v-if="infoRefund.service_stauts==1 || infoRefund.service_stauts==4 || infoRefund==''">
			<view class="flex align-items" style="text-align: center;justify-content: space-around;">
				<view style="width: 100%;" v-if="infoRefund.service_stauts==1">
					<view @click="cancelOrder"
						style="margin: 0 auto;color: #ffffff;;background-color: #008CFF;width: 80%;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;">
						取 消</view>
				</view>
				<view style="width: 100%;" v-if="infoRefund==''">
					<view @click="submitAdd"
						style="margin: 0 auto;background-color: #008CFF;color: #ffffff;width: 80%;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;">
						申 请 售 后</view>
				</view>
				<template v-if="infoRefund.service_stauts==4">
					<view>
						<view @click="refuseShowOpen('no')"
							style="border:2rpx solid #008CFF;color: #008CFF;;background-color: #ffffff;width: 300rpx;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;">
							不同意</view>
					</view>
					<view>
						<view @click="refuseShowOpen('yes')"
							style="color: #ffffff;;background-color: #008CFF;width: 300rpx;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;">
							同意</view>
					</view>
				</template>
			</view>
		</view>
		<u-popup :show="refundShow" :round="10" :closeOnClickOverlay="true" @close="delShow">
			<view style="padding: 30rpx 30rpx 0rpx 30rpx;">
				<view>
					<text style="font-size: 32rpx;">退款原因</text>
					<text style="color: #FF5F5F;font-size: 24rpx;">（必选)</text>
				</view>
				<view style="height: 1px;width: 100%;background: #D9D9D9;margin: 20rpx auto;"></view>
				<view>
					<u-radio-group v-model="radioValue" placement="column" activeColor="#008CFF">
						<u-radio v-for="(item,index) in radioList" :name="index" :label="item"
							:customStyle="{marginBottom: '20rpx'}"></u-radio>
					</u-radio-group>
					<view>
						<u--textarea v-model="otherText" placeholder="请填写退款原因" :maxlength="150" count></u--textarea>
					</view>
				</view>
				<view style="padding-top: 30rpx;">
					<view @click="chickRadio"
						style="text-align: center;margin: 0rpx auto;background-color: #008CFF;color: #ffffff;width: 90%;height: 90rpx;border-radius: 90rpx;line-height: 90rpx;">
						确 认</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="refuseShow" :round="10" mode="center" :customStyle="{width:'90%'}" :closeOnClickOverlay="false">
			<view style="padding: 30rpx 30rpx 0rpx 30rpx;">
				<view class="flex space-between align-items">
					<view>
						<text style="font-size: 40rpx;color: #008CFF;font-weight: 600;">详情</text>
					</view>
					<view @click="delShow">
						<u-icon name="close" color="#008CFF" size="32px"></u-icon>
					</view>
				</view>
				<view style="height: 1px;width: 100%;background: #D9D9D9;margin: 20rpx auto;"></view>
				<view>
					<view>
						<u--textarea v-model="otherText" placeholder="请填写拒绝理由" :maxlength="150" count></u--textarea>
					</view>
				</view>
				<view>
					<view style="color: #7A7A7A;font-size: 24rpx;padding: 20rpx 0rpx;">图片补充(最多上传三张)</view>
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="3"
						:previewFullImage="true" width="180rpx" :maxSize="3*1024*1024" height="180rpx" @oversize="oversize">
						<image src="/static/index/upload.png" style="width: 180rpx;height: 180rpx;" />
					</u-upload>
				</view>
				<view class="flex align-items"
					style="text-align: center;justify-content: space-around;padding-top: 30rpx; margin-bottom: 34rpx;">
					<view>
						<view @click="refuseShow = false"
							style="border:2rpx solid #008CFF;color: #008CFF;;background-color: #ffffff;width: 300rpx;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;">
							取 消</view>
					</view>
					<view>
						<view @click="userConfirmation()"
							style="color: #ffffff;;background-color: #008CFF;width: 300rpx;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;">
							确 认</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refundShow: false,
				radioValue: '',
				//拒绝理由
				otherText: '',
				refuseShow: false,
				fileList: [],
				list: '',
				id: 0,
				info: {},
				infoRefund: '',
				myReason: '',
				radioList: ['没有时间上课', '课程内容不符合预期', '位置不便', '其他课程时间冲突', '课程延期', '其他'],
				classes_service_order_id: 0,
				user_status: '',
			};

		},
		onLoad(op) {
			this.classes_service_order_id = op.id;
			this.getRefundInfo();
			//this.getOrderInfo();
			//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}`;
			},
			refuseShowOpen(status) {
				var that = this;
				this.user_status = status;
				if (status == 'no') {
					this.refuseShow = true;
				} else {
					uni.showModal({
						title: '提示',
						content: '确定要同意吗？',
						success: function(res) {
							if (res.confirm) {
								that.userConfirmation();
							}
						}
					});
				}
			},
			oversize(e) {
				this.$u.toast("请传6MB以内大小的图片！");
				return false;
			},
			//用户处理售后接口 
			userConfirmation() {
				if (this.otherText == '' && this.user_status == 'no') {
					uni.showToast({
						title: '请填写原因！',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				uni.$u.http.post('/api/school.service_order/user_confirmation', {
					order_no: this.classes_service_order_id,
					status: this.user_status,
					reject_reason: this.otherText,
					reject_images: this.list,
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.showToast({
							title: '提交成功！',
							icon: 'none',
							duration: 2000
						});
						this.refuseShow = false;
						this.getRefundInfo();
					}
				}).catch(error => {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none',
						duration: 2000
					});
				});
			},
			//取消订单确认
			cancelOrder() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定要撤销售后订单吗？',
					success: function(res) {
						if (res.confirm) {
							that.cancelOrderDo();
						}
					}
				});
			},
			//取消订单
			cancelOrderDo() {
				uni.$u.http.post('/api/school.service_order/cancel', {
					order_no: this.classes_service_order_id,
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						this.infoRefund = '';
						this.getOrderInfo();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(error => {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none',
						duration: 2000
					});
				});
			},
			//选择退款原因
			chickRadio() {
				var reason = "";
				if (this.radioValue === '') {
					uni.showToast({
						title: '请选择原因！',
						icon: 'none',
						duration: 2000
					});
					return;
				} else {
					if (this.radioValue != 5) {
						reason = this.radioList[this.radioValue];
					} else {
						reason = this.otherText;
					}
				}
				this.refundShow = false;
				this.myReason = reason;
			},
			//提交售后订单
			submitAdd() {
				console.log(this.radioValue);
				var reason = "";
				if (this.radioValue === '') {
					uni.showToast({
						title: '请选择原因！',
						icon: 'none',
						duration: 2000
					});
					return;
				} else {
					if (this.radioValue != 5) {
						reason = this.radioList[this.radioValue];
					} else {
						reason = this.otherText;
					}
				}
				uni.$u.http.post('/api/school.service_order/create', {
					classes_order_id: this.id,
					reason: reason,
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						this.getOrderInfo();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(error => {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none',
						duration: 2000
					});
				});
			},
			//订单详情
			getOrderInfo() {
				uni.$u.http.get('/api/school/order/detail', {
					params: {
						id: this.id
					}
				}).then(res => {
					this.info = res.data.detail;
					if (res.data.detail.classes_service_order_id != 0 && res.data.detail
						.classes_service_order_id != null && res.data.detail.classes_service_order_id != '') {
						this.classes_service_order_id = res.data.detail.classes_service_order_id;
						this.getRefundInfo(res.data.detail.classes_service_order_id);
					}
				}).catch(error => {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none',
						duration: 2000
					});
				});
			},
			//售后详情
			getRefundInfo() {
				uni.$u.http.get('/api/school.service_order/detail', {
					params: {
						id: this.classes_service_order_id
					}
				}).then(res => {
					if (res.data.detail == null) {
						this.infoRefund = '';
					} else {
						this.infoRefund = res.data.detail;
					}
				}).catch(error => {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none',
						duration: 2000
					});
				});
			},
			delShow() {
				this.refundShow = false;
				this.refuseShow = false;
			},
			clickImg(item, index) {
				uni.previewImage({
					current: index,
					urls: [item],
				});
			},
			// 删除图片
			deletePic(event) {
				console.log(event);
				const {
					index
				} = event;

				if (index >= 0 && index < this.fileList.length) {
					this.fileList.splice(index, 1);
					this.list = this.fileList.map(item => item.url).join(',');
					// 确保对应的 list 字段是一个数组
					let list = this.list;
					if (!Array.isArray(list)) {
						console.warn(`list is not an array, skipping splice operation`);
					} else {
						list.splice(index, 1);
						console.log(`Updated list`, list);
					}
				} else {
					console.error('Invalid index');
				}
			},
			// 新增图片
			async afterRead(event) {
				let lists = [].concat(event.file);
				let fileListLen = this.fileList.length;
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this.fileList[fileListLen];
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}));
					fileListLen++;
					// 更新对应的list字段
					this.list = this.fileList.map(item => item.url).join(',');
				}
			},
			//图片上传
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://testy.hschool.com.cn//api/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							"token": uni.getStorageSync("token")
						},
						success: (res) => {
							resolve(JSON.parse(res.data).data.fullurl);
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
			},

			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;
	}
</style>