<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view>
		<view class="head-shwen df jcsa"><!-- 商品将在七天内发货 --></view>
		<view class="head">
			<view class="head-dizi df" @click="selectAddress" v-if="data.type==1">
				<div class="dizi-one">
					<image :src="$util.img('upload/weapp/pageSalesman/reportForm/position.png')"></image>
				</div>
				<div class="df fdc">
					<div class="dizi-sui">
						{{ addressData.name }}
						<span>{{ addressData.mobile }}</span>
					</div>
					<div class="dizi-two">
						{{ addressData.full_address ? addressData.full_address : '' }}
						{{ addressData.address ? addressData.address : '' }}
					</div>
				</div>
				<div class="dizi-for df aic" v-if="data.type==1">
					<image :src="$util.img('upload/weapp/user/you.png')"></image>
				</div>
			</view>
			<view class="cais" v-if="data.type==1">
				<image :src="$util.img('upload/weapp/pageSalesman/reportForm/bar.png')"></image>
			</view>
			<view class="list">
				<div class=" df">
					<div style="margin-right: 30rpx;">
						<image :src="$util.img(data.image)" mode="aspectFill"></image>
					</div>
					<div class="df fdc">
						<div class="name">{{ data.name }}</div>
						<div v-if="data.type == 2">
							<div class="price">{{ data.point }}积分</div>
						</div>
						<div v-if="data.type == 1" style="display: flex;">
							<div class="price">{{ data.point }}积分+{{ data.price }}元</div>
						</div>
						<div class="df jcsb wbf">
							<div class="one">×{{ pointNum }}</div>
							<div class="sex">
								{{ pointNum * data.point }}积分
								<span v-if="Number(data.price)">
									+￥{{ pointNum * Number(data.price) }}元
								</span>
							</div>
						</div>
					</div>
				</div>
			</view>

			<view class="zonjia df">
				<div class="f1">
					<div class="df jcsb">
						<div class="zonj">商品总价</div>
						<div class="qiam" style="color: #222222;">
							<div v-if="data.type == 2">
								<div>{{ pointNum * data.point }}积分</div>
							</div>
							<div v-if="data.type == 1" style="display: flex;">
								<div>
									{{ pointNum * data.point }}积分
									<span v-if="Number(data.price)">
										+￥{{ pointNum * Number(data.price) }}元
									</span>
								</div>
							</div>
						</div>
					</div>
					<div class="df jcsb" v-if="Number(data.delivery_price)">
						<div class="zonj">运费</div>
						<div class="qiam" style="color: red;">￥{{ data.delivery_price }}</div>
					</div>
					<!-- <div class="df jcsb">
						<div class="zonj">优惠卷</div>
						<div class="qiam" style="color: red;">-￥6.00</div>
					</div> -->
					<div class="df jcsb">
						<div class="zonj">需付款</div>
						<div class="qiam" style="color: #222222;">
							<div class="qiam" style="color: #222222;">
								<div v-if="data.type == 2">
									<div>{{ pointNum * data.point }}积分</div>
								</div>
								<div v-if="data.type == 1" style="display: flex;">
									<div>
										{{ pointNum * data.point }}积分
										<span v-if="Number(data.price) || Number(data.delivery_price)">
											+￥{{
												pointNum * Number(data.price) +
													Number(data.delivery_price)
											}}元
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</view>
		</view>
		<view class="order-submit bottom-safe-area">
			<view class="order-settlement-info">
				<text class="font-size-base">
					合计：{{ pointNum * data.point }}积分
					<text v-if="Number(data.price)">+￥{{ pointNum * Number(data.price) }}元</text>
				</text>
			</view>
			<view class="submitBtn" @click="createPoint()">
				提交订单
				<!-- <u-button type="primary" size="mini" @click="createPoint()">提交订单</u-button> -->
			</view>
		</view>
	</view>
</template>

<script>
	// import { number } from 'echarts';
	// import { data } from 'uview-ui/libs/mixin/mixin';
	import { mapGetters } from 'vuex';

	export default {
		data() {
			return {
				index: '',
				data: {},
				routeObj: {},
				pointNum: 0,
				id: undefined,
				addressData: {}
			};
		},
		onLoad(option) {
			this.routeObj = option;
			this.pointNum = this.routeObj.pointNum;
			this.id = this.routeObj.id;
		},
		onShow() {
			this.init();
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			init() {
				this.getPointGoods(this.id);
				this.getDefalutAddress();
			},
			// 获取积分商品详情
			getPointGoods(id) {
				this.$api.sendRequest({
					url: '/api/goodsexchange/detail',
					data: {
						id
					},
					success: res => {
						console.log(res.data, 'getPointGoods');
						this.data = res.data;
					}
				});
			},
			// 获取默认收货地址
			getDefalutAddress() {
				this.$api.sendRequest({
					url: '/api/memberaddress/page',
					data: {
						member_id: this.userInfo.member_id
					},
					success: res => {
						res.data.list.forEach(item => {
							if (item.is_default) {
								this.addressData = item;
							}
						});
					}
				});
			},
			// 选择收货地址
			selectAddress() {
				var params = {
					back: this.$util.getCurrentRoute().path,
					local: 0,
					type: 1,
					id: this.routeObj.id,
					typeName: 'pointChange'
					// pointNum: this.routeObj.pointNum
				};
				console.log(this.$util.getCurrentRoute().path);
				this.$util.redirectTo('/pages_tool/member/address', params);
			},
			createPoint() {
				let data = {
					goods_id: this.data.id,
					num: Number(this.pointNum),
					store_id: uni.getStorageSync('myStore').id,
					member_address: JSON.stringify(this.addressData)
				};
				if (this.data.type == 2) {
					data.member_address = null;
				}
				this.$api.sendRequest({
					url: '/api/goodsexchange/doExchange',
					data,
					success: res => {
						this.$util.showToast({
							title: '兑换成功'
						});
						console.log(res);
						uni.navigateTo({
							url: '/pages_tool/member/exchange_record'
						});
					}
				});
				console.log(data);
			},
			btn() {
				this.$util.showToast({
					title: '已告知商家尽快发货'
				});
			},
			qudwl() {
				this.$util.showToast({
					title: '确认收货成功'
				});
			}
		}
	};
</script>
<style lang="scss">
	@import '@/common/css/order_parment.scss';
</style>
<style lang="scss">
	.head-shwen {
		width: 100%;
		height: 150rpx;
		background-image: linear-gradient(rgb(33, 187, 243), rgb(247, 247, 247));
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		line-height: 40rpx;
	}

	.head {
		padding: 0 24rpx;
		box-sizing: border-box;
		position: relative;
		top: -40rpx;

		.head-dizi {
			width: 100%;
			height: 172rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 0 24rpx;
			box-sizing: border-box;

			.dizi-one {
				image {
					width: 44rpx;
					height: 44rpx;
					margin-top: 34rpx;
					margin-right: 8rpx;
				}
			}

			.fdc {
				width: 80%;

				.dizi-two {
					width: 100%;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					line-height: 48rpx;
					margin-top: 8rpx;
				}

				.dizi-sui {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 44rpx;
					margin-top: 32rpx;

					span {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 44rpx;
						margin-left: 16rpx;
					}
				}
			}

			.dizi-for {
				image {
					width: 28rpx;
					height: 28rpx;
					margin-left: 60rpx;
				}
			}
		}

		.cais {
			position: relative;
			top: -28rpx;

			image {
				width: 100%;
				height: 6rpx;
			}
		}

		.list {
			width: 702rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			padding-bottom: 32rpx;

			image {
				width: 160rpx;
				height: 160rpx;
				margin-top: 32rpx;
			}

			.qaun {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
				margin-top: 24rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-left: 8rpx;
				}
			}

			.name {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				margin-top: 32rpx;
			}

			.price {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: $base-color;
			}

			.wbf {
				width: 450rpx;
				margin-top: 50rpx;

				.one {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;

				}

				.sex {
					font-size: 24rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #222222;
					line-height: 40rpx;

				}
			}
		}

		.dinkdn {
			width: 702rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 8rpx 32rpx 32rpx 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;

			.dindan {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
				margin-top: 32rpx;

				span {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
					margin-left: 48rpx;
				}
			}

			.fuzhi {
				width: 96rpx;
				height: 48rpx;
				background: #ffffff;
				border-radius: 28rpx;
				border: 2rpx solid #e8e8e8;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 34rpx;
				margin-top: 28rpx;
			}
		}

		.zonjia {
			padding: 8rpx 32rpx 32rpx 32rpx;
			width: 702rpx;
			background: #ffffff;
			border-radius: 16rpx;
			margin-top: 24rpx;
			box-sizing: border-box;

			.zonj {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				margin-top: 24rpx;
			}

			.qiam {
				font-size: 24rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				line-height: 40rpx;
				margin-top: 24rpx;
			}

			.img {
				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}

	.btn {
		width: 750rpx;
		height: 100rpx;
		background: #ffffff;
		margin-top: 24rpx;

		.btn-tixin {
			width: 192rpx;
			height: 72rpx;
			border-radius: 40rpx;
			border: 2rpx solid #e8e8e8;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
			margin-right: 32rpx;
		}

		.btn-one {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
			width: 192rpx;
			height: 72rpx;
			border-radius: 40rpx;
			border: 2rpx solid #e8e8e8;
		}

		.btn-two {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
			width: 192rpx;
			height: 72rpx;
			border-radius: 40rpx;
			border: 2rpx solid #e8e8e8;
			margin: 0 24rpx;
		}

		.btn-sui {
			width: 192rpx;
			height: 72rpx;
			background: $base-color;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 40rpx;
			margin-right: 24rpx;
		}
	}

	.submitBtn {
		line-height: 70rpx;
		text-align: center;
		width: 180rpx;
		height: 70rpx;
		padding: 0;
		font-size: $font-size-base;
		font-weight: bold;
		background: $base-color;
		border-radius: 50rpx;
		margin-right: 30rpx;
	}
</style>