<template>
	<view style="background-color: #f7f8faff;">


		<view style="display: flex;justify-content: space-evenly; margin: 64rpx 0; ">
			<!-- <u-tabs :list="list1" @change="click"></u-tabs> -->
			<view class="" style=" opacity: 0.4000000059604645;
 color: #000000e6;
 font-size: 32rpx;
 font-weight: 600;" :class="active == 1 ? 'activeB' : ''" @click="click(1)">
				发布求租
			</view>
			<view class="" style=" opacity: 0.4000000059604645;
 color: #000000e6;
 font-size: 32rpx;
 font-weight: 600;" :class="active == 2 ? 'activeB' : ''" @click="click(2)">
				发布求购
			</view>
		</view>
		<view class="box">
			<view class="" style="padding: 32rpx;position: relative;">
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
					<u-form-item label="设备信息" labelWidth="200rpx" prop="userInfo.name" borderBottom ref="item1"
						@click="goChoose">
						<u--input v-model="model1.userInfo.name" disabled disabledColor="#ffffff" placeholder="请选择设备"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
						<view class="posBox" style="top:32rpx; left:32rpx">
							<image src="../../static/Group 193@2x.png" style="width: 40rpx;height: 24rpx;" mode=""></image>
						</view>
					</u-form-item>
					<u-form-item label="设备品牌" labelWidth="200rpx" prop="userInfo.brand_name" borderBottom
						@click="goLogo" ref="item1">
						<u--input v-model="model1.userInfo.brand_name" disabled disabledColor="#ffffff"
							placeholder="请选择" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="设备型号" labelWidth="200rpx" prop="userInfo.xh_name" borderBottom @click="goNum"
						ref="item1">
						<u--input v-model="model1.userInfo.xh_name" disabled disabledColor="#ffffff" placeholder="请选择"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="所在地区" labelWidth="200rpx" prop="userInfo.region" borderBottom ref="item1"
						@click="goMap">
						<u--input v-model="model1.userInfo.region" disabled disabledColor="#ffffff" placeholder="请选择"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
						<view class="posBox" style=" left:32rpx" :style="active == 2 ? 'top:54.5%' : 'top:46.5%;'">
							<image src="../../static/Group 193@2x.png" style="width: 40rpx;height: 24rpx;" mode=""></image>
						</view>
					</u-form-item>
					<u-form-item v-if="nav == '发布求租'" label="租赁时间" labelWidth="200rpx" prop="userInfo.day" borderBottom
						ref="item1">
						<u--input v-model="model1.userInfo.day" border="none" @click="showTime = true"></u--input>
						<view class="posBox" style="top:60.5%; left:32rpx">
							<image src="../../static/Group 193@2x.png" style="width: 40rpx;height: 24rpx;" mode=""></image>
						</view>
					</u-form-item>
					<u-form-item label="设备预算" labelWidth="200rpx" prop="userInfo.price" labelPosition="top" borderBottom
						ref="item1">
						<u--input type="number" v-model="model1.userInfo.price" border="none"></u--input>
					</u-form-item>

				</u--form>
				<u-datetime-picker :show="showTime" v-model="model1.userInfo.day" mode="date"></u-datetime-picker>
			</view>
		</view>
		<view class="bom">
			<u-button text="确认发布" style="color: white;" color="linear-gradient(to right, #46BAEC,#2F67D3)"
				@click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showTime: false,
				active: 1,
				list1: [{
					name: '发布求租',
				}, {
					name: '发布求购',
				}, ],
				model1: {
					userInfo: {
						brand_name: '',
						name: '',
						xh_name: '',
						region: '',
						price: 0,
						day: '',
						lat: '',
						lng: ''
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				nav: "",
			}
		},
		onLoad(option) {
			console.log(option);
			if (option && option.val) {
				if (option.val === "4") {
					console.log(option.val);
					this.active = 2
					this.nav = '发布求购'
				} else {
					this.nav = '发布求租'
				}
			}
			let info = JSON.parse(option && option.info)
			this.model1.userInfo = info
			this.model1.userInfo.name = info.brand.name

		},
		onShow() {
			let pagearr = getCurrentPages(); //获取应用页面栈
			let currentPage = pagearr[pagearr.length - 1]; //获取当前页面信息
			console.log('option:', currentPage) //获取页面传递的信息
			this.model1.userInfo.category_id = currentPage.$vm.category_id
			this.model1.userInfo.name = currentPage.$vm.name
			this.model1.userInfo.brand_id = currentPage.$vm.brand_id
			this.model1.userInfo.brand_name = currentPage.$vm.brand_name
			this.model1.userInfo.xinghao_id = currentPage.$vm.xh_id
			this.model1.userInfo.xh_name = currentPage.$vm.xh_name
			console.log(this.model1.userInfo);
		},
		methods: {
			goMap() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						console.log(that.model1);
						that.model1.userInfo.region = res.address
						that.model1.userInfo.lat = res.latitude
						that.model1.userInfo.lng = res.longitude
					}
				});

			},
			submit() {
				let p = {
					category_id: this.model1.userInfo.category_id,
					brand_id: this.model1.userInfo.brand_id,
					xinghao_id: this.model1.userInfo.xinghao_id,
					day: this.model1.userInfo.day,
					price: this.model1.userInfo.price,
					region: this.model1.userInfo.region.slice(6,9),
					province: this.model1.userInfo.region.slice(0, 3),
					city: this.model1.userInfo.region.slice(3, 6),
					address: this.model1.userInfo.region
				}
				uni.$u.http.post(this.nav == '发布求购' ? '/api/equip/add_equip_buy' : '/api/equip/add_equip_zu', p).then(
					res => {

						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						let pagearr = getCurrentPages(); //获取应用页面栈
						let currentPage = pagearr[pagearr.length - 1]; //获取当前页面信息
						console.log('option:', currentPage) //获取页面传递的信息
						currentPage.$vm.category_id = ''
						currentPage.$vm.name = ''
						currentPage.$vm.brand_id = ''
						currentPage.$vm.brand_name = ''
						currentPage.$vm.xh_id = ''
						currentPage.$vm.xh_name = ''
						if (res.code == 1) {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500)

						}

					}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				}).finally(() => {
					uni.reLaunch({
						url: 'pages/index/buy'
					})
				})
			},
			click(item) {
				this.active = item
				if (item == 2) {
					this.nav = '发布求购'
				} else {
					this.nav = '发布求租'
				}
				this.model1.userInfo = {
					brand_name: '',
					name: '',
					xh_name: '',
					region: '',
					price: '',
					day: '',
					province: '',
					city: '',
					address: ''
				}
			},
			goChoose() {
				uni.navigateTo({
					url: '/pages/subPages/more?val=2'
				})
			},
			goLogo() {
				uni.navigateTo({
					url: '/pages/sellAndBuy/logo'
				})
			},
			goNum() {
				uni.navigateTo({
					url: '/pages/sellAndBuy/chooseNum'
				})
			}
		}
	}
</script>

<style scoped>
	.box {
		border-radius: 16rpx;
		background: #ffffffff;
		/* margin-bottom: 32rpx; */
		margin: 24rpx;
	}
.posBox{
	width: 40rpx;
	height: 24rpx;
	position: absolute;
}
	.bom {
		margin-bottom: 16rpx;
		position: fixed;
		bottom: 40rpx;
		width: 92%;
		margin-left: 4%;
	}

	.activeB {
		color: #000000e6 !important;
		opacity: 1 !important;
		font-size: 44rpx !important;
		font-weight: 600 !important;
		padding-bottom: 15rpx;
		border-bottom: 1px solid #3375D8;
	}
</style>