<template>
	<view class="content">
		<view class="content-textarea">
			<view class="">标题</view>
			<view class="">270</view>
		</view>
		<view class="content-textarea">
			<view class="">联系人</view>
			<view class="">270</view>
		</view>
		<view class="content-textarea">
			<view class="">联系电话</view>
			<view class="">270</view>
		</view>
		<view class="content-textarea">
			<view class="">维修时间</view>
			<view class="">270</view>
		</view>
		<view class="content-textarea">
			<view class="">维修地址</view>
			<view class="">270</view>
		</view>
		<view class="content-textarea">
			<view class="">预算金额</view>
			<view class="">270</view>
		</view>
		<view class="content-photograph">
			<view class="">上传图片
			</view>
			<view class="content-photograph-photo">
				<image class="content-photograph-photo-img" src="../../static/logo.png" mode="" v-for="(v ,index) in 5"
					:key="index"></image>
			</view>
		</view>
		<view class="content-frequency">
			<view class="">
				上传视频
			</view>
			<view v-for="(v ,index) in 2" :key="index">
				<video id="myVideo"
					src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
					@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu controls
					:show-fullscreen-btn='false'></video>
			</view>
		</view>
		<view class="content-voice">
			<view class="">
				语音描述
			</view>
			<view class="content-voice-audio" @click="doPlay()">

			</view>
		</view>
		<view class="content-remarks">
			<view class="">
				备注
			</view>
			<u--textarea v-model="value1" placeholder="请输入内容" disabled></u--textarea>
		</view>
		<view class="content-reject" v-if="subscript == 1">
			<view class="">
				<text></text>订单已驳回
			</view>
			<u--textarea v-model="value1" placeholder="请输入内容" disabled></u--textarea>
		</view>
		<view class="content-reject" v-if="subscript == 3 && subs== '1'">
			<view class="">
				<text style="background:#2C66FF"></text>该订单已提交退款,等待商家致电……
			</view>
			<u--textarea v-model="value1" placeholder="请输入内容" disabled></u--textarea>
		</view>
		<view class="content-reject" v-if="subscript == 3 && subs== '2'">
			<view class="">
				<text></text>该订单已退款
			</view>
			<u--textarea v-model="value1" placeholder="请输入内容" disabled></u--textarea>
		</view>
	</view>
	</view>
</template>

<script>
	import apiBaseConfig from '@/config/index.js';
	export default {
		data() {
			return {
				imgBgUrl: apiBaseConfig.imgBgUrl,
				globalData: getApp().globalData,
				scrollTopHeader: 0,
				subscript: '0',
				subs: '1'
			};
		},
		onLoad(option) {
			this.subscript = option.subscript
			this.subs = option.subs
			this.timer = null;
			this.innerAudioContext = uni.createInnerAudioContext();
			// 监听音频进入可以播放状态的事件
			this.innerAudioContext.onCanplay(() => {
				this.innerAudioContext.duration;
				// 延迟大约300ms以上才能获取音频总时长
				setTimeout(() => {
					// 获取音频总时长
					this.duration = this.formatSeconds(this.innerAudioContext.duration);
				}, 300)
			});
			// 监听音频播放
			this.innerAudioContext.onPlay(() => {
				// 获取当前音频的播放时间
				this.timer = setInterval(() => {
					this.currentTime = this.formatSeconds(this.innerAudioContext.currentTime);
				}, 1000)

			})
		},
		methods: {
			// 播放
			doPlay() {
				if (!this.innerAudioContext.src) {
					// 音频地址
					this.innerAudioContext.src =
						"https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3";
				}
				this.innerAudioContext.play();
			},
			// 暂停
			doPause() {
				this.innerAudioContext.pause();
				// 清除定时器
				clearInterval(this.timer);
			},
			// 将秒转换成03:30格式
			formatSeconds(value) {
				let minute = parseInt(value / 60);
				let second = parseInt(value % 60);
				if (minute < 10) {
					minute = "0" + minute
				}
				if (second < 10) {
					second = "0" + second
				}
				return minute + ":" + second;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0rpx 40rpx 160rpx;

		&-textarea {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 10rpx;
			border-bottom: 1rpx solid #E7E7E7;

			>view {
				font-size: 26rpx;
				font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
				font-weight: 400;
				color: #333333;
			}
		}

		&-photograph {
			padding: 30rpx 0rpx;

			&-photo {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;

				&-img {
					margin-top: 20rpx;
					margin-right: 20rpx;
					width: 210rpx;
					height: 210rpx;
				}
				&-img:nth-child(3n){
					margin-right: 0rpx;
				}
			}
		}

		&-frequency {
			padding: 30rpx 0rpx;

			>view {
				display: flex;

				>video {
					margin-top: 20rpx;
					width: 373rpx;
					height: 210rpx;
				}
			}
		}

		&-voice {
			padding: 30rpx 0rpx;

			&-audio {
				margin-top: 20rpx;
				background: #F5F5F5;
				border-radius: 6rpx;
				height: 68rpx;
			}
		}

		&-remarks {
			>view {
				margin-bottom: 20rpx;
			}
		}

		&-reject {
			margin-top: 30rpx;

			>view {
				display: flex;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #333333;

				>text {
					width: 6rpx;
					height: 36rpx;
					background: #FD0000;
					border-radius: 3rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>
