<template>
	<view>
		<view class="d-flex a-center j-sb form-item-height paddding-x-three">
			<view class="form-item-name">标题<span class="must-sign">*</span></view>
			<view class="input-box">
				<input type="text" placeholder="请输入标题">
			</view>
		</view>
		<view class="d-flex a-center j-sb form-item-height">
			<view class="form-item-name">联系人<span class="must-sign">*</span></view>
			<view class="input-box">
				<input type="text" placeholder="请输入联系人姓名">
			</view>
		</view>
		<view class="d-flex a-center j-sb form-item-height">
			<view class="form-item-name">联系电话<span class="must-sign">*</span></view>
			<view class="input-box">
				<input type="text" placeholder="请输入联系人手机号">
			</view>
		</view>
		<view class="d-flex a-center j-sb form-item-height">
			<view class="form-item-name">维修时间<span class="must-sign">*</span></view>
			<view class="input-box d-flex a-center" @click="showTime = true">
				<u-datetime-picker ref="datePicker" :formatter="formatter" v-model="time" :show="showTime" mode="date"
					@confirm="handleConfirmDate" @cancel="handleClose"></u-datetime-picker>
				<input type="text" v-model="time" placeholder="请选择时间">
				<u-icon name="arrow-down-fill" color="#000000" size="28"></u-icon>
			</view>
		</view>
		<view class="d-flex a-center j-sb form-item-height">
			<view class="form-item-name">维修地址<span class="must-sign">*</span></view>
			<view class="input-box">
				<input type="text" placeholder="请填写维修地址">
			</view>
		</view>
		<view class="d-flex a-center j-sb form-item-height">
			<view class="form-item-name">预算金额<span class="must-sign">*</span></view>
			<view class="input-box">
				<input type="text" placeholder="请填写预算金额">
			</view>
		</view>
		
		<view>
			<view>
				<view class="d-flex j-sb a-center form-item-height-only">
					<view class="form-item-name">上传图片</view>
					<view class="form-tips">一下内容三选一必填</view>
				</view>
				<view class="paddding-x-three">
					<comUpload></comUpload>
				</view>
			</view>
			<view>
				<view class="d-flex j-sb a-center form-item-height-only">
					<view class="form-item-name">上传视频</view>
				</view>
				<view class="paddding-x-three">
					<comUpload :acceptType="acceptType"></comUpload>
				</view>
			</view>
			<view>
				<view class="d-flex j-sb a-center form-item-height-only">
					<view class="form-item-name">语音描述</view>
				</view>
				<!-- <view class="paddding-x-three margin-y-two">
					<free-audio startPic='../../static/play.png' endPic='../../static/stop.png' audioId='audio1'
						:url='path' @delete="handleDelete"></free-audio>
				</view> -->
				<view class="paddding-x-three d-flex j-center " @click="showPopup = true">
					<view class="voice-box d-flex a-center j-center">
						<u-icon name="mic" color="#2979ff" size="32"></u-icon>
						<view>添加语音描述</view>
					</view>
				</view>
				<u-popup :show="showPopup" @close="handleClosePopup" @open="handleOpenPopup">
					<view class="padding-y-two">
						<recordCom></recordCom>
					</view>
				</u-popup>
			</view>
			<view class="paddding-x-three">
				<view class="form-item-name margin-y-two">备注</view>
				<u--textarea v-model="remark" height="128" placeholder="备注说明"></u--textarea>
			</view>
		</view>
	</view>
</template>

<script>
	import freeAudio from '@/components/chengpeng-audio/free-audio.vue'
	import recordCom from '@/components/record/record.vue'
	export default {
		name: "form",
		components: {
			freeAudio,
			recordCom,
		},
		data() {
			return {
				showTime: false, //时间选择器是否显示
				time: undefined, //时间选择器的值
				remark: '',
				acceptType: 'video',
				path: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
				voicePath: '',
				showPopup: false
			};
		},
		//暂停所有音频（一般用于页面切换时停止正在播放的音频）
		onUnload() { //普通页面在 onUnload 生命周期中执行
			uni.$emit('stop')
		},
		onHide() { //tabBar页面在onHide生命周期中执行
			uni.$emit('stop')
		},
		created() {
			let that = this
			// 时间格式化默认值
			that.time = uni.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd');
		},
		methods: {
			// 时间选择器确认事件
			async handleConfirmDate(e) {
				// value:返回所选时间戳，mode:当前模式
				let that = this
				that.showTime = false
				// 时间格式化
				const timeFormat = uni.$u.timeFormat;
				let timeValue = await timeFormat(e.value, 'yyyy-mm-dd');
				that.time = timeValue
			},
			//时间选择器的关闭按钮事件
			handleClose() {
				this.showTime = false
			},
			//弹窗打开事件
			handleOpenPopup() {
				let that = this
				// console.log('open');
			},
			//弹窗关闭事件
			handleClosePopup() {
				let that = this
				that.showPopup = false
			},
			// 删除语音
			handleDelete() {
				console.log('删除')
				// const recorderManager = uni.getRecorderManager()
				// console.log(recorderManager,'大数据可能')
			},
			//时间选择器格式化
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
		}
	}
</script>

<style>
	@import url("@/css/form.css");

	::v-deep .u-border {
		border: 0 !important;
		background: #F5F5F5 !important;
	}

	::v-deep .u-upload__wrap__preview {
		margin: 0 6rpx 10rpx 0 !important;
	}
</style>
