<template>
	<view class="container">
		<Navbar title="帮助下单" canBack></Navbar>
		<!-- <u-navbar title="确认订单" autoBack :safeAreaInsetTop="true" placeholder fixed></u-navbar> -->
		<view class="orderCss">
			<view class="addressBarCss" @click="selectAddress">
				<view class="leftCss">
					<u-icon name="map" size="25"></u-icon>
				</view>
				<view class="centerCss w50" v-if="hasAds">
					<view class="margin-top">
						联系人：{{khxx.khmc || ""}}
					</view>
					<view class="text-gray margin-top-sm text-sm w100 overflow-one-lines">
						详细地址：{{khxx.khlxdzsf }}{{khxx.khlxdzs }}{{khxx.khlxdzq }}{{khxx.khlxdzjd }}{{khxx.khlxdzxxdz }}
					</view>
				</view>
				<view class="centerCss" v-else>
					请选择地址
				</view>
				<view class="rightCss">
					<u-icon name="arrow-right" size="20"></u-icon>
				</view>
			</view>
			<view class="shopCardCss">
				<view class="flex align-center">
					<u-icon name="/static/images/home/shopTitle.png" size="20"></u-icon>
					<view class="margin-left-xs">
						{{userInfo && userInfo.fssczmc || ""}}
						<!-- 利民液化气供应站 -->
					</view>
				</view>
				<view class="flex justify-between align-center">
					<view class="flex flex-direction w100" v-if="hasShop">
						<view class="flex justify-between margin-top">
							<view class="">
								<u-image width="80px" height="80px" :src="gasDetail.image"></u-image>
							</view>
							<view class="flex flex-direction justify-between margin-left-sm w50">
								<view class="">
									{{gasDetail.fMc}}
								</view>
								<view class="text-sm text-gray">
									{{gasDetail.fMs || ""}}
								</view>
								<view class="themeColor text-lg text-bold">
									￥{{gasDetail.fJg}}
								</view>
							</view>
							<view class="flex flex-direction justify-between align-end">
								<view class="margin-top-xs" @click="openPopup('edit')">
									<u-icon name="arrow-right" size="20"></u-icon>
								</view>
								<u-number-box v-model="gasDetail.num" max="100"
									@change="gasNumberChange"></u-number-box>
							</view>
						</view>
						<view class="flex justify-between align-center margin-top">
							<view class="">
								订单备注
							</view>
							<view class="text-gray">
								<u-input inputAlign="right" maxlength="30" v-model="gasDetail.ddbz" border="none"
									clearable placeholder="请填写您的备注信息"></u-input>
							</view>
						</view>
					</view>
					<view class="flex justify-between align-center w100 margin-top" v-else>
						<view class="w100">
							<view class="text-center">
								请添加气瓶
							</view>
						</view>
						<view class="margin-top-xs" @click="openPopup('add')">
							<u-icon name="plus-circle-fill" color="#EA5504" size="20"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<view class="moneyCardCss">
				<view class="flex justify-between flex-direction">
					<view class="flex">
						提取方式<text class="text-gray">(必选)</text>
					</view>
					<view class="flex justify-between margin-top">
						<view class="">
							{{ ddPsfs.get(psfs) || ""}}
						</view>
						<view class="" @click="openExtract">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<view class="moneyCardCss">
				<view class="flex justify-between">
					<view class="">
						商品总金额
					</view>
					<view class="themeColor">
						￥{{gasDetail.total}}
					</view>
				</view>
				<view class="flex justify-between margin-top">
					<view class="text-gray">
						商品金额
					</view>
					<view class="">
						￥{{gasDetail.fJg || 0}}
					</view>
				</view>
				<!-- <view class="flex justify-between margin-top">
					<view class="text-gray">
						气瓶押金
					</view>
					<view class="">
						￥0.00
					</view>
				</view> -->
			</view>
			<view class="bomBarCss">
				<view class="themeColor themeFs">
					￥{{gasDetail.total || 0}}
				</view>
				<view class="" @click="submitOrder">
					<u-button color="#EA5504">立即下单</u-button>
				</view>
			</view>
		</view>
		<u-picker :show="extractShow" :columns="columns" @confirm="handleExtract" @cancel="extractShow = false"
			closeOnClickOverlay @close="extractShow = false"></u-picker>
		<popupShop ref="popupShopRef" :hxData="gasDetail" @shopData="getShopdata"></popupShop>
	</view>
</template>

<script>
import {dd_zflx, dd_fkfs, dd_psfs, dd_zffs, dd_ddly, sys_sf, dd_ddzt} from "@/utils/enums";
	import {
		mergeRecursive
	} from "@/utils/ruoyi";
	import storage from '@/utils/storage'
	import {
		mapGetters
	} from 'vuex'
	import popupShop from './components/popupShop.vue'
	export default {
		components: {
			popupShop
		},
		props: {

		},
		data() {
			return {
        ddDdzt: new Map(Object.values(dd_ddzt).map(item => [item.code, item.info])),
        ddPsfs: new Map(Object.values(dd_psfs).map(item => [item.code, item.info])),
				gasDetail: {
					num: 1,
					total: 0,
					ddbz: ""
				},
				gasNumber: 1,
				hasAds: false,
				hasShop: false,
				khxx: {},
				columns: [
					['1', '2']
				],
				psfs: '1',
				extractShow: false,
			}
		},
		computed: {

		},
		onLoad(data) {
			uni.$on('khxxData', (khxx) => {
				this.hasAds = true;
				this.khxx = khxx;
				console.log("获取客户信息", JSON.stringify(this.khxx));
			});
			this.getStaffQplxPage()
		},
		onUnload() {
			uni.$off('khxxData')
		},
		async onShow() {
			console.log("userInfo", this.userInfo);
			// console.log('this.$store',JSON.parse(JSON.stringify(this.$store.state.user.userInfo)));
			// await this.getGasDetail();
			// this.$store.dispatch('GetDefaultAds').then(async (res) => {
			// 	console.log("是否默认地址",res);
			// 	if(res === 'Default'){
			// 		await this.getAdsDetail();
			// 	}
			// }).catch(e => {
			// 	console.log("查询地址错误", e);
			// });
		},
		computed: {
			...mapGetters({
				adsId: 'adsId'
			}),
			...mapGetters({
				userInfo: 'userInfo'
			})
		},
		methods: {
			// 查询气瓶类型列表 默认第一个为当前气瓶
			getStaffQplxPage() {
				this.$api.orderApi.getStaffQplxPage().then(async res => {
					if (res.code === 200) {
						let data = res.value;
						console.log("气瓶类型列表", data);
						let currentGas = data.fqplxList[0];
						let JsonParse = JSON.parse(currentGas.fTp);
						let images = await this.$getPhotoUrl(JsonParse[0].response.fileId);
						this.hasShop = true;
						this.gasDetail.qplxID = currentGas.id;
						this.gasDetail.fMc = currentGas.fMc;
						this.gasDetail.fMs = currentGas.fMs;
						this.gasDetail.fJg = currentGas.fJg;
						this.gasDetail.total = currentGas.fJg;
						this.gasDetail.image = images;
						console.log("热销气瓶", currentGas);
					}
				})
			},
			openPopup(type) {
				console.log(type);
				if (type === 'add') {
					this.$refs.popupShopRef.open();
				} else {
					this.$refs.popupShopRef.edit(this.gasDetail);
				}
			},
			openExtract() {
				this.extractShow = true;
			},
			// 选择提取方式
			handleExtract(e) {
				console.log(e);
				let value = e.value[0];
				this.psfs = value;
				this.extractShow = false;
			},
			getShopdata(data) {
				console.log("获取shopData", data);
				this.hasShop = true;
				this.gasDetail = {
					...data
				};
			},
			gasNumberChange(e) {
				let number = e.value;
				let price = this.gasDetail.fJg;
				// this.qplist.sl = number;
				this.gasDetail.total = this.$calcUtil.ride(price, number)
			},
			selectAddress() {
				let adsData = JSON.stringify(this.khxx);
				uni.navigateTo({
					url: 'improveCustomer?adsData=' + adsData
				})
			},
			async submitOrder() {
				if (Object.keys(this.khxx).length == 0) {
					uni.$u.toast('未选择配送地址');
					return false
				}
				if (!this.hasShop) {
					uni.$u.toast('未选择气瓶');
					return false
				}
				if (!this.psfs) {
					uni.$u.toast('未选择配送方式');
					return false
				}
				// 组装提交数据
				let helpData = {
					khxx: this.khxx, //客户信息
					spxx: {
						qplxID: this.gasDetail.qplxID,
						ddbz: this.gasDetail.ddbz,
						num: this.gasDetail.num
					},
					psfs: this.psfs
				}
				console.log('待提交数据', JSON.parse(JSON.stringify(helpData)));
				this.$modal.confirm('确认提交订单？', '提示').then(async () => {
					const result = await this.$api.orderApi.helpCreateOrder(helpData);
					let {
						code,
						value
					} = result;
					if (code === 200) {
						uni.$u.toast('下单成功');
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/home/appList/helpPlaceAnOrder/orderSuccessful?datas=" +
									JSON.stringify(value)
							})
						}, 500)
						console.log("result", result);

					}
				}).catch(() => {
					console.log("取消");
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderCss {
		margin: 10px;

		.orderTopBarCss {
			background: #EA5504;
			height: 40px;
			border-radius: 10px 10px 0 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.addressBarCss {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 10px;
			background: #ffffff;
			padding: 10px 10px 20px 10px;

			.leftCss {
				width: 10%;
			}

			.centerCss {
				width: 80%;
				min-height: 50px;
				margin-left: 5px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
			}

			.rightCss {
				width: 10%;
			}
		}

		.addressBarCss {
			background-color: #fff;
			position: relative;
		}

		.addressBarCss:before {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			height: 5px;
			background: repeating-linear-gradient(-45deg, #A82831, #A82831 20%, transparent 0, transparent 25%, #254A81 0, #254A81 45%, transparent 0, transparent 50%);
			background-size: 200px;
			content: "";
		}

		.shopCardCss {
			margin-top: 10px;
			padding: 20px 10px;
			border-radius: 15px;
			background: #ffffff;
		}

		.moneyCardCss {
			margin-top: 10px;
			padding: 20px 10px;
			border-radius: 15px;
			background: #ffffff;
		}

		.bomBarCss {
			position: absolute;
			width: 100%;
			bottom: 0;
			left: 0;
			padding: 0 20px;
			background: #fff;
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		/deep/.bomBarCss .u-button {
			border-radius: 10px !important;
			width: 120px;
		}
	}
</style>
