<template>
	<uv-popup ref="popup" 
	:round="30" 
	bgColor="#f7f7f7">
		<view class="content">

			<!-- 配送方式选择 -->
			<view class="delivery-method">
				<view class="title">配送方式</view>
				<view class="options">
					<view 
						:class="['option', { active: deliveryMethod == '0' }]"
						@click="selectDeliveryMethod('0')"
					>
						<!-- <view class="icon">🚚</view>
						<view class="text">外卖配送</view> -->

						<view class="icon">📦</view>
						<view class="text">线上发货</view>
					</view>
					<!-- <view 
						:class="['option', { active: deliveryMethod == '1' }]"
						@click="selectDeliveryMethod('1')"
					>
						<view class="icon">🏪</view>
						<view class="text">到店自提</view>
					</view> -->
				</view>
			</view>

			<!-- 地址（仅线上发货显示） -->
			<view class="address" @click="openAddress" v-if="deliveryMethod == '0'">
				<image src="/static/image/address/selectIcon.png" mode=""></image>
				<view>
					{{ address.name }}
				</view>
				<view class="">
					{{ address.addressDetail }}
				</view>
				<view class="icon">
					<uv-icon size="30rpx" name="arrow-right"></uv-icon>
				</view>
			</view>

			<!-- 店铺地址（仅到店自提显示） -->
			<!-- <view class="store-address" v-if="deliveryMethod === '1'">
				<image src="/static/image/address/storeIcon.png" mode=""></image>
				<view>
					<view class="store-name">店铺地址</view>
					<addressSpot
                    :address="shopInfo.address"
                    :latitude="shopInfo.latitude"
                    :longitude="shopInfo.longitude"
                    />
				</view>
			</view> -->

			<!-- 优惠劵 -->
			<!-- <view style="padding: 0 20rpx;
			background-color: #fff;">
				<uv-cell 
				icon="coupon" 
				title="优惠劵"
				iconStyle="font-size: 34rpx;"
				rightIconStyle="font-size: 34rpx;"
				:value="couponText"
				@click="$refs.couponPopup.open('bottom')"
				isLink>
				</uv-cell>
			</view> -->
			
			
			<!-- <view class="payInfoMessage">
				<view style="font-weight: 900;">
					下单说明：
				</view>
				<view class="">
					租金：从物品确认收货开始计算￥{{ configList.depositPrice }}元/天
				</view>
				<view class="">
					押金：将按照面积计算每平方厘米￥1元
				</view>
			</view> -->

			<!-- 费用明细 -->
			<view class="expense-detail">
				<view class="title">
					费用明细
				</view>
				<view class="detail" v-if="totalPrice">
					<view>
						<view class="">
							应付款：
						</view>
						<view class="" v-if="deliveryMethod === '0'">
							￥{{ totalPrice }}
						</view>
                        <view class="" v-if="deliveryMethod === '1'">
                            ￥{{ totalPrice - priceMap.pei_money }}
                        </view>
					</view>
					
					<view v-if="deliveryMethod === '0' && priceMap.pei_money > 0">
						<view class="">
							配送费
						</view>
						<view class="">
							
						</view>
						<view class="">
							￥{{ priceMap.pei_money }}
						</view>
					</view>
					
					<view 
					:key="index"
					v-for="(item, index) in priceList">
						<view class="">
							{{ item.title }}
						</view>
						<view class="">
							￥{{ item.price }}
						</view>
						<view class="">
							x{{ item.num }}
						</view>
					</view>
				</view>
				
			
			</view>

			<!-- 提交按钮 -->
			<view class="submit-btn">
				<view class="r" @click="orderPay">
					{{ submiitTitle }}
				</view>
			</view>

		</view>

		<!-- <uv-popup ref="couponPopup" 
		:round="30">
			<couponList 
			ref="couponList" 
			height="60vh" 
			:depositPrice="depositPrice"
			:washPrice="washPrice"
			:rentPrice="rentPrice"
			:useType="0"
			@select="selectCoupon" />
		</uv-popup> -->

		<uv-popup ref="addressPopup" :round="30">
			<addressList ref="addressList" height="60vh" @select="selectAddress" />
		</uv-popup>
	</uv-popup>
</template>

<script>
	import addressList from '../../address/addressList.vue'
	// import couponList from './couponList.vue'
	import { mapState } from 'vuex'
	export default {
		components: {
			addressList,
			// couponList,
		},
		props: {
			submiitTitle: {
				default: '立即下单',
				type: String,
			},
			totalPrice : {//总金额
				default : 0
			},
			priceList : {//商品列表
				default : []
			},
		},
		computed : {
			...mapState(['configList', 'priceMap']),
		},
		data() {
			return {
				address: {
					name: '请选择联系人',
					addressDetail: '',
				},
				addressTotal: 0,
				coupon : {
					// price : 0,
				},
				couponText : '请选择',
				deliveryMethod: '0',
				shopInfo : {},
			}
		},
		methods: {
			// 打开
			open() {
				this.$refs.popup.open('bottom')
				// this.$refs.couponList.getData()
				// this.$refs.couponPopup.close()

				// 获取地址列表
				this.$refs.addressList.getAddressList().then(res => {
					this.addressTotal = res.total
					if (this.addressTotal != 0) {
						this.address = res.records[0]
					}
				})
			},
			// 计算优惠金额
			getPrice(){
				// 减免押金
				if(this.coupon.couponFlag && 
				this.coupon.couponCondition <= this.depositPrice){
					return {
						coupon : this.coupon.couponPrice,
						price : (this.price - this.coupon.couponPrice).toFixed(2),
					}
				}
				// 减免租金
				if(this.coupon.leaseCouponFlag && 
				this.coupon.leaseCouponCondition <= this.rentPrice){
					return {
						coupon : this.coupon.leaseCouponPrice,
						price : (this.price - this.coupon.leaseCouponPrice).toFixed(2),
					}
				}
				
				return {}
			},
			// 选择优惠劵
			selectCoupon(e){
				this.couponText = e.couponName
				this.coupon = e
				this.$refs.couponPopup.close()
			},
			// 关闭
			close() {
				this.$refs.popup.close()
			},
			// 打开选择地址
			openAddress() {
				if (this.addressTotal == 0) {
					this.$refs.popup.close()
					return uni.navigateTo({
						url: '/pages_order/mine/address?type=back'
					})
				}
				this.$refs.addressPopup.open('bottom')
			},
			// 选择地址
			selectAddress(e) {
				this.address = e
				this.$refs.addressPopup.close()
			},
			orderPay() {
				let submitData = {
					couponId : this.coupon.id,
					deliveryMethod: this.deliveryMethod
				}
				
				// 线上发货需要地址
				if (this.deliveryMethod === '0') {
					if (!this.address.id) {
						return uni.showToast({
							title: '请选择收货地址',
							icon: 'none'
						})
					}
					submitData.addressId = this.address.id
				}
				
				this.$emit('submit', submitData)
			},
			selectDeliveryMethod(method) {
				this.deliveryMethod = method
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		max-height: 80vh;
		overflow: hidden;
		overflow-y: auto;
		padding-top: 30rpx;

		.delivery-method {
			padding: 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;

			.title {
				font-weight: 600;
				margin-bottom: 20rpx;
			}

			.options {
				display: flex;
				gap: 20rpx;

				.option {
					padding: 15rpx 30rpx;
					background-color: #F6F6F6;
					border-radius: 10rpx;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
					border: 2rpx solid transparent;

					&.active {
						background-color: $uni-color;
						color: #fff;
						border-color: $uni-color;
					}

					.icon {
						margin-right: 10rpx;
					}

					.text {
						font-size: 28rpx;
					}
				}
			}
		}

		.address {
			display: flex;
			padding: 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin: 20rpx;
			}

			view {
				margin: 20rpx;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap; //溢出不换行
			}

			.icon {
				margin-left: auto;
			}
		}
		
		.store-address {
			display: flex;
			padding: 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin: 20rpx;
			}

			view {
				margin: 20rpx;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap; //溢出不换行
			}

			.store-name {
				font-weight: 600;
			}

			.store-detail {
				color: #717171;
				margin-top: 10rpx;
			}
		}
		
		.payInfoMessage{
			line-height: 50rpx;
			padding: 20rpx;
			background-color: #fff;
			font-size: 28rpx;
		}

		.expense-detail {
			padding: 30rpx;
			background-color: #fff;
			font-size: 28rpx;

			.title {
				font-weight: 600;
			}

			.detail {
				background-color: #F6F6F6;
				color: #717171;
				margin: 10rpx 0;
				padding: 10rpx 20rpx;
				line-height: 50rpx;
				&>view{
					display: flex;
					justify-content: space-between;
					&>view{
						&:nth-child(1){
							flex: 4;
							overflow:hidden; //超出的文本隐藏
							text-overflow:ellipsis; //溢出用省略号显示
							white-space:nowrap; //溢出不换行
						}
						&:nth-child(2){
							flex: 2;
							text-align: right;
						}
						&:nth-child(3){
							text-align: right;
							flex: 1;
						}
					}
				}
			}
			.coupon{
				text-align: center;
				color: #5c5;
			}
		}

		.submit-btn {
			width: 600rpx;
			height: 80rpx;
			color: #fff;
			border-radius: 40rpx;
			font-size: 28rpx;
			margin: 20rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1rpx solid $uni-color;
			overflow: hidden;

			.l {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				color: $uni-color;
			}

			.r {
				background: $uni-color;
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>