<template>
	<view class="page">
		<navBar :backType="navBarTitle" :title="navBarTitle?navBarTitle:dType?'定制我家的吸顶灯':'定制我家的主灯'" :back="true"
			color="black" background="white" />
		<image class="topImg" :src="picBase + topPic" mode=""></image>

		<view class="cen">
			<image class="water" src="/static/index/water.png" mode=""></image>
			<image class="halfC" src="/static/index/halfCircle_275.png" mode=""></image>
			{{dType?'定制我家的吸顶灯':'定制我家的主灯'}}
		</view>

		<view class="parmasBox">
			<view class="con">
				<view class="top">
					<view class="item">
						<view class="name">
							户型
						</view>
						<view class="des">
							{{mainPreviewInfo.hx.value}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							系列
						</view>
						<view class="des">
							{{mainPreviewInfo.xl.value}}
						</view>
					</view>
				</view>

				<view class="part2">
					包含灯型
				</view>
				<view class="type">
					<view class="top2">
						<view class="label">
							客厅灯
						</view>
						<view class="num">
							{{mainPreviewInfo.kt.length}}盏
						</view>
					</view>
					<view class="list">
						<view class="item" v-for="(item,index) in mainPreviewInfo.kt">
							<image :src="picBase+item.image[0]" mode=""></image>
							<view class="name">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>

				<view class="type">
					<view class="top2">
						<view class="label">
							餐厅灯
						</view>
						<view class="num">
							{{mainPreviewInfo.ct.length}}盏
						</view>
					</view>
					<view class="list">
						<view class="item" v-for="(item,index) in mainPreviewInfo.ct">
							<image :src="picBase+item.image[0]" mode=""></image>
							<view class="name">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>

				<view class="type">
					<view class="top2">
						<view class="label">
							卧室灯
						</view>
						<view class="num">
							{{mainPreviewInfo.ws.length}}盏
						</view>
					</view>
					<view class="list">
						<view class="item" v-for="(item,index) in mainPreviewInfo.ws">
							<image :src="picBase+item.image[0]" mode=""></image>
							<view class="name">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>

				<view class="type">
					<view class="top2">
						<view class="label">
							阳台灯
						</view>
						<view class="num">
							{{mainPreviewInfo.yt.length}}盏
						</view>
					</view>
					<view class="list">
						<view class="item" v-for="(item,index) in mainPreviewInfo.yt">
							<image :src="picBase+item.image[0]" mode=""></image>
							<view class="name">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="parmasBox" v-if="navBarTitle&&(shareCon.name||shareCon.phone||shareCon.address||shareCon.remark)">
			<view class="con">
				<view class="top" style="border-bottom: 0; padding-bottom: 0rpx;">
					<view class="item" v-if="shareCon.name">
						<view class="name">
							收货人
						</view>
						<view class="des">
							{{shareCon.name}}
						</view>
					</view>
					<view class="item" v-if="shareCon.phone">
						<view class="name">
							电话
						</view>
						<view class="des">
							{{shareCon.phone}}
						</view>
					</view>
					<view class="item" v-if="shareCon.address">
						<view class="name">
							收货地址
						</view>
						<view class="des">
							{{shareCon.address}}
						</view>
					</view>
					<view class="item" v-if="shareCon.remark">
						<view class="name">
							备注
						</view>
						<view class="des">
							{{shareCon.remark}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <image v-if="!navBarTitle" @click="back" src="/static/index/backBtnImg.png" mode="" class="rule_img"></image> -->
		<view class="bot" v-if="!navBarTitle">
			<view class="left">
				<view class="price">
					￥{{mainPreviewInfo.price?mainPreviewInfo.price.toFixed(0):'0'}}
				</view>
				<image src="/static/index/arrDown.png" mode=""></image>
			</view>
			<view class="right">
				<button open-type="share" v-if="orderSuc" class="btn" :plain="true">
					分享
				</button>
				<view class="btn" v-else @click="openInfoBox">
					确认配置
				</view>
				<view class="btn" v-if="!navBarTitle" @click="back" style="margin-left: 20rpx;">
					返回
				</view>
			</view>

		</view>
		<u-popup :show="showFixInfo" @close="close" @open="open" round='10'>
			<view class="topBar" style="">
				<view class="left">
				</view>
				<view class="cen">
					信息填写
				</view>
				<view class="close" @click="closeInfoBox">
					<u-icon name="close"></u-icon>
				</view>
			</view>
			<view class="pupopCon">
				<view class="item">
					<view class="label">
						收货人
					</view>
					<u--input clearable placeholder="请输入收货人" border="surround" v-model="name"
						@change="change"></u--input>
				</view>
				<view class="item">
					<view class="label">
						电话
					</view>
					<u--input clearable placeholder="请输入电话" border="surround" v-model="phone"
						@change="change"></u--input>
				</view>
				<view class="item" style="margin-bottom: 24rpx;height: auto;">
					<view class="label">
						收货地址
					</view>
					<u--textarea v-model="addr" placeholder="请输入收货地址"></u--textarea>
				</view>

				<view class="item" style="margin-bottom: 64rpx;height: auto;">
					<view class="label">
						备注
					</view>
					<u--input clearable placeholder="请输入备注" border="surround" v-model="remark"
						@change="change"></u--input>
				</view>
				<button open-type="share" class="orderBtn" :plain="true">
					确认下单
				</button>
			</view>
		</u-popup>
		<u-modal :show="showShare" title="请长按图片保存小程序二维码至相册以分享" @confirm="showShare=false" content='' confirmText="关闭"
			confirmColor="#F7790C">
			<image :src="picBase+linkPic" mode="" style="width: 500rpx;height: 500rpx;"></image>
		</u-modal>
	</view>
</template>

<script>
	import {
		postOrderReq,
		getOrderDetailReq,
		getWxQrCodeReq
	} from '@/api/test/index.js'
	import {
		getBannerDataReq,
	} from '@/api/index/index.js'
	export default {
		components: {},
		data() {
			return {
				topPic: '',
				showShare: false,
				linkPic: '',

				picUrl: this.$picUrl,
				picBase: this.$picBase,
				showFixInfo: false,
				mainPreviewInfo: {
					hx: '',
					xl: '',
					kt: [],
					ct: [],
					ws: [],
					yt: [],
				},

				name: '',
				phone: '',
				addr: '',
				remark: '',

				orderId: '',
				ids: '',

				pConfig: -1,

				shareCon: null,

				orderSuc: false,

				navBarTitle: '',
				dType: 0
			}
		},
		async onLoad(o) {
			let res11 = await getBannerDataReq()
			if (res11.code == 0) {
				console.log('2-----图片配置数据', res11);

				this.topPic = res11.data.find((item, index) => {
					return item.title == '主灯'
				}).head_image
				console.log('2-----图片配置数据this.topPic', this.topPic);
			} else {
				this.$toast(res11.message)
			}

			// if (getApp().dType) {
			// 	this.dType = getApp().dType
			// }
			this.dType = Number(o.dType)
			// this.dType = 5
			// o.orderId = '414048c0fb21eec5f7ddf87d0961847e'
			console.log('this.dType', this.dType);

			if (o.orderId) {
				this.orderId = o.orderId
				this.navBarTitle = '首页'
				console.log('o.orderId', o.orderId);

				let res = await getOrderDetailReq({
					orderId: o.orderId
				})
				if (res.code == 0) {
					console.log('邀请订单详情返回值-主灯123: ', res);
					this.shareCon = res.data

					this.mainPreviewInfo.hx = res.data.config.house_type_data
					this.mainPreviewInfo.xl = res.data.config.series_data
					this.mainPreviewInfo.kt = res.data.config.lamp.living_room.list
					this.mainPreviewInfo.ct = res.data.config.lamp.dining_room_light.list
					this.mainPreviewInfo.ws = res.data.config.lamp.bedroom_lamp.list
					this.mainPreviewInfo.yt = res.data.config.lamp.balcony_light.list


					console.log('邀请订单详情返回值-主灯---处理后: ', this.mainPreviewInfo);
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			} else {
				this.pConfig = getApp().pConfig

				console.log('this.pConfig', this.pConfig);

				this.mainPreviewInfo = getApp().mainPreviewInfo

				let tempids = []
				getApp().mainPreviewInfo.kt.forEach((item, index) => {
					tempids.push(item.id)
				})
				getApp().mainPreviewInfo.ct.forEach((item, index) => {
					tempids.push(item.id)
				})
				getApp().mainPreviewInfo.ws.forEach((item, index) => {
					tempids.push(item.id)
				})
				getApp().mainPreviewInfo.yt.forEach((item, index) => {
					tempids.push(item.id)
				})
				tempids.forEach((item, index) => {
					if (index == tempids.length - 1) {
						this.ids += item
					} else {
						this.ids += (item + ',')
					}
				})

				console.log('预览配置信息', this.mainPreviewInfo);
				console.log('所有灯id', this.ids);
			}
		},
		async onShareAppMessage(params) {
			if (params.from === 'button' || params.from === 'menu') {
				if (params.from === 'button' || params.from === 'menu') {
					let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
					// if (!this.name) {
					// 	return this.$toast('请填写收货人')
					// }
					// if (!this.phone) {
					// 	return this.$toast('请填写电话')
					// }
					// if (!phoneReg.test(this.phone)) {
					// 	return this.$toast('手机号格式不正确')
					// }

					// if (!this.addr) {
					// 	return this.$toast('请填写收货地址')
					// }
					// if (!this.remark) {
					// 	return this.$toast('请填写备注')
					// }
					let res = await postOrderReq({
						address: this.addr,
						phone: this.phone,
						name: this.name,
						remark: this.remark,
						config_id: this.pConfig,
						type: this.dType ? this.dType : 2,

						lamp_id: this.ids,
					})
					if (res.code == 0) {
						console.log('提交订单返回值: ', res);
						this.orderId = res.data.orderId
						this.showFixInfo = false
						return {
							title: this.dType ? '定制我家的吸顶灯' : '定制我家的主灯',
							imageUrl: this.picBase + this.topPic,
							path: '/pages/index/customMian/index?orderId=' + this.orderId + "&dType=" + this.dType,
							mpId: this.$appId,
							type: this.$shareType,
						}

					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				}


				// return {
				// 	title: '定制我家的主灯',
				// 	imageUrl: this.picUrl + '/static/other/noMain_img3.png',
				// 	path: '/pages/index/customMian/index?orderId=' + this.orderId + "&dType=" + this.dType,
				// 	mpId: this.$appId,
				// 	type: this.$shareType,
				// }
			}
		},
		methods: {
			openInfoBox() {
				this.showFixInfo = true
			},
			closeInfoBox() {
				this.showFixInfo = false
			},
			back() {
				uni.navigateBack()
			},
			async postOrder() {
				let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.name) {
					return this.$toast('请填写收货人')
				}
				if (!this.phone) {
					return this.$toast('请填写电话')
				}
				if (!phoneReg.test(this.phone)) {
					return this.$toast('手机号格式不正确')
				}
				if (!this.addr) {
					return this.$toast('请填写收货地址')
				}
				if (!this.remark) {
					return this.$toast('请填写备注')
				}

				console.log('主灯/吸顶灯下单参数', {
					address: this.addr,
					phone: this.phone,
					name: this.name,
					remark: this.remark,
					config_id: this.pConfig,
					type: 5
				});
				let res = await postOrderReq({
					address: this.addr,
					phone: this.phone,
					name: this.name,
					remark: this.remark,
					// config_id: this.mainPreviewInfo.hx.id + ',' + this.mainPreviewInfo.xl.id,
					config_id: this.pConfig,
					// lamp_id: this.ids,
					type: 5
				})
				if (res.code == 0) {
					console.log('提交订单返回值: ', res);
					this.$toast('提交成功')

					this.orderId = res.data.orderId
					this.showFixInfo = false

					this.orderSuc = true
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>