<template>
	<view class="page" v-if="showPage">
		<view class="pageMain">
			<view class="topBox padding-tb-50">
				<view class="text-center text-fe text-bold margin-bottom-10">
					<text class="text-40 ">{{detailData.status_text}}</text>
					<text class="text-28" v-if="detailData.status == 1">（{{cancelSecond}}后失效）</text>
					<text class="text-28" v-if="detailData.status == 2">（{{cancelSecond2}}后失效）</text>
				</view>
				<view class="flex align-center justify-center text-ff">
					<view class="tyIcon-dingdanhaochaxun text-28 margin-right-5 "></view>
					<view class="text-22 line-30">{{detailData.order_number}}</view>
				</view>
			</view>
			<view class="padding-tb-25 padding-lr-30 flex">
				<view class="expertHeader">
					<image :src="detailData.expert_head_img" class="width-100p height-100p block" mode="aspectFill">
					</image>
				</view>
				<view class="flex-one margin-left-15">
					<view class="flex justify-between margin-bottom-10">
						<view class="flex-one margin-right-15 text-34 text-33 text-bold line-50">
							{{detailData.expert_name}}
						</view>
						<view class="text-32 text-bold text-ff85 text-price">{{detailData.expert_price}}</view>
					</view>
					<view class="text-cut-one text-26 text-909298">{{detailData.expert_brief}}</view>
				</view>
			</view>
			<view class="line15"></view>
			<view class="padding-top-25 padding-lr-30">
				<view class="flex align-center text-28 text-33 line-40">
					<view>下单时间：</view>
					<view>{{detailData.order_time}}</view>
				</view>
				<view class="flex align-center text-28 text-33 line-40 margin-top-15" v-if="detailData.pay_time">
					<view>付款时间：</view>
					<view>{{detailData.pay_time}}</view>
				</view>
				<view class="flex align-center text-28 text-33 line-40 margin-top-15" v-if="detailData.end_time">
					<view>结束时间：</view>
					<view>{{detailData.end_time}}</view>
				</view>
				<view class="flex align-center text-28 text-33 line-40 margin-top-15" v-if="detailData.refund_time">
					<view>退款时间：</view>
					<view>{{detailData.refund_time}}</view>
				</view>
				<view class="flex align-center text-28 text-33 line-40 margin-top-15" v-if="detailData.cancel_time">
					<view>取消时间：</view>
					<view>{{detailData.cancel_time}}</view>
				</view>
				<block v-for="(item,index) in askList" :key="index">
					<!-- 提问 -->
					<view class="msgBox1 margin-top-25" v-if="item.type == 1">
						<view>
							<view class="text-2f9 text-bold line-40 text-28 margin-bottom-10">
								{{index == 0 ? '咨询内容' : '追加提问'}}
							</view>
							<view class="text-28 text-33 line-40">
								{{item.ask_content}}
							</view>
						</view>
						<view class="margin-top-25" v-if="item.ask_img.length > 0">
							<view class="text-2f9 text-bold line-40 text-28 margin-bottom-10">
								相关图片
							</view>
							<view class="" style="width: calc(100% + 15rpx);">
								<ty-image-images2 :list="item.ask_img" width="206" height="206" space="15" column="5">
								</ty-image-images2>
							</view>
						</view>
						<view class="padding-top-10" v-if="item.ask_video.length > 0">
							<view class="text-2f9 text-bold line-40 text-28 margin-bottom-10">
								相关视频
							</view>
							<view class="" style="width: calc(100% + 15rpx);">
								<ty-image-video :list="[{video_url:item.ask_video,image_url:item.ask_video_cover_img}]"
									width="206" height="206" space="15" column="5">
								</ty-image-video>
							</view>
						</view>
						<view class="padding-top-10" v-if="item.ask_data.length > 0">
							<view class="text-2f9 text-bold line-40 text-28 margin-bottom-10">
								相关资料
							</view>
							<view class="text-28 text-33 line-40" style="text-decoration: underline;"
								v-for="(item2,index2) in item.ask_data" :key="index2"
								:class="index2 == 0 ? '' : 'margin-top-25'" @click="downFile(item2.file_url)">
								{{item2.file_name}}
							</view>
						</view>
					</view>

					<!-- 回答 -->
					<view class="margin-top-25" v-else>
						<view class="replyBox">
							<view class="flex align-center padding-bottom-10">
								<view class="replyHeader">
									<image :src="detailData.expert_head_img" class="width-100p height-100p block"
										mode="aspectFill"></image>
								</view>
								<view class="flex-one margin-lr-15 text-30 text-33 text-bold">
									{{detailData.expert_name}}
								</view>
								<view class="text-24 text-77">{{item.show_create_time}}</view>
							</view>
							<!-- 文字 -->
							<view class="text-28 text-33 line-50 margin-bottom-15" v-if="item.answer_type == 5">
								{{item.answer_text}}
							</view>
							<!-- 图片 -->
							<view style="width: calc(100% + 15rpx);" class="margin-top-15" v-if="item.answer_type == 2">
								<ty-image-images2 :list="item.answer_img_url" width="206" height="206" space="15"
									column="3">
								</ty-image-images2>
							</view>
							<!-- 视频 -->
							<view style="width: calc(100% + 15rpx);" class="margin-top-15" v-if="item.answer_type == 3">
								<ty-image-video
									:list="[{video_url:item.answer_video_url,image_url:item.answer_video_cover_img}]"
									width="206" height="206" space="15" column="3">
								</ty-image-video>
							</view>
							<!-- 语音 -->
							<view class="margin-tb-15" v-if="item.answer_type == 1">
								<view class="flex align-center yyBox" @click="playAudio(item.answer_audio_url)">
									<view class="icon-icon-tongzhi iconfont text-48 text-ff margin-right-40"></view>
									<view class="text-36 text-ff text-bold">
										{{item.answer_audio_second}}”
									</view>
								</view>
							</view>
							<!-- 文件 -->
							<view class="margin-tb-15" v-if="item.answer_type == 4">
								<view class="text-28 text-2f9 line-40" style="text-decoration: underline;"
									v-for="(item2,index2) in item.answer_data_url" :key="index2"
									:class="index2 == 0 ? '' : 'margin-top-25'" @click="downFile(item2.file_url)">
									{{item2.file_name}}
								</view>
							</view>
						</view>
					</view>
				</block>

				<!-- 评价 -->
				<view class="evaBox margin-top-40 padding-bottom-50" v-if="reviewData.id">
					<view class="text-32 line-45 text-33 text-bold">
						评价
					</view>
					<view class="flex align-center margin-top-20">
						<view class="headerImg">
							<image :src="reviewData.head_img" mode="aspectFill" class="width-100p height-100p">
							</image>
						</view>
						<view class="flex-one margin-lr-15">
							<view class="text-33 text-bold text-24 margin-bottom-10">{{reviewData.nick_name}}</view>
							<view class="text-24 text-98">{{reviewData.review_time}}</view>
						</view>
						<view class="flex align-center">
							<image src="/static/home/star1.png" v-for="(item,index) in reviewData.star" :key="index"
								class="starImg margin-left-10"></image>
							<image src="/static/home/star0.png" v-for="(item,index) in (5-reviewData.star)" :key="index"
								class="starImg margin-left-10"></image>
						</view>
					</view>
					<view class="padding-left-95 margin-top-20 text-28 text-33 line-40">{{reviewData.content}}</view>
				</view>
			</view>
		</view>

		<view class="flex justify-end bottomBox">
			<block v-if="status == 1">
				<view class="btn1" @click="cancelOrder">取消订单</view>
				<view class="btn2 margin-left-20" @click="tapPay">支付</view>
			</block>
			<block v-if="status == 2 && detailData.append_times < 3">
				<view class="btn2 margin-left-20" @click="go('/pages/expert/addQues?id='+id)">追加提问</view>
			</block>
			<block v-if="status == 3">
				<view class="btn2 margin-left-20" @click="go('/pages/expert/evaluate?id=' + id)">去评价</view>
			</block>
			<block v-if="status == 4 || status == 5 || status == 6">
				<view class="btn1" @click="delOrder">删除订单</view>
			</block>
		</view>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				id: '',
				status: 3, //1--待支付  2-进行中  3-待评价  4-已完成 5-已退款 6-已取消
				detailData: {},
				askList: [],
				reviewData: {},
				showPage: false,
				// 自动取消订单倒计时
				cancelSecond: '',
				cancelSecond2: '',
				// 自动取消订单倒计时定时器
				cancelSecondIntervalTimer: '',
				goOnTimer: null, //进行中的倒计时
			}
		},
		onLoad(options) {
			this.id = options.id;
		},
		onShow() {
			this.getPageData();
		},
		onUnload() {
			// 清除计时器
			clearInterval(this.cancelSecondIntervalTimer)
			clearInterval(this.goOnTimer)
			if (innerAudioContext.src) {
				innerAudioContext.stop()
			}
		},
		onHide() {
			// 清除计时器
			clearInterval(this.cancelSecondIntervalTimer)
			clearInterval(this.goOnTimer)
			if (innerAudioContext.src) {
				innerAudioContext.stop()
			}
		},

		methods: {
			getPageData() {
				this.rq.getData('fire/api/Fire/getOrderDetail', {
					order_id: this.id
				}).then(res => {
					if (res.code == 0) {
						this.detailData = res.data.detail;
						this.askList = res.data.order_ask;
						// 倒计时取消订单
						if (this.detailData.cancel_second > 0) {
							this.resetTime(this.detailData.cancel_second)
						}
						if (this.detailData.status == 2) {
							this.resetTimer2(this.detailData.end_second)
						}
						this.status = res.data.detail.status;
						this.reviewData = res.data.order_review;
						this.showPage = true;
					}
				})
			},
			/**
			 * 重置倒计时
			 */
			resetTime(second) {
				this.cancelSecondIntervalTimer = setInterval(res => {
					if (second > 0) {
						let time = this.cn.timeSplit(second, 2)
						this.cancelSecond = time.minute + ":" + time.second;
						--second;
					} else {
						this.cancelSecond = '00:00';
						clearInterval(this.cancelSecondIntervalTimer)
						// 取消订单
						this.rq.getData('fire/api/Fire/submitCancelOrder', {
							order_id: this.id
						}).then(res => {
							if (res.code == 0) {
								this.getPageData()
							}
						})
					}
				}, 1000)
			},
			// 进行中的倒计时
			resetTimer2(second) {
				this.goOnTimer = setInterval(() => {
					if (second > 0) {
						let time = this.cn.timeSplit(second, 3)
						this.cancelSecond2 = time.hour + ":" + time.minute + ":" + time.second;
						--second;
					} else {
						this.cancelSecond2 = '00:00:00';
						clearInterval(this.goOnTimer)
						// 结束订单
						this.rq.getData('fire/api/Fire/submitEndOrder', {
							order_id: this.id
						}).then(res => {
							if (res.code == 0) {
								this.getPageData()
							}
						})
					}
				}, 1000)
			},
			// 播放录音
			playAudio(url) {
				if (innerAudioContext.src) {
					innerAudioContext.stop()
				}
				if (url) {
					innerAudioContext.src = url;
					innerAudioContext.play();
				}
			},
			// 下载文件
			downFile(file) {
				console.log(8777, file)
				uni.setClipboardData({
					data: file,
					showToast: false,
					success: () => {
						this.cn.alert('已复制成功，请在浏览器中访问并下载资料')
					}
				})
			},
			// 取消订单
			cancelOrder() {
				this.cn.confirm('确认取消订单吗?').then(r => {
					if (r.confirm) {
						this.rq.getData('fire/api/Fire/submitCancelOrder', {
							order_id: this.id
						}).then(res => {
							if (res.code == 0) {
								this.getPageData()
							}
						})
					}
				})
			},
			// 支付
			tapPay() {
				this.rq.getData('fire/api/Fire/submitOrderRePay', {
					order_id: this.id
				}).then(res => {
					if (res.code == 0) {
						if (res.data.need_pay == 1) { //需要支付
							this.cn.requestPayment(res.data.pay_params, 1).then(res => {
								this.getPageData()
							})
						} else { //不需要支付
							this.cn.alert(res.msg).then(res => {
								this.getPageData()
							})
						}
					}
				})
			},
			// 删除订单
			delOrder() {
				this.cn.confirm('确认删除订单吗?').then(r => {
					if (r.confirm) {
						this.rq.getData('fire/api/Fire/submitOrderDelete', {
							order_id: this.id
						}).then(res => {
							if (res.code == 0) {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.pageMain {
		width: 100vw;
		min-height: 100vh;
		background: #fff;
		padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.topBox {
		background: #2F97FF;
		border-radius: 0rpx 0rpx 30rpx 30rpx;
	}

	.expertHeader {
		width: 110rpx;
		height: 110rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.line15 {
		width: 100vw;
		height: 15rpx;
		background: #f5f5f5;
	}

	.msgBox1 {
		padding: 25rpx 20rpx 30rpx;
		border-radius: 10rpx;
		border: 1rpx solid #DDDDDD;
		width: 100%;
		box-sizing: border-box;
	}

	.bottomBox {
		width: 100vw;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 15rpx 30rpx calc(15rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.btn1,
	.btn2 {
		width: 180rpx;
		text-align: center;
		line-height: 64rpx;
		border-radius: 36px;
		font-size: 28rpx;
		font-weight: bold;
	}

	.btn1 {
		border: 2rpx solid #CCCCCC;
		color: #777777;
	}

	.btn2 {
		border: 2rpx solid #2F97FF;
		color: #2F97FF;
	}

	.replyBox {
		width: 100%;
		padding: 25rpx 20rpx 25rpx;
		background: #F0F8FF;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.replyHeader {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.yyBox {
		width: 260rpx;
		height: 100rpx;
		background: #2F97FF;
		border-radius: 50rpx;
		padding-left: 35rpx;
		box-sizing: border-box;
	}

	.headerImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.starImg {
		width: 30rpx;
		height: 30rpx;
	}
</style>
