<!--
 * @Author: euzhi
 * @Description: 支付
-->
<template>
<view class="appCotent">
<div class="pay">
    <div class="address" v-if="addressShow">
        <div class="address__left">
            <div class="right__title">
                {{addressInfo.address}}&emsp;{{addressInfo.detailInfo}}
            </div>
            <div class="right__phone">
				<span>{{addressInfo.userName}}</span>
				<span>{{addressInfo.telNumber}}</span>
				<span v-if="addressInfo.defaultFlag">默认</span>
            </div>
        </div>
        <div class="address__right" @click="goAddress">
            <image src="@/static/index/right.png" />
        </div>
        <u-gap bgColor="transparent" height="15"></u-gap>
    </div>
	<div v-else class="add__address" @click="addAddress">
	    <image src="@/static/index/get-car-code5.png"> 添加收货地址
	</div>
    <div class="pay__item">
        <div class="item">
            <div class="item__top">
                <div class="top__img">
                    <img src="" alt="" srcset="">
                </div>
                <div class="top__right">
                    <div class="right__one one__text">
                        <span>{{mallInfo.title}} </span>
                        <span>￥{{mallInfo.currentPrice/100}}</span>
                    </div>
                    <div class="right__two">
                        <span>{{mallInfo.description}}</span>
                        <span>×1</span>
                    </div>
                </div>
            </div>
            <div class="item__bottom">
                <div class="bottom__item">
                    <div>商品总价:</div>
                    <div>￥{{mallInfo.currentPrice/100}}</div>
                </div>
                <u-gap bgColor="transparent" height="15"></u-gap>
                <div class="bottom__item">
                    <div>总金额:</div>
                    <div class="bottom__price">￥{{mallInfo.currentPrice/100}}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="price__bottom">
        <div class="price">
            <div class="price__num">
                共<span>1</span>件
            </div>
            <div class="price__all">
                合计<span>￥{{mallInfo.currentPrice/100}}</span>
            </div>
        </div>
        <div class="price__next" @click="pay">
            立即支付
        </div>
    </div>
</div>
</view>
</template>

<script>
export default {
	data () {
		return {
			//商品id
			id: '',
			//商品详情
			mallInfo: {},
			//收货地址列表
			addressList: [],
			//选择收货地址id
			addressId: '',
			//选择的收货地址
			addressInfo: {},
			//商品总价
			mallTotalPrice: '0.00',
			//总金额
			totalAmount: '0.00',
			//总计
			total: '0.00',
			//弹出层
			showAddress: false,
			createOrder: {},
			orderSubmit: {},
			addressShow: false,
		}
	},
    methods: {
        pay() {
			this.createOrder = {
				addressId: this.addressId,
				commodityList: [{
					id: this.id,
					nums: 1,
				}],
			}
			let that = this
			let opts = { url: '/app/mall/create/order', method: 'post' };
			this.http.httpTokenRequest(opts, this.createOrder).then(res => {
				if (res.data.code == 200) {
					
					let orderIds = res.data.data
					that.orderSubmit = {
						appId: 6,
						ids: orderIds,
						channelCode: 'wx_lite',
					}
					let opts = { url: '/app/pay/order/submit/more', method: 'post' }
					this.http.httpTokenRequest(opts, that.orderSubmit).then(res => {
							console.log(res);
							if (res.data.code == 200) {
									let paymentData = res.data.data.invokeResponse;
					
									uni.requestPayment({
										provider: 'wxpay', // 服务提提供商
										timeStamp: paymentData.timeStamp,
										nonceStr: paymentData.nonceStr,
										package: paymentData.packageValue,
										signType: paymentData.signType,
										paySign: paymentData.paySign,
										success: function (res) {
											console.log('支付成功',res);
											 uni.navigateTo({
												url: '/pagesC/pages/shop/payOk'
											})	
										},
										fail: function (err) {
												console.log('支付失败',err);
										},
									});
							} else {
					
							}
					})
				}
			})
            
        },
		getMallInfo(){
			let opts = { url: '/app/mall/' + this.id, method: 'get' };
			this.http.httpTokenRequest(opts, {}).then(res => {
				if (res.data.code == 200) {
					this.mallInfo = res.data.data
				}
			})
		},
		getAddressList(){
			let opts = { url: '/app/user/address/list', method: 'get' };
			this.http.httpTokenRequest(opts, {}).then(res => {
				if (res.data.code == 200) {
					this.addressList = res.data.data
					if(this.addressList !== undefined && this.addressList != null  && this.addressList.length > 0){
						let defaultFlagExist = false
						this.addressList.forEach(element => {
							if(this.addressId){
								if(element.id == this.addressId){
									this.addressInfo = element
									this.addressShow = true
									defaultFlagExist = true
								}
							}else if(element.defaultFlag){
								this.addressInfo = element
								this.addressId = element.id
								this.addressShow = true
								defaultFlagExist = true
							}
						});
						if(!defaultFlagExist){
							this.addressInfo = this.addressList[0]
							this.addressShow = true
						}
					}
				}
			})
		},
		openAddress(){
			this.showAddress = true
		},
		seleteAddress(address,index){
			this.addressInfo = address
			this.addressIndex = index
		},
		closeAddress(){
			this.showAddress = false
		},
		goAddress(){
			uni.navigateTo({
			    url: '/pagesD/pages/personal/myAddress?pay=1' 
			})
		},
		addAddress() {
		    uni.navigateTo({
		        url: '/pagesD/pages/personal/addAddress'
		    });
		},
    },
	onLoad(option) {
		this.id = option.id
	},
	onShow() {
		this.getMallInfo()
		this.getAddressList()
	},
}
</script>

<style lang="scss" scoped>
.pay {
    padding-top: 40rpx;

    .price__bottom {
        width: 100%;
        height: 156rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 8rpx 19rpx 2rpx rgba(215, 215, 215, 0.21);
        border-radius: 20rpx 20rpx 0rpx 0rpx;
        position: fixed;
        bottom: 0;
        padding: 32rpx 40rpx;
        box-sizing: border-box;
        clear: both;

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

            .price__num {

                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666666;

                span {
                    font-size: 32rpx;
                    font-family: DIN;
                    font-weight: 500;
                    color: #333333;
                }
            }

            .price__all {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666666;
                padding-right: 250rpx;

                span {
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #E1251B;
                }
            }
        }

        .price__next {
            width: 240rpx;
            height: 98rpx;
            background: url('@/static/index/border-btn.png') no-repeat;
            background-size: contain;
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            opacity: 0.96;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0;
            top: -10rpx;
        }
    }

    .address {
        background: #ffffff;
        display: flex;
        align-items: center;
        padding: 30rpx 40rpx;
        margin-bottom: 30rpx;

        .address__left {
			width: 600rpx;
            .right__title {
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                line-height: 48rpx;
                margin-bottom: 20rpx;
            }

            .right__phone {
                display: flex;
                align-items: center;

                

                span:nth-of-type(1) {
                    font-size: 28rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #666666;
                    padding: 0 14rpx;
                }

                span:nth-of-type(2) {
                    font-size: 28rpx;
                    font-family: DIN;
                    font-weight: 500;
                    color: #666666;
                }
				span:nth-of-type(3) {
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #F88D28;
					margin-left: 20rpx;
                    padding: 2rpx 4rpx;
                    border: 1rpx solid #F88D28;
                }
            }
        }

        .address__right {
            image {
                width: 14rpx;
                height: 24rpx;
            }
        }
    }
	.add__address {
		width: 670rpx;
		height: 90rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
		border-radius: 10rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #F88D28;
		display: flex;
		margin: 0 auto;
		align-items: center;
		justify-content: center;

		image {
			width: 34rpx;
			height: 36rpx;
			margin-right: 20rpx;
		}
	}
    .pay__item {
        padding: 30rpx 40rpx;

        .item {
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
            border-radius: 20rpx;
            padding: 30rpx;

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

                .top__img {
                    width: 120rpx;
                    height: 120rpx;
                    background: #F88D28;
                    border-radius: 8rpx;
                }

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

                        >span:nth-of-type(1) {
                            font-size: 32rpx;
                            font-family: PingFang SC;
                            font-weight: 500;
                            color: #333333;
                            width: 320rpx;
                            padding-right: 70rpx;
                        }

                        >span:nth-of-type(2) {
                            font-size: 24rpx;
                            font-family: PingFang SC;
                            font-weight: 500;
                            color: #F1251B;
                        }
                    }

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

                        >span:nth-of-type(1) {
                            font-size: 28rpx;
                            font-family: PingFang SC;
                            font-weight: 500;
                            color: #999999;
                            width: 320rpx;
                        }

                        >span:nth-of-type(2) {
                            font-size: 26rpx;
                            font-family: DIN;
                            font-weight: 500;
                            color: #999999;
                        }
                    }
                }
            }

            .item__bottom {
                margin-top: 30rpx;

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

                    >div:nth-of-type(1) {
                        font-size: 28rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #333333;
                    }

                    >div:nth-of-type(2) {
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #666666;
                    }

                    .bottom__price {
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #F1251B !important;
                    }
                }
            }
        }
    }

}
</style>
