<template>
	<view>
		<view class="content">
			<view class="content-form">
				<u--form :label-style="{'font-size':'26rpx'}" label-position="top" labelWidth="150" :model="formInfo"
					ref="form" :rules="rules">
					<u-form-item required label="标题" prop="title" borderBottom :customStyle="{
			  					'flex-direction': 'row !important'}">
						<u--input fontSize="24rpx" placeholderStyle="color: #999" inputAlign="right" border="none"
							v-model="formInfo.title" placeholder="请填写标题">
						</u--input>
					</u-form-item>
					<u-form-item required label="联系人" prop="linkman" borderBottom :customStyle="{
								'flex-direction': 'row !important',}">
						<u--input fontSize="24rpx" placeholderStyle="color: #999" inputAlign="right" border="none"
							v-model="formInfo.linkman" placeholder="请输入联系人姓名">
						</u--input>
					</u-form-item>
					<u-form-item required label="联系电话" prop="phone" borderBottom :customStyle="{
								'flex-direction': 'row !important',
							}">
						<u--input fontSize="24rpx" placeholderStyle="color: #999" inputAlign="right" border="none"
							v-model="formInfo.phone" placeholder="请输入联系人手机号">
						</u--input>
					</u-form-item>
					<u-form-item required label="维修时间" prop="repairTime" borderBottom :customStyle="{
								'flex-direction': 'row !important',
							}">
						<view class="input-box d-flex a-center" @click="showTime = true">
							<u-datetime-picker ref="datePicker" :formatter="formatter" v-model="formInfo.repairTime"
								:show="showTime" mode="date" @confirm="handleConfirmDate" @cancel="handleClose">
							</u-datetime-picker>
							<input type="text" v-model="formInfo.repairTime" placeholder="请选择时间">
							<u-icon name="arrow-down-fill" color="#000000" size="28"></u-icon>
						</view>
						</u--input>
					</u-form-item>
					<u-form-item required label="维修地址" prop="repairAddress" borderBottom :customStyle="{
								'flex-direction': 'row !important',
							}">
						<u--input fontSize="24rpx" placeholderStyle="color: #999" inputAlign="right" border="none"
							v-model="formInfo.repairAddress" placeholder="请填写维修地址">
						</u--input>
					</u-form-item>
					<u-form-item required label="预算金额" prop="budget" borderBottom :customStyle="{
								'flex-direction': 'row !important',
							}">
						<u--input fontSize="24rpx" placeholderStyle="color: #999" inputAlign="right" border="none"
							v-model="formInfo.budget" placeholder="请填写预算金额">
						</u--input>
					</u-form-item>
					<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="">
								<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="">
								<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>
					<u-form-item label="备注" prop="remark">
						<u--textarea maxlength="-1" :customStyle="{
			  						marginTop: '20rpx',
			  						background: '#F5F5F5',
			  						border: 'none'
			  					}" v-model="formInfo.remark" placeholder="备注说明" height="128rpx"></u--textarea>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view v-if="statusBtn == -1" class="submit-btn" @click="handlePublish">发布需求</view>
		<view class="submit-btn" v-else-if="statusBtn == 0" @click="handleUpdateForm">确认修改</view>
		<view class="submit-btn" v-else-if="statusBtn == 1" @click="handleUpdateForm">重新发布</view>
	</view>
</template>

<script>
	import {
		addOrderFunction
	} from '@/api/system/index.js'
	import freeAudio from '@/components/chengpeng-audio/free-audio.vue'
	import recordCom from '@/components/record/record.vue'
	export default {
		name: "form",
		components: {
			freeAudio,
			recordCom,
		},
		props: {
			statusBtn: Number,
			detailData: Object
		},
		data() {
			return {
				showTime: false, //时间选择器是否显示
				acceptType: 'video',
				path: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
				voicePath: '',
				showPopup: false,
				// formInfo: {
				// 	title: undefined, //标题
				// 	linkman: undefined, //联系人
				// 	phone: undefined, //联系电话
				// 	repairTime: undefined, //维修时间
				// 	repairAddress: undefined, //维修地址
				// 	budget: undefined, //预算金额
				// 	remark: undefined, //备注说明
				// },
				formInfo: {},
				rules: {
					title: {
						type: 'string',
						required: true,
						message: '请填写标题',
						trigger: ['blur', 'change']
					},
					linkman: {
						type: 'string',
						required: true,
						message: '请填写备注说明',
						trigger: ['blur', 'change']
					},
					repairAddress: {
						type: 'string',
						required: true,
						message: '请填写备注说明',
						trigger: ['blur', 'change']
					},
					budget: {
						type: 'string',
						required: true,
						message: '请填写备注说明',
						trigger: ['blur', 'change']
					},
				}

			};
		},
		watch: {
			detailData: {
				handler(newVal, oldVal) {
					let that = this
					if (newVal) {
						that.formInfo = that.detailData
					} else {
						that.resetForm()
					}
				},
				immediate: true,
				deep: true
			}
		},
		//暂停所有音频（一般用于页面切换时停止正在播放的音频）
		onUnload() { //普通页面在 onUnload 生命周期中执行
			uni.$emit('stop')
		},
		onHide() { //tabBar页面在onHide生命周期中执行
			uni.$emit('stop')
		},
		created() {
			let that = this
			// 时间格式化默认值
			if (!that.formInfo.repairTime) {
				that.formInfo.repairTime = uni.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd');
			}
		},

		methods: {
			//确认修改和重新发布按钮
			handleUpdateForm(){
				this.$emit('submit', this.formInfo)
			},
			async handleAdd() {
				let that = this
				const data_back = await addOrderFunction(that.formInfo)
				console.log(data_back,'提交')
				const {code} = data_back
				if(code == 200){
					uni.showToast({
						title:'发布成功!',
						icon:'none',
						duration:2000,
						success() {
							setTimeout(()=>{
								that.resetForm()
							},1000)
						}
					})
				}
			},
			//发布需求按钮
			handlePublish() {
				let that = this
				this.$refs.form.validate().then(res => {
					if(res){
						that.handleAdd()
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
				// this.$emit('submit', this.formInfo)
			},
			// 时间选择器确认事件
			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.formInfo.repairTime = 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
			},
			resetForm() {
				this.formInfo = {
					title: '', //标题
					linkman: '', //联系人
					phone: '', //联系电话
					repairTime: undefined, //维修时间
					repairAddress: '', //维修地址
					budget: '', //预算金额
					remark: '测试默认值', //备注说明
					fileBoList:[
						{
							url:'https://img1.baidu.com/it/u=567782244,1695500002&fm=253&fmt=auto&app=138&f=JPEG?w=753&h=500',//地址
							fileType:'picture',//文件类型video
						},
						
					],
					// id:null,
					userId:1,//用户id
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		&-form {
			margin: 30rpx 20rpx;
			width: calc(100% - 20rpx * 2);

			/deep/ .u-form {
				width: calc(100% - 20rpx * 2);
				margin: 0rpx 20rpx;
			}
		}
	}

	@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>
