<template>
	<view>
		<view class="address-section" @click="selectAddr">
			<view class="order-content">
				<image :src="staticUrl + 'user/addr.png'" mode="" class="img"></image>
				<view class="cen" v-if="addressData.fullName">
					<view class="top">
						<text class="name">{{ addressData.fullName }}</text>
						<text class="mobile">{{ addressData.mobile }}</text>
					</view>
					<text class="address">{{ addressData.threeAdcode | filterAddr }}{{ addressData.addressDetails }}{{ addressData.addressSupplement }}</text>
				</view>
				<view class="cen" v-else>
					<text>请设置收货地址</text>
				</view>
				<text class="iconfont icon-right">&#xe770;</text>
			</view>
			<image class="a-bg" :src="staticUrl + 'user/addr_bg.png'"></image>
		</view>

		<view class="goods-section bg-w">
			<!-- 店铺 -->
			<view class="g-header">
				<image class="logo" :src="orderInfo.storeInfo.logoImage"></image>
				<text class="name">{{orderInfo.storeInfo.name }}</text>
			</view>
			<!-- 商品 -->
			<view class="g-box">
				<view class="g-item">
					<view class="g-item-top">
						<image :src="orderInfo.goodsSku.mainImage || orderInfo.goodsInfo.mainImage"></image>
						<view class="right flex flex-column">
							<text class="title line">{{ orderInfo.goodsInfo.titleName }}</text>
							<text class="spec">{{ orderInfo.goodsSku.skuName }}</text>
							<view class="price-box">
								<text class="price color-red blod">￥{{ orderInfo.goodsSku.skuPrice }}</text>
								<text class="number">x{{ orderInfo.number }}</text>
							</view>
						</view>
					</view>
					<view class="g-cell">
						<text class="label">商品类型</text>
						<view class="flex flex-align-center">
							<text class="order-txt" v-if="orderInfo.orderType === 1">普通商品</text>
							<text class="order-txt" v-if="orderInfo.orderType === 2">精品商品</text>
							<text class="order-txt" v-if="orderInfo.orderType === 3">进货商品</text>
							<text class="order-txt" v-if="orderInfo.orderType === 11">新人大礼</text>
							<text class="order-txt" v-if="orderInfo.orderType === 12">限时秒杀</text>
							<text class="order-txt" v-if="orderInfo.orderType === 13">今日特价</text>
							<text class="order-txt" v-if="orderInfo.orderType === 14">拼团</text>
							<text class="order-txt" v-if="orderInfo.orderType === 15">积分大送</text>
							<text class="order-txt" v-if="orderInfo.goodsInfo.annualCard === 1">年卡产品</text>
						</view>
					</view>
					<view class="g-cell" v-if="orderInfo.orderType === 3">
						<text class="label">进价百分比</text>
						<text class="txt">{{orderInfo.goodsInfo.boutiqueBuying}}%</text>
					</view>
					<view class="g-cell" v-if="orderInfo.goodsInfo.bonusIntegral">
						<text class="label">获得积分</text>
						<text class="txt">{{((parseInt(((orderInfo.goodsInfo.bonusIntegral/100*orderInfo.goodsSku.skuPrice * orderInfo.number))*100)/100).toFixed(2))*orderInfo.number}}</text>
					</view>
					<!-- 普通商品才可以使用支付组合 -->
					<view class="g-cell" v-if="orderInfo.orderType === 1">
						<text class="label">支付组合</text>
						<block v-if="orderInfo.goodsInfo.paymentCombination === 1">
							<view class="flex flex-column flex-grow">
								<text class="txt">余额{{orderInfo.goodsInfo.paymentRmb}}%,绿色积分{{100-orderInfo.goodsInfo.paymentRmb}}%</text>
								<text class="txt">余额：{{((orderInfo.goodsInfo.paymentRmb/100*orderInfo.goodsSku.skuPrice)*orderInfo.number).toFixed(2)}}元
								绿色积分：{{(((100-orderInfo.goodsInfo.paymentRmb)/100*orderInfo.goodsSku.skuPrice)*orderInfo.number/greenPrice).toFixed(6)}}({{(((100-orderInfo.goodsInfo.paymentRmb)/100*orderInfo.goodsSku.skuPrice)*orderInfo.number).toFixed(4)}}元)</text>
							</view>
							<!-- <switch 
								color="#F8D247"
								style="transform: scale(0.6); margin-right: -16rpx;"
								@change="switchChange()"/> -->
<!--							<switch -->
<!--								color="#F8D247"-->
<!--								style="transform: scale(0.6); margin-right: -16rpx;"-->
<!--								@change="switchChange()"/>-->
						</block>
						<text class="txt" v-else>无</text>
					</view>
					<view class="g-cell delivery-cell" v-if="deliveryMode.length > 0">
						<text class="label">配送方式</text>
						<block v-if="orderInfo.goodsInfo.deliveryNo === 2">
							<text class="txt">{{orderInfo.deliveryNote}}</text>
							<block v-if="orderInfo.goodsInfo.annualCard === 1">
								<view class="annualNote" @click.stop.prevent="toggleAnnualNote">
									<text class="annualNote-text">配送说明</text>
									<text class="iconfont annualNote-arrow" :class="{ open: showAnnualNote }">&#xe770;</text>
								</view>
								<view class="annualNote-panel" v-if="showAnnualNote" @click.stop>
									年卡产品固定每月进行配送，共12次，每月可单独修改收货人信息
								</view>
							</block>
							<view class="flex flex-align-center select" v-else @click="showPopup()">
								<text class="color-b3">{{orderInfo.deliveryName}}</text>
								<text class="iconfont font38 color-b9">&#xe770;</text>
							</view>
						</block>
						<text class="txt" v-else>无需配送</text>
					</view>
				</view>
				<!-- 普通商品才可以使用优惠券 -->
				<view class="other" v-if="orderInfo.orderType == 1 && orderInfo.discountUserList && orderInfo.discountUserList.length > 0">
					<view class="g-cell" @click="showDiscountPopup()">
						<text class="label">店铺优惠</text>
						<text class="txt">{{orderInfo.discountName}}</text>
						<view class="flex flex-align-center select">
							<text class="color-red" v-if="orderInfo.discountAmount">-¥{{orderInfo.discountAmount}}</text>
							<text class="iconfont font38 color-b9">&#xe770;</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text class="font24 color-b9">共{{orderInfo.number}}件，</text>
				<text class="color-b3 font28">合计：</text>
				<view class="flex flex-column">
					<view class="color-red">
						<text class="price">{{ totalPayAmount.toFixed(2) }}</text>
						<text class="price-tip">元</text>
					</view>
					<text class="color-b6 font26" v-if="integral">{{integral}}积分</text>
				</view>
			</view>
			<text class="submit" @click="submit">提交订单</text>
		</view>

		<!-- 店铺优惠 -->
		<uni-popup ref="discountPopup" type="bottom">
			<view class="popup">
				<text class="font32 color-b3">店铺优惠</text>
				<radio-group class="cell" @change="radioChangeDiscount">
					<view class="flex flex-between font28 cell-item" v-for="(item, i) in discountList" :key="i">
						<text>{{item.titleName}}</text>
						<text class="grow" v-if="item.discountAmount">¥{{item.discountAmount}}</text>
						<radio :checked="item.checked" :value="item.id" color="#F8D247" class="radio"/>
					</view>
				</radio-group>
				<button type="primary" class="bg-base btn" @click="confirmDiscount">完成</button>
			</view>
		</uni-popup>

		<!-- 配送方式 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<text class="font32 color-b3">配送方式</text>
				<radio-group class="cell" @change="radioChange">
					<view class="flex flex-between font28 cell-item" v-for="(item, i) in deliveryMode" :key="i">
						<text>{{item.name}}</text>
						<text class="grow">{{item.note}}</text>
						<radio :checked="item.checked" :value="item.status" color="#F8D247" class="radio"/>
					</view>
				</radio-group>
				<button type="primary" class="bg-base btn" @click="confirmMode">完成</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import url from "@/common/http/url.js"
	// import { sendRequestJson } from "@/common/http/api.js"
	import publics from "@/common/utils/public.js"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'

	export default{
		components: { uniPopup },
		data(){
			return {
				staticUrl: this.$staticUrl,
				addressData: {},
				orderInfo: [],
				totalPayAmount: 0,
				number: 0,
				integral: 0,
				deliveryMode: [], // 配送方式
				discountList: [], // 优惠券
				greenPrice: 0,
				showAnnualNote: false,
			}
		},
		filters: {
			filterAddr(code) {
				if (!code) return
				let addrObj = publics.getLngAndLatByCode(code)
				let addrName = ""
				if (addrObj){
					addrObj.map(v=>{
						addrName = addrName + v.name
					})
				}
				return addrName
			}
		},
	 async onLoad(option) {
			// 获取默认收货地址
		await	this.$http("GET", url.address.getAddressList).then(res =>{
				if (res.data && res.data.records.length > 0){
					this.addressData = res.data.records[0]
				}
			})
			// 获取绿色积分价格
		await	this.$http("GET",url.order.getGreenPrice).then(res => {
				if (res.data){
					this.greenPrice = res.data
				}
			})
			let commitOrderData = uni.getStorageSync("commitOrderData")
			uni.removeStorageSync("commitOrderData")
			console.log("//////////", commitOrderData)
			if (commitOrderData) {
				this.totalPayAmount = commitOrderData.goodsSku.skuPrice * commitOrderData.number // 商品总额
				if (commitOrderData.orderType === 3) {
					this.totalPayAmount = this.totalPayAmount * (commitOrderData.goodsInfo.boutiqueBuying / 100)
				}
				commitOrderData.totalMoney = this.totalPayAmount
				// 配送方式
				if (commitOrderData.goodsInfo.deliveryNo === 2){
					if (commitOrderData.orderType === 2) { // 精品商品只有平台配送
						this.deliveryMode.push({value: "deliveryPlatform", name: "平台配送", note: "平台配送员配送上门", status: 4})
					} else if (commitOrderData.goodsInfo.annualCard === 1) {
						this.deliveryMode.push({value: "monthlyDelivery", name: "快递邮寄", note: "每月定期配送", status: 1})
					} else {
						if (commitOrderData.goodsInfo.deliveryExpress === 1) {
							this.deliveryMode.push({value: "deliveryExpress", name: "快递邮寄", note: "快递物流配送", status: 1})
						}
						if (commitOrderData.goodsInfo.deliveryBusiness === 1) {
							this.deliveryMode.push({value: "deliveryBusiness", name: "商家配送", note: "商家自行配送上门", status: 2})
						}
						if (commitOrderData.goodsInfo.deliveryPlatform === 1 && commitOrderData.orderType !== 3) { // 进货时没有平台配送
							this.deliveryMode.push({value: "deliveryPlatform", name: "平台配送", note: "平台配送员配送上门", status: 4})
						}
						if (commitOrderData.goodsInfo.deliverySelfraising === 1) {
							this.deliveryMode.push({value: "deliverySelfraising", name: "用户自提", note: "到店自取", status: 3})
						}
					}
					if (this.deliveryMode.length > 0) {
						commitOrderData.deliveryName = this.deliveryMode[0].name
						commitOrderData.deliveryNote = this.deliveryMode[0].note
						commitOrderData.deliveryId = this.deliveryMode[0].status
					}
				}
				// 优惠券
				// if (commitOrderData.discountUserList.length > 0) {
				// 	let maxArray = commitOrderData.discountUserList.sort((a,b)=>{
				// 		return b.discountAmount - a.discountAmount
				// 	})
				// 	//是否使用优惠券：1=未使用，2=使用
				// 	commitOrderData.couponStatus = 2
				// 	//使用的用户优惠券ID
				// 	commitOrderData.couponUserId = maxArray[0].id
				// 	commitOrderData.discountName = maxArray[0].titleName
				// 	commitOrderData.discountAmount = maxArray[0].discountAmount

				// 	//减去优惠券则扣
				// 	this.totalPayAmount = commitOrderData.totalMoney - commitOrderData.discountAmount
				// }
				this.orderInfo = commitOrderData
				if (this.orderInfo.goodsInfo.paymentCombination === 1) {
					this.integral = (((100-this.orderInfo.goodsInfo.paymentRmb) / 100 * this.orderInfo.goodsSku.skuPrice) * this.orderInfo.number / this.greenPrice).toFixed(6)
					// this.totalPayAmount = (this.orderInfo.goodsInfo.paymentRmb/100*this.orderInfo.goodsSku.skuPrice)*this.orderInfo.number
				}
			}
		},
		methods:{
			submit(){
				this.orderInfo.payComposeType = this.orderInfo.goodsInfo.paymentCombination === 1 ? 2 : 1
				if (this.orderInfo.goodsInfo.paymentCombination === 1) {
					this.integral = (((100-this.orderInfo.goodsInfo.paymentRmb) / 100 * this.orderInfo.goodsSku.skuPrice) * this.orderInfo.number / this.greenPrice).toFixed(6)
					this.totalPayAmount = (this.orderInfo.goodsInfo.paymentRmb/100*this.orderInfo.goodsSku.skuPrice)*this.orderInfo.number
				} else {
					this.integral = 0
					this.totalPayAmount = this.orderInfo.totalMoney
				}
				if (!this.addressData.id) {
					this.$msg('请选择收货地址');
					return;
				}
				if (this.deliveryMode.length > 1) {
					this.$showModal(`配送方式为：${this.orderInfo.deliveryName}，是否确认？`, "提示", res =>{
						if (res.confirm) {
							this.httpReq()
						}
					})
				} else {
					this.httpReq()
				}
			},
			httpReq(){
				uni.showLoading({
					mask: true
				})
				let resultCommitOrders = []
				let params = {
					orderType: this.orderInfo.orderType,
					goodsId: this.orderInfo.goodsId,
					goodsSkuId: this.orderInfo.goodsSkuId,
					groupParentId: this.orderInfo.groupParentId,
					number: this.orderInfo.number,
					receivingAddressId: this.addressData.id,
					couponStatus: this.orderInfo.couponUserId ? 2 : 1, // 是否使用优惠券 1-未使用 2-使用
					couponUserId: this.orderInfo.couponUserId || 0,
					paymentCombination: this.orderInfo.payComposeType || 1, // 支付组合 1-关闭 2-使用
					deliveryMethod: this.orderInfo.deliveryId || 5, // 配送方式
					annualCard: this.orderInfo.goodsInfo.annualCard || 0, // 年卡产品 1-是 0-否
					useFundFlag: this.orderInfo.goodsInfo.useFundFlag || 0 // 是否支持使用消费金 1-是 0-否（仅针对vip区的商品）
				}
				this.$http("POST", url.order.commitOrder, params).then(res =>{
					uni.redirectTo({
						url: "/pages/order/payment/index?orderId="+res.data.orderId + '&qvyu=' + this.orderInfo.qvyu + '&useFundFlag=' + this.orderInfo.goodsInfo.useFundFlag
					})
					uni.hideLoading();
				}).catch((err)=>{
					uni.hideLoading();
					this.$msg(err.msg)
				})
			},
			// 选择收货地址
			selectAddr(){
				this.$navigateTo("/pages/user/address/index?type=1&source=true&id="+this.addressData.id)
			},
			// 年卡说明展开/折叠
			toggleAnnualNote(){
				this.showAnnualNote = !this.showAnnualNote
			},
			// // 支付组合开关
			// switchChange(e){
			// 	this.orderInfo.payComposeType = e.detail.value ? 2 : 1
			// 	let integral = (((100-this.orderInfo.goodsInfo.paymentRmb) / 100 * this.orderInfo.goodsSku.skuPrice) * this.orderInfo.number / this.greenPrice)
			// 	if (e.detail.value) {
			// 		this.integral = integral
			// 		this.totalPayAmount = this.totalPayAmount - this.integral
			// 	} else {
			// 		this.totalPayAmount = this.orderInfo.totalMoney
			// 		this.integral = 0
			// 	}
			// },
			// 显示配送方式modal
			showPopup(){
				let deliveryName = this.orderInfo.deliveryName
				this.deliveryMode.map(v =>{
					v.checked = false
					if (v.name === deliveryName) {
						v.checked = true
					}
				})
				this.$forceUpdate()
				this.$refs.popup.open()
			},
			// 选择配送方式
			radioChange(e){
				this.orderInfo.deliveryId = e.detail.value
			},
			// 配送方式modal确认按钮
			confirmMode(){
				let deliveryId = this.orderInfo.deliveryId
				this.deliveryMode.forEach(v =>{
					if (v.status === deliveryId) {
						this.orderInfo.deliveryName = v.name
						this.orderInfo.deliveryNote = v.note
						this.orderInfo.deliveryId = v.status
						this.$forceUpdate()
						return
					}
				})
				this.$refs.popup.close()
			},
			// 显示优惠券modal
			showDiscountPopup(discountPopupOpen) {
				this.discountList = []
				let discountUserList = JSON.parse(JSON.stringify(this.orderInfo.discountUserList))
				let discountName = this.orderInfo.discountName
				discountUserList.push({
					titleName: "不使用优惠",
					discountAmount: 0,
					id: -1
				})
				discountUserList.map(v =>{
					v.checked = false
					if (v.titleName === discountName) {
						v.checked = true
					}
				})
				this.discountList = discountUserList
				this.$refs.discountPopup.open()
			},
			// 选择优惠券
			radioChangeDiscount(e){
				this.orderInfo.couponUserId = parseInt(e.detail.value)
			},
			// 优惠券modal确认按钮
			confirmDiscount(){
				let couponUserId = this.orderInfo.couponUserId
				this.discountList.forEach(v =>{
					if (v.id === couponUserId){
						this.orderInfo.discountName = v.titleName
						this.orderInfo.discountAmount = v.discountAmount
						//使用的用户优惠券ID
						this.orderInfo.couponUserId = v.id
						//是否使用优惠券：1=未使用，2=使用
						this.orderInfo.couponStatus = 2
						return false
					}
				})
				this.totalPayAmount = this.orderInfo.totalMoney - this.orderInfo.discountAmount - this.integral
				this.$refs.discountPopup.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	.address-section {
		padding: 30upx;
		background: #fff;
		position: relative;
		.order-content {
			display: flex;
			align-items: center;
			.img{
				width: 50rpx;
				height: 50rpx;
			}
			.cen {
				display: flex;
				flex-direction: column;
				flex: 1;
				font-size: 32upx;
				color: #303133;
				margin-left: 20rpx;
				.name {
					font-size: 34upx;
					margin-right: 24upx;
				}
				.address {
					margin-top: 16upx;
					margin-right: 20upx;
					color: #909399;
				}
			}
			.icon-right {
				font-size: 44upx;
				color: #909399;
			}
		}
		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}
	.goods-section {
		margin-top: 16upx;
		border-radius: 20rpx;
		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
			.logo {
				display: block;
				width: 50upx;
				height: 50upx;
				border-radius: 6px;
			}

			.name {
				font-size: 30upx;
				color: #333;
				margin-left: 24upx;
			}
		}
		.g-box{
			overflow: hidden;
			padding: 20upx 30upx;
			.g-item{
				display: flex;
				flex-direction: column;
				&-top {
					display: flex;
					margin-bottom: 30rpx;
					image {
						flex-shrink: 0;
						display: block;
						width: 140upx;
						height: 140upx;
						border-radius: 10upx;
					}
					.right {
						flex: 1;
						padding-left: 24upx;
						overflow: hidden;
					}
					.title {
						font-size: 28upx;
						color: #303133;
					}
					.spec {
						background-color: #F8F8F8;
						color: #bcbbbd;
						font-size: 24rpx;
						padding: 10rpx;
						margin-top: 4rpx;
						border-radius: 8rpx;
						align-self: flex-start;
					}
					.price-box {
						display: flex;
						align-items: center;
						font-size: 32upx;
						color: #303133;
						padding-top: 10upx;
						.price {
							margin-bottom: 4upx;
							font-size: 30rpx;
						}
						.number {
							font-size: 24upx;
							color: #8a8e94;
							margin-left: 20upx;
						}
					}
				}
			}
			.g-cell{
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				font-size: 28rpx;
				&.delivery-cell{
					align-items: flex-start;
					flex-wrap: wrap;
				}
				.label{
					width: 140upx;
					margin-right: 24rpx;
					color: #333333;
					text-align: right;
				}
				.txt{
					flex-grow: 1;
					color: #999;
				}
				.order-txt{
					flex-grow: 1;
					color: #000;
					background-color: #e3e3e3;
					font-size: 28rpx;
					border-radius: 30rpx;
					margin-left: 10rpx;
					line-height: 1.5;
					padding: 0 15rpx;
				}
				.select{
					margin-left: 24rpx;
				}
				.annualNote{
					display: inline-flex;
					align-items: center;
					margin-left: 16rpx;
					color: #333;
				}
				.annualNote-text{
					font-size: 26rpx;
				}
				.annualNote-arrow{
					margin-left: 8rpx;
					font-size: 28rpx;
					color: #b9b9b9;
					transition: transform 0.2s ease;
				}
				.annualNote-arrow.open{
					transform: rotate(90deg);
				}
				.annualNote-panel{
					margin-top: 12rpx;
					padding: 16rpx;
					background-color: #F8F8F8;
					border-radius: 8rpx;
					color: #666;
					font-size: 24rpx;
					line-height: 1.6;
					/* make panel break to next line under content area */
					flex-basis: 100%;
					margin-left: calc(140upx + 24rpx); /* label width + its right margin */
					width: calc(100% - (140upx + 24rpx));
					box-sizing: border-box;
				}
			}
			.other{
				border-top: 2rpx solid #fbf9fd;
				padding-top: 30rpx;
			}
		}
	}
	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
		.price-content {
			padding-left: 30upx;
			display: flex;
			align-items: center;
			.price-tip {
				margin-left: 8upx;
			}
			.price {
				font-size: 34upx;
			}
		}
		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 280upx;
			height: 100%;
			color: #fff;
			font-size: 32upx;
			background-color: #F8D247;
		}
	}
	.popup{
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		align-items: center;
		justify-content: center;
		.cell{
			width: 710rpx;
			&-item{
				margin-top: 50rpx;
				.grow{
					margin-left: 20rpx;
					flex-grow: 1;
				}
				.radio{
					transform: scale(0.7);
				}
			}
		}
		.btn{
			width: 710rpx;
			margin-top: 50rpx;
			border-radius: 50rpx;
		}
	}
</style>
