<template>
	<view class="content">
		<!-- 收货地址 -->
		<view class="Harvest-Address">
			<!-- 查询收获地址时 -->
			<template v-if="!Taddress">
				<u-loadmore :status="status" :loadingText="loadingText" />
			</template>
			<!-- 没有默认收货地址 -->
			<template v-else-if="Object.keys(Taddress)['length'] <= 0">
				<view class="Title">
					收货地址
				</view>
				<navigator url="/pages/diy/addresslis/addresslis">
					<view class="nothing">
						添加收货地址
					</view>
				</navigator>
			</template>
			<!-- 有默认收货地址 -->
			<navigator v-else url="/pages/diy/addresslis/addresslis">
				<view class="Address">
					<view class="User-Infor">
						<text class="text1">{{Taddress['name']}}</text>
						<text class="text1">{{Taddress['mobile']}}</text>
					</view>
					<view class="Address-Text">
						{{Taddress['region']}}
					</view>
					<view class="Address-Text">
						{{Taddress['address']}}
					</view>
				</view>
			</navigator>
		</view>

		<view class="Commodity">
			<view class="Commodity-Img" :class="{'Commodity-Imgn':InforData['thumbUrl']?true:false}">
				<img class="img" :src="InforData['thumbUrl']" alt="">
			</view>
			<view class="Commodity-Infor">
				<view class="Commodity-Infor-Title">
					{{GetGoodsInfor['goods_name']}}
				</view>
				<view class="Commodity-Infor-Sku">
					<view class="sku">
						<!-- 磨砂款 -->
					</view>
					<view class="sku">
						x1
					</view>
				</view>
			</view>
		</view>
		<view class="Commodity-Order-Infor">
			<u-cell-group :border="false">
				<u-cell :border="false" titleStyle="color:#666666;fontSize:28rpx" title="运费" :value="freight"></u-cell>
				<u-cell :border="false" titleStyle="color:#666666;fontSize:28rpx" title="商品金额" :value="CommodityAmount"></u-cell>
				<u-cell :border="false" titleStyle="color:#666666;fontSize:28rpx" title="补贴卡抵扣金额" :value="`- ${ActualDeduction}`"></u-cell>
				<u-cell :border="false" titleStyle="color:#666666;fontSize:28rpx" title="预估佣金" :value="commission"></u-cell>
			</u-cell-group>
		</view>
		
		<view class="payment-content">
			<view class="payment-content-Price">
				<text style="font-size: 28rpx;">实付款：</text>
				<text style="font-size: 32rpx; color: #FE2825;">￥{{price}}</text>
			</view>
			<view class="pay-btn" v-if="Taddress">
				<button class="btn" :disabled="Object.keys(Taddress)['length'] <= 0" @tap="paymentClick">
					{{Object.keys(Taddress)['length'] <= 0?'请选择地址':'立即支付'}}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goodsInfoAPI,
		getRegionFreightAPI,
		getDefaultAddressAPI,
		createOrderAPI,
		conWalletInfoAPI
	} from '@/request/diy/index.js';
	
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	let self;
	// 公用混入
	import mixin from "@/static/js/mixin/mixin.js";
import { mapMutations } from 'vuex';
	export default {
		mixins: [mixin],
		data() {
			return {
				InforData: {},
				// 收货地址
				Taddress:undefined,
				status:'loading',
				loadingText:'正在获取收货地址',
				price:0,
				amount:0,
				ActualDeduction:0
			};
		},
		onLoad(parameters) {
			console.log(parameters,'parameters')
			self = this;
			// 定制完成之后的数据
			this['InforData'] = parameters;
			// 获取默认地址与运费
			this.GetgetDefaultAddress();
			// 监听地址列表选择地址
			uni.$on('upArea',data=>{
				self['Taddress'] = data;
				self.Getfreight(data);
			})
		},
		onUnload() {
			uni.$off('upArea');
		},
		computed: {
			...mapGetters("diy", ['GetTaddress', 'GetGoodsInfor']),
			// 运费
			freight(){
				return this['InforData']['Freight']?this['InforData']['Freight']:'0';
			},
			// 商品金额
			CommodityAmount(){
				return this._amount(this['GetGoodsInfor']['pay_price'])
			},
			// 补贴卡抵扣金额
			deductionPrice(){
				return this._amount(this['GetGoodsInfor']['deduction_price'])
			},
			// 预估佣金
			commission(){
				return String(this['GetGoodsInfor']['self_commission']);
			},
			// 实际支付
			// _price(){
				
			// 	console.log((this['CommodityAmount']*100),(this['deductionPrice']*100),this['InforData']['Freight'],'----');
			// 	return this._amount((this['CommodityAmount'] - this['deductionPrice']) + this['freight']);
			// }
		},
		methods: {
			...mapMutations("diy", ['SetTaddress']),
			// 进入下单页面获取默认地址
			GetgetDefaultAddress(){
				conWalletInfoAPI().then(res => {
					self['amount'] = res['data']['amount'];
					getDefaultAddressAPI().then(res=>{
						console.log(res,'默认地址');
						// 存在默认地址
						if(Object.keys(res['data'])['length'] > 0){
							self['Taddress'] = res['data'];
							// const area = res['data'];
							// 开始获取运费
							self.Getfreight(res['data']);
						}else{
							self['Taddress'] = {};
						}
						
					})
				
				})
			},
			// 支付
			paymentClick(){
				uni.showLoading({
					title: '支付中...'
				});
				const para = {
					// 商品ID
					goods_id:this['InforData']['goods_id'],
					// 地址ID
					add_id:this['Taddress']['add_id'],
					// 运费
					freight_price:this['freight'],
					// 抵扣金额
					deduction_price:this['ActualDeduction'],
					// 印鸽单号
					customizeNo:this['InforData']['customizeNo'],
					// 生成的缩略图
					effect_img:this['InforData']['thumbUrl'],
					// 来源
					source:this['$project']['environment']?1:0
				};
				console.log(para);
				createOrderAPI(para).then(res=>{
					console.log(res['data']);
					// 回调地址
					let redirect_url = '/pages/diy/pay-status/pay-status?order_sn=31ZC-DIY1673511979475297';
					uni.hideLoading();
					const { pay_price, order_sn, type, openid} = res['data'];
					this.$Payment.H5_Payment({
						pay_price,
						order_sn,
						type,
						openid,
						return_url:`/pages/diy/pay-status/pay-status?order_sn=${order_sn}`
					});
					// 调起支付
					// this.payment({
					// 	order_sn: res['data']['data'],
					// 	// 仅微信环境下存在参数
					// 	// money:res['data']['money'],
					// 	type: res['data']['type'],
					// 	redirect_url,
					// });
				})
			},
			
			// 获取运费
			Getfreight(area){
				uni.showLoading({
					title: '加载中',
					mask:true
				});
				// 开始获取运费
				const para = {
					goods_id: self['InforData']['goods_id'],
					city:area['region'].split('-')[0]
				};
				getRegionFreightAPI(para).then(res => {
					uni.hideLoading();
					console.log(res,'运费');
					self.$set(self['InforData'],'Freight',res['data']);
					self.ispjn();
					self.$forceUpdate();
				}).catch(res=>{
					self.$set(self['InforData'],'Freight',0);
					self.ispjn();
					self.$forceUpdate();
				})
			},
			
			ispjn(){
				console.log(this['freight'],'freight');
				// 商品金额
				const CommodityAmount = this.calc(this['CommodityAmount'],100,'*');
				// 最大抵扣金额
				const deductionPrice = this.calc(this['deductionPrice'],100,'*');
				// 当前抵扣卡余额
				const amount = this['amount'];
				// 当前余额减去最大抵扣金额是否满足抵扣
				const ded = (amount - deductionPrice) >= 0 ? deductionPrice : amount;
				this['ActualDeduction'] = this._amount(ded);
				this['price'] = this._amount((CommodityAmount - ded) + (this.calc(this['freight'] || 0,100,'*')));
				console.log(this['price'],'price');
				if(!this['amount']){
					uni.showToast({
						title:'抵扣卡余额不足',
						icon:'none'
					})
				}
			}
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
		.payment-content{
			display: flex;
			justify-content:space-between;
			align-items:center;	
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 20rpx;
			position: fixed;
			bottom: 32rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 95%;
			box-sizing: border-box;
			.pay-btn{
				.btn{
					width: 208rpx;
					height: 96rpx;
					background: linear-gradient(180deg, #FFAF00 0%, #FF7700 100%);
					border-radius: 20rpx;
					color: #ffffff;
					font-size: 28rpx;
					line-height: 94rpx;
					&::after{
						background-color: transparent !important;
						border: none !important;
					}
				}
			}
		}
		.content {
			padding: 32rpx;

			.Harvest-Address {
				.Title {
					font-size: 32rpx;
					margin-bottom: 32rpx;
				}

				.nothing {
					width: 220rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 2rpx solid #333333;
					text-align: center;
					line-height: 60rpx;
				}

				.Address {
					background-color: #ffffff;
					border-radius: 20rpx;
					padding: 20rpx;

					.User-Infor {
						font-size: 30rpx;
						color: #333333;
						font-weight: 600;
						margin-bottom: 10rpx;

						.text1 {
							margin-right: 32rpx;
						}
					}

					.Address-Text {
						font-size: 24rpx;
						margin-bottom: 10rpx;
					}
				}
			}

			.Commodity {
				margin-top: 32rpx;
				padding: 20rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				display: flex;

				&-Imgn {
					background-color: transparent !important;
				}

				&-Img {
					width: 172rpx;
					height: 172rpx;
					min-height: 172rpx;
					min-width: 172rpx;
					max-width: 172rpx;
					max-height: 172rpx;
					background-color: #D8D8D8;
					border-radius: 20rpx;
					overflow: hidden;

					.img {
						width: 100%;
						height: 100%;
					}
				}

				&-Infor {
					padding-left: 15rpx;
					flex: 1;

					&-Title {
						font-size: 28rpx;
						font-weight: 700;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						margin-bottom: 15rpx;
					}

					&-Sku {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						color: #999990;
					}
				}

			}

			.Commodity-Order-Infor {
				background-color: #FFFFFF;
				border-radius: 20rpx;
				margin-top: 32rpx;
			}
		}
	}
</style>
