<template>
	<view class="page" v-if="showPage">
		<view class="pageMain">
			<view class="padding-30 flex">
				<view class="headerImg margin-right-15">
					<image :src="expertData.head_img" mode="aspectFill" class="width-100p height-100p block"></image>
				</view>
				<view class="flex-one">
					<view class="flex align-center justify-between">
						<view class="text-34 text-bold line-50 text-33">{{expertData.name}}</view>
						<view class="text-32 text-ff85 text-bold text-price">{{expertData.price}}</view>
					</view>
					<view class="text-26 text-cut-one text-909298 margin-top-10">{{expertData.brief}}</view>
				</view>
			</view>
			<view class="line15"></view>
			<view class="box">
				<view class="text-30 text-33 text-bold line-40 margin-bottom-15">
					咨询内容
				</view>
				<view class="zxBox">
					<textarea v-model="content" placeholder="描述您的要咨询的内容" placeholder-class="text-aa" class="text-30"
						maxlength="500" @input="inputContent"></textarea>
					<view class="margin-top-20 text-right text-26 text-aa">
						{{contentLength}}/500
					</view>
				</view>
				<view class="margin-top-40">
					<view class="margin-bottom-15">
						<text class="line-40 text-30 text-33 text-bold">相关图片</text>
						<text class="line-40 text-24 text-aa">（最多5张）</text>
					</view>
					<ty-image-images-upload :count="5" :video-count="0" @imageChange="imageChange"
						:image_list="image_list">
					</ty-image-images-upload>
				</view>
				<view class="padding-top-25">
					<view class="margin-bottom-15">
						<text class="line-40 text-30 text-33 text-bold">相关视频</text>
					</view>
					<ty-image-images-upload :count="0" :video-count="1" @videoChange="videoChange"
						:video_list="video_list">
					</ty-image-images-upload>
				</view>
				<view class="padding-top-25">
					<view class="margin-bottom-15">
						<text class="line-40 text-30 text-33 text-bold">相关文件</text>
						<text class="line-40 text-24 text-aa">（最多5个）</text>
					</view>
					<view class="margin-bottom-30">
						<view v-for="(item,index) in file_list" :key="index" class="flex align-center"
							:class="index == 0 ? '' : 'margin-top-20'">
							<view class="flex-one text-28 text-4b8 line-40" style="text-decoration:underline">
								{{item.file_name}}
							</view>
							<view class="text-28 text-e62 margin-left-30 line-40" @click="delFile(index)">删除</view>
						</view>
					</view>
					<view class="margin-top-30" v-if="file_list.length < 5" @click="upLoadFile">
						<image src="/static/home/uploadFile.png" class="fileUpImg"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="border-top-f5 bottomBox flex align-center justify-between">
			<view>
				<text class="text-28">实付：</text>
				<text class="text-24">￥</text>
				<text class="text-32 text-bold">{{expertData.price}}</text>
			</view>
			<view class="text-30 text-ff text-bold text-center payBtn" @click="tapPay">去付款</view>
		</view>
	</view>
</template>

<script>
	import file from '@/components/hzjc/utils/functions/file.js'
	export default {
		data() {
			return {
				expertData: {},
				showPage: false,
				id: '', //专家id
				content: '', //咨询内容
				contentLength: 0,
				image_list: [], //相关图片
				video_list: [], //相关视频
				file_list: [], //相关文件
				canTapPay: true, //支付防连点
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getPageData()
		},
		methods: {
			getPageData() {
				this.rq.getData('fire/api/Fire/getOrderReady', {
					expert_id: this.id
				}).then(res => {
					if (res.code == 0) {
						this.expertData = res.data.expert;
						this.showPage = true;
					}
				})
			},
			inputContent(e) {
				if (e.detail.cursor < 500) {
					this.contentLength = e.detail.cursor;
				} else {
					this.contentLength = 500
				}
			},
			imageChange(e) {
				this.image_list = e.image_list;
			},
			videoChange(e) {
				this.video_list = e.video_list;
			},
			upLoadFile() {
				wx.chooseMessageFile({
					count: 5 - this.file_list.length,
					type: 'file',
					success: (r) => {
						uni.showLoading({
							title: '上传中...'
						})
						console.log(1007, r)
						var tempFiles = r.tempFiles;
						let files = []

						tempFiles.forEach(value => {
							// 原文件名称
							let localFileName,
								// 上传后文件名称
								fileName
							// 获取源文件名称
							localFileName = value.name
							if (localFileName) {
								fileName = localFileName
							} else {
								let suffix = this.cn.getSuffix(localFileName)
								fileName = this.cn.getRandomStr(10) + suffix
							}
							let file = {
								path: value.path,
								fileName: fileName
							}
							files.push(file)
						})

						// 上传到OSS
						file.uploadFilesToOss(files, [], {}, true, 'file').then(res => {
							uni.hideLoading()
							console.log(1005, res)
							res.forEach((item, index) => {
								var n = item.split("/");
								this.file_list.push({
									file_name: n[n.length - 1],
									file_url: item
								})
							})

						}).catch(res => {
							uni.hideLoading()
							console.log(1006, res)
						})
					},
					fail: (ff) => {
						uni.hideLoading()
						console.log(1008, ff)
					}
				})
			},
			delFile(i) {
				this.file_list.splice(i, 1)
			},
			tapPay() {
				if (this.canTapPay) {
					if (this.content == '') {
						this.cn.alert('请描述您的要咨询的内容');
						return;
					}
					this.canTapPay = false;
					this.rq.getData('fire/api/Fire/orderSubmit', {
						expert_id: this.id,
						ask_content: this.content,
						ask_img: this.image_list.join(','),
						ask_video: this.video_list.length ? this.video_list[0].video_url : '',
						ask_data: JSON.stringify(this.file_list)
					}).then(res => {
						if (res.code == 0) {
							if (res.data.need_pay == 1) { //需要支付
								this.cn.requestPayment(res.data.pay_params, 1).then(res => {
									uni.redirectTo({
										url: '/pages/expert/orderList'
									}).then(() => {
										this.canTapPay = true;
									})
								}).catch(res => {
									uni.redirectTo({
										url: '/pages/expert/orderList'
									}).then(() => {
										this.canTapPay = true;
									})
								})
							} else { //不需要支付
								this.cn.alert(res.msg).then(res => {
									uni.redirectTo({
										url: '/pages/expert/orderList'
									}).then(() => {
										this.canTapPay = true;
									})
								})
							}
						} else {
							this.canTapPay = true;
						}
					})
				}



			}
		}
	}
</script>

<style scoped>
	.pageMain {
		min-height: 100vh;
		width: 100vw;
		background: #fff;
	}

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

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

	.box {
		width: 100vw;
		padding: 25rpx 30rpx calc(140rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

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

	.zxBox textarea {
		width: 100%;
		height: 180rpx;
	}

	.fileUpImg {
		width: 160rpx;
		height: 160rpx;
	}

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

	.payBtn {
		width: 220rpx;
		height: 80rpx;
		background: #2F97FF;
		border-radius: 40rpx;
		line-height: 80rpx;
	}
</style>
