<template>
	<view :class="[AppTheme]">
		<view class="info">
			<navigator url="/pagesD/pages/address/address?source=1" class="address-section" v-if="true">
				<view class="order-content">
					<text class="yticon icon-shouhuodizhi"></text>
					<view class="cen" v-if="addressData">
						<view class="top" style="display: flex;justify-content: left;padding: 5rpx;">
							<u-icon name="phone" color="#2979ff" labelSize="16" labelColor="#191919"
								:label="(addressData.name||'')+' '+(addressData.mobile||'')" size="20"></u-icon>
						</view>
						<view style="display: flex;justify-content: left;padding: 5rpx;">
							<u-icon name="map" color="#2979ff" labelSize="12" labelColor="#a7a7a7"
								:label="(addressData.address||'')+(addressData.area||'')" size="20"></u-icon>
						</view>
					</view>
					<view class="cen" v-else>
						<view class="top">请选择收货地址...</view>
					</view>
				</view>
				<image class="a-bg"
					src="data:image/png;base64, ">
				</image>
			</navigator>

			<view class="fle">
				<view class="info-l" v-if="list">
					<u--image :src="list.goods.imgUrl.imgurl" :fade="true" radius="5" duration="450" :lazy-load="true"
						width="80px" height="80px">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u--image>
				</view>
				<view class="info-r">
					<p class="size">{{ goods.name || '' }}</p>
					<view class="flew">
						<p class="s">
							售价:
							<text class="price text-neutral">&nbsp;{{ goods.copies_price || 0 }}元</text>
						</p>
						<text class="num">&nbsp;x&nbsp;{{ list.totalnum || 0 }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b" @click="showTanc">
				<view class="cell-icon">券</view>
				<text class="cell-tit clamp">优惠券</text>
				<text class="cell-tip active">{{ clamp }}</text>
				<text class="cell-more wanjia wanjia-gengduo-d"></text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">商品金额</text>
				<text class="cell-tip">￥{{ parseFloat(goods.copies_price * list.totalnum).toFixed(2) }}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">会员折扣</text>
				<text
					class="cell-tip text-neutral">-￥{{ parseFloat(goods.copies_price * list.totalnum*(1-level_radio/100)).toFixed(2)}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">总优惠金额</text>
				<text
					class="cell-tip text-neutral">-￥{{ parseFloat(goods.copies_price * list.totalnum*(1-level_radio/100)+reduceMoney).toFixed(2)  }}</text>
			</view>
		</view>

		<view class="footer">
			<view class="price-content">
				<text>实付款</text>
				<text class="price-tip text-neutral">￥</text>
				<text
					class="price text-neutral">{{ parseFloat(goods.copies_price * list.totalnum*(level_radio/100)).toFixed(2) - reduceMoney }}</text>
			</view>
			<text class="submit bg-linear-gradient" @click="goZf">提交订单</text>
		</view>
		<payment ref="payment" :channel="2" :alipay="true" :weixinpay="true" :zhtpay="true"></payment>
		<yhcoupon v-if="sale!=''" ref="yhcoupon" :orderList="sale" :showModal="isShowPop" @close="onclose"></yhcoupon>
	</view>
</template>

<script>
	import api_address from '@/api/address/address.js';
	import adoptApi from '@/api/home/index.js';
	import yhcoupon from '@/components/nx-coupon/yh_coupon.vue';
	export default {
		components: {
			yhcoupon
		},
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				clamp: '暂无优惠券',
				value: 0,
				showPwt: false,
				orderId: '',
				show: false,
				isShowPop: false,
				check: false,
				list: '',
				goods: '',
				act: 1,
				sale: '',
				sale_data: '',
				res: '',
				orderid: '',
				count: '',
				reduceMoney: 0,
				zfMoney: 0,
				pass: '',
				addressData: '',
				level_radio: '',
				vipprice: '',
				farm_id: ''
			};
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id;
			}
			this.getOrderInfo(); //获取认养信息

		},
		onShow() {},

		methods: {
			onclose(item) {
				console.log('item', JSON.stringify(item))
				console.log('clamp', this.clamp)
				this.isShowPop = item.show
				if (item.money == -2) {
					this.reduceMoney = 0;
					this.clamp = '暂不使用优惠券'
				} else if (item.money > 0) {
					this.clamp = -item.money
					this.reduceMoney = item.money;
					this.sale_data = item.djqid;
				}
			},
			//获取地址
			getAddressData(option) {
				api_address.address().then(res => {

					if (res.status == 200) {
						if (res.data) {
							let is_default = res.data.data.filter(item => item.is_default == 1);
							this.addressData = is_default[0];
						}
					} else {
						this.$api.msg(res.msg);
					}
				});
			},


			//根据价格--优惠券
			getsale(res) {
				let number = res.data.cache.goods.copies_price * res.data.cache.totalnum;
				adoptApi.cancoupon({
					totalprice: number,
					farm_id: this.farm_id
				}).then(res => {
					if (res.status == 200) {
						// this.$refs.yhcoupon.payopen({
						// 	 sale:res.data
						// });
						this.sale = res.data;

						this.count = res.data.count;
					}
				});
			},
			//获取认养信息
			getOrderInfo() {
				adoptApi.orderDetail({
					orderid: this.orderId
				}).then(res => {
					if (res.status == 200) {
						this.list = res.data.cache;
						this.goods = res.data.cache.goods;
						this.level_radio = res.data.cache.level_radio;
						this.farm_id = res.data.cache.farm_id;
						this.vipprice = parseFloat(this.goods.copies_price * this.list.totalnum * (res.data.cache
							.level_radio / 100)).toFixed(2);
						this.getsale(res);
						this.getAddressData(); //根据价格--优惠券
					} else {
						if (res) {
							this.$api.msg(res.msg);
						} else {
							this.$api.msg(err.msg);
						}
					}
				});
			},
			showTanc() {

				if (this.sale.djq.length > 0) {

					this.isShowPop = true;
				}

			},
			cancelPop() {
				this.isShowPop = false;
			},
			goZf() {
				let that = this
				if (!that.addressData) {
					that.$api.msg('请选择地址');
				}
				let tmplIdsone = that.$config.temlist;
			 
				if (tmplIdsone) {
					that.$until.requestSubscribeMessage([tmplIdsone['orderSuccess'], tmplIdsone['orderDelivery'],
						tmplIdsone['returnReminder']
					], tmplIdsone, function() {
						that.addresOrder()
					});
				} else {
					that.addresOrder()
				}
			},
			addresOrder() {
				let that = this
				let sale_data = that.sale_data;
				let oid = that.list.oid;
				let num = parseFloat(that.goods.copies_price * that.list.totalnum * (that.level_radio /
					100)).toFixed(2) - that.reduceMoney;
				let orderId = that.orderId;
				adoptApi.addresOrder({
					orderid: orderId,
					address: that.addressData.id
				}).then((res, err) => {
					console.log(res)
					console.log(err)
					if (res.status == 200) {
						that.$refs.payment.payopen({
							payprice: num,
							money: num,
							orderid: orderId,
							djqid: sale_data,
							type: 1,
							oid: oid
						});
					} else {
						that.$api.msg(res.msg);
					}
				});
			},
			sale_list(e, money) {
				this.value = e;
				this.reduceMoney = money;
				this.sale_data = e;
				setTimeout(() => {
					this.isShowPop = false;
				}, 200);
			},
			timestampToTime(timestamp) {
				var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = date.getDate() + ' ';
				let h = date.getHours() + ':';
				let m = date.getMinutes() + ':';
				let s = date.getSeconds();
				return Y + M + D;
			},
			close() {
				this.showPwt = false;
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #eeeeee;
	}

	.info {
		width: 100%;
		background-color: #ffffff;
		padding-bottom: 10px;
	}

	.fle {
		width: calc(100% - 36px);
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
	}

	.info-l {
		width: 100px;
		height: 100px;
		border-radius: 10px;
		/*margin-left: 18px;*/
		margin-top: 15px;
	}

	.info-l image {
		width: 100%;
		height: 100%;
	}

	.info-r {
		overflow: hidden;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.info-r .size {
		margin-top: 16px;
		margin-bottom: 12px;
		margin-top: 33px;
		font-size: 32rpx;
		color: #303133;
		line-height: 50rpx;
		margin-top: 35rpx;
		margin-bottom: 12rpx;
		font-family: PingFang SC;
		color: rgba(0, 0, 0, 1);
	}

	.flew {
		display: flex;
		justify-content: space-between;
	}

	.fle .s {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.price {
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: bold;
	}

	.num {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}

	.aui-info {
		background-color: #ffffff;
	}

	.aui-info .j {
		font-size: 13px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
	}

	.red {
		color: #ff1f1f;
	}

	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 40upx;
		line-height: 70upx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}
		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: $font-color-light;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: 26upx;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: $base-color;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}

		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}
	}

	.money {
		margin-top: 20rpx;
		padding-top: 20rpx;

		padding-left: 18px;
		background-color: #ffffff;
		width: 100%;
		overflow: hidden;
		padding-bottom: 13px;
	}

	.money .fs {
		margin-top: 36px;
		margin-bottom: 15px;
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.money .zf {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.money .zf .img {
		width: 24px;
		height: 24px;
		margin-right: 13px;
	}

	.money .zf .ye {
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		width: 280px;
	}

	.bg-cen {
		margin-top: 10px;
		height: 105px;
		background-color: #ffffff;
		overflow: hidden;
	}

	.btn {
		width: 291px;
		height: 45px;
		margin: 30px auto;
		text-align: center;
		line-height: 45px;
		background: $tab-color;
		border-radius: 23px;
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(255, 255, 255, 1);
	}

	.pass {
		margin-top: 20rpx;
		display: flex;
		align-items: center;

		.pass_ipt {
			margin-left: 20rpx;
		}
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;

		image {
			margin-right: 20rpx;

			width: 31rpx;
			height: 24rpx;
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);

		.price-content {
			padding-left: 30upx;
		}

		.price-tip {
			margin-left: 8upx;
		}

		.price {
			font-size: 36upx;
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 280upx;
			height: 100%;
			color: #fff;
			font-size: 32upx;
		}
	}
</style>

<style lang="scss" scoped>
	.address-section {
		padding: 10rpx 10rpx 15rpx 10rpx;
		background: #fff;
		position: relative;

		.order-content {
			// display: flex;
			// align-items: center;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90upx;
			color: #888;
			font-size: 44upx;
		}

		.cen {
			display: flex;
			padding-bottom: 10rpx;
			flex-direction: column;
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.name {
			font-size: 34upx;
			margin-right: 24upx;
		}

		.address {
			margin-top: 16upx;
			margin-right: 20upx;
			color: $font-color-light;
		}

		.icon-you {
			font-size: 32upx;
			color: $font-color-light;
			margin-right: 30upx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}
</style>
<style>
	.pop {
		position: absolute;
		height: 100%;
		width: 100%;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 99;
	}

	.pop .content {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 385px;
		background-color: #ffffff;
	}

	.pop .my {
		margin-top: 15px;
		width: 100%;
		height: 52px;
		/*background-color: #ffffff;*/
	}

	.pop .coupons-c {
		position: relative;
		width: calc(100% - 20px);
		height: 110px;
		background-color: #ffffff;
		margin: 15px auto;
		display: flex;
		justify-content: flex-start;
		border-radius: 5px;
	}

	.pop .bg {
		height: 100%;
		width: 246rpx;
		background: url('../../../../static/imgs/farm/35.png') no-repeat center;
		background-size: 100%;
		overflow: hidden;
	}

	.pop .bg1 {
		height: 100%;
		width: 246rpx;

		background: url('../../../../static/imgs/farm/30.png') no-repeat center;
		background-size: 100%;
		overflow: hidden;
	}

	.pop .bg3 {
		height: 100%;
		width: 246rpx;
		background: url('../../../../static/imgs/farm/31.png') no-repeat center;
		background-size: 100%;
		overflow: hidden;
	}

	.pop .price {
		margin-top: 16px;
		text-align: center;
		font-size: 80rpx;
		font-family: PingFang SC;
		font-weight: bold;
	}

	.pop .price-m {
		/*margin-left: 23px;*/
		text-align: center;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		margin-top: 32rpx;
	}

	.pop .ticket {
		width: 233px;
		margin-left: 15px;
		overflow: hidden;
	}

	.pop .ticket .ticket-t {
		width: 233px;
		margin-top: 15px;
		margin-bottom: 16px;
		display: flex;
		height: 19px;
		justify-content: flex-start;
		align-items: center;
	}

	.pop .ticket .ticket-z {
		margin-right: 7px;
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.pop .ticket .ticket-j {
		width: 43px;
		height: 19px;
		background: rgba(255, 112, 73, 1);
		border-radius: 5px;
		text-align: center;
		line-height: 19px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}

	.pop .ticket .ticket-j.ticket-j1 {
		background: rgba(255, 135, 2, 1);
	}

	.pop .ticket .ticket-j.ticket-j3 {
		background: rgba(14, 122, 255, 1);
	}

	.pop .buy {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-bottom: 15px;
	}

	.pop .time {
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	.pop .y {
		font-size: 20px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}

	.pop .text {
		padding-top: 19px;
		padding-bottom: 15px;
		text-align: center;
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.pop .auto {
		height: 280px;
		width: 100%;
		overflow: auto;
	}

	.pop .foot {
		width: 100%;
		text-align: center;
		height: 49px;
		line-height: 49px;
		font-size: 3vw;
		font-family: PingFang SC;
		font-weight: bold;
		color: red;
	}

	.pop .abso {
		position: absolute;
		right: 10px;
		top: 10px;
	}

	.aui-radio,
	.aui-checkbox {
		border: 1px solid #fe5828;
	}

	.aui-list .aui-list-item-input {
		width: 60px;
		padding-right: 15px;
	}

	.aui-radio:checked,
	.aui-radio.aui-checked,
	.aui-checkbox:checked,
	.aui-checkbox.aui-checked {
		background-color: #fe5828;
		border: solid 1px #fe5828;
		text-align: center;
		background-clip: padding-box;
	}

	.act {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #0e7aff;
	}

	.act2 {
		width: 20rpx;
		height: 20rpx;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		background: #fe5828;

		margin: 10px 10px 0 0;
	}

	.act3 {
		margin: 10px 10px 0 0;
		width: 20rpx;
		height: 20rpx;

		border-radius: 50%;
		border: 2px solid #fe5828;
	}

	.yhq {
		background: #fff;
		padding-left: 88rpx;
		font-size: 14px;
		color: #999;
		margin-top: 30rpx;
	}

	.x {
		position: absolute;
		top: 22px;
		right: 22px;
		width: 15px;
		height: 15px;
	}
</style>
