<template>
    <view class="content">
        <form @submit="stockForm" class="take">
            <view class="take">
                <view class="take-label">
                    <view class="item">
                        <view class="name">
                            <image src="@/static/icons/takeIcon_10.png" mode="widthFix"></image>单价金额
                        </view>
                        <view class="number numberColor">
							￥{{amount}}
                        </view>
                    </view>
					<view class="item">
					    <view class="name">
					        <image src="@/static/icons/takeIcon_01.png" mode="widthFix"></image>捐赠份数
					    </view>
					    <view class="number">
					        <view class="btn" @click="goodsNumber('remove')">-</view>
					        <input @blur="goodsNumberInput" class="see" type="text" :value="num" />
					        <view class="btn" @click="goodsNumber('plus')">+</view>
					    </view>
					</view>
                    <view class="item">
                        <view class="name">
                            <image src="@/static/icons/takeIcon_02.png" mode="widthFix"></image>我的祝福
                        </view>
                        <textarea class="remarks" name="remark" placeholder="请输入祝福语~" />
                    </view>
                </view>
                
                <view class="take-label">
                    <view class="item site" :class="{active : address == ''}">
                        <block v-if="address">
                            <view class="site-title">
                                {{address.name}}<text>{{address.mobile}}</text>
                            </view>
                            <view class="site-text">
                                {{address.full_address}}
                            </view>
                            <view class="site-change" @click="$Router.push({name: 'addressIndex', params: { type: 'selectAddress', experience: isExperience}})">
                                更改地址 <u-icon name="arrow-right" size="26" color="#e64248"></u-icon>
                            </view>
                        </block>
                        <view class="edit-no" v-else>
                        	<image src="/static/imgs/site_no_add.png"></image>
                        	<view class="site-change" @click="$Router.push({name: 'addressIndex', params: { type: 'selectAddress', experience: isExperience}})">
                        	    新增地址 <u-icon name="arrow-right" size="26" color="#e64248"></u-icon>
                        	</view>
                        </view>
                    </view>
                </view>
            </view>
            
            <view class="site-btn">
            	<button form-type="submit" :disabled="disabled">立即支付</button>
            </view>
        </form>
    </view>
</template>

<script>
	const jweixin = require('jweixin-module');
    import { donationTake, donationSee } from '@/apis/interfaces/mall'
    export default {
    	data() {
    		return {
                num          : 1,  //数量默认1
                address      : '', //地址
                stockData    : '', //数据
                isExperience : '', //身份
                disabled     : false,
				amount       : ''
    		}
    	},
    	onShow() {},
        created() {
			// 获取前置
			this.pickInfo();
		},
    	methods: {
			// 提货前置
			pickInfo (){
			    donationSee({
					qty         : this.num,
					goods_sku_id: this.$Route.query.skuId
				}).then(res => {
			        this.address = res.address
			        this.amount  = res.amount
			        // this.isExperience = res.dientity.is_experience
			    }).catch(err => {
			    	uni.showToast({
			    		title: err.message,
			    		icon: "none"
			    	})
			    })
			},
			
            // 商品数量加减
            goodsNumber(e){
                let num = this.num
                if (e == 'plus'){
                    num ++;
                    if(num > this.stockData.stock ){
                        wx.showToast({
                            title: '商品数量不能大于库存量',
                            icon: 'none'
                        });
                        num = this.stockData.stock
                    }
                    
                }else{
                    if (num > 1){
                        num --;
                    }else{
                        uni.showToast({
                            title   : '商品数量不能小于1',
                            icon    : 'none'
                        })
                    }
                     this.num = num
                }
                this.num = num
            },
            
            /**
             * 输入商品数量
             */
            goodsNumberInput(e) {
                let goodsNum = e.detail.value;
                if (goodsNum > 0) {
                    if(goodsNum > this.stockData.stock ){
                        uni.showToast({
                            title: '商品数量不能大于库存量',
                            icon: 'none'
                        });
                        this.num = this.stockData.stock
                        return
                    }
                    this.num = goodsNum
                } else {
                    uni.showToast({
                        title: '商品数量不能小于1',
                        icon: 'none'
                    });
                    this.num = 1
                }
            },
            
            // 申请提货
            stockForm(e) {
                let newQty = this.num
                if(this.isExperience) {
                    newQty = this.stockData.stock
                }
                let data = {
                    remark      : e.detail.value.remark,
                    qty         : newQty,
                    address_id  : this.address.address_id,
					goods_sku_id: this.$Route.query.skuId,
					name        : this.$Route.query.name
                }
                donationTake(data).then(takeRes => {
					this.disabled = true
                    // 跳到支付页面
                    this.$Router.replaceAll({name: 'indexPay', params: { orderNo: takeRes.order_no, total: takeRes.total }})
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon : 'none'
                	})
                })
            }
    	}
    }
</script>

<style lang="scss" scoped>
    .content {
        background-color: #f4f4f4;
        min-height: 100vh; 
    }
    
    .take {
        border-bottom: 180rpx solid transparent;
    }
    
    .take-label {
        padding: $padding $padding 0;
        box-sizing: border-box;
        .item {
            padding: $padding;
            box-sizing: border-box;
            background-color: #FFFFFF;
            border-bottom: 2rpx solid #f3f3f3;
            position: relative;
            font-size: $title-size-lg;
            .name {
                display: flex;
                flex: 1;
                image {
                    width: 44rpx;
                    height: 44rpx;
                    margin-right: 15rpx;
                }
            }
            .time {
                color: #565656;
                position: absolute;
                right: $padding;
                top: $padding;
            }
            .stock {
                font-weight: 600;
                text {
                    padding-left: 5rpx;
                }
            }
            .number {
                display: flex;
                position: absolute;
                right: $padding;
                top: $padding;
				&.numberColor {
					color: #e64248;
					font-weight: 600;
				}
                .btn {
                    width: 40rpx;
                    height: 40rpx;
                    line-height: 34rpx;
                    font-weight: 600;
                    border-radius: 50%;
                    color: #1d37e2;
                    border: #1d37e2 2rpx solid;
                    text-align: center;
                }
                .see {
                    width: 60rpx;
                    text-align: center;
                    padding: 0 $padding - 10;
                    line-height: 42rpx;
                    font-size: $title-size;
                    display: inline-block;
                }
            }
            .remarks {
                margin-top: $margin;
                background-color: #f4f4f4;
                font-size: $title-size-lg;
                padding: 20rpx $padding;
                box-sizing: border-box;
                border-radius: $radius-sm;
                color: $text-gray;
                width: 100%;
            }
        }
        .site {
            padding: $padding;
            position: relative;
            // &::after {
            //     position: absolute;
            //     content: '';
            //     left: $padding + 10;
            //     top: $padding + 30;
            //     background-color: #FFFFFF;
            //     border: #e64248 solid 6rpx;
            //     width: 12rpx;
            //     height: 12rpx;
            //     border-radius: 50%;
            // }
            &.active::after {
                display: none;
            }
            .site-title {
                margin-bottom: 10rpx;
                font-weight: 600;
                font-size: $title-size;
                text {
                    padding-left: 10rpx;
                }
            }
            .site-text {
                color: #565656;
            }
            .site-change {
                border: 2rpx solid #e64248;
                text-align: center;
                line-height: 74rpx;
                color: #e64248;
                border-radius: $radius-m;
                margin-top: $margin;
            }
        }
    }
    
    /* 按钮 */
    .site-btn {
        width: 100%;
        box-sizing: border-box;
        padding: 30rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 99;
        right: 0;
        background: white;
        button {
            background: #B79872;
            text-align: center;
            color: white;
            height: 88rpx;
            line-height: 88rpx;
            font-size: $title-size;
            font-weight: normal;
            width: 100%;
            margin: 0;
            padding: 0;
            border-radius: 10rpx;
            &[disabled] {
                background: #7789ff !important;
                color: #fff !important;
            }
        }
    }
    
    .edit-no {
        text-align: center;
        color: $text-gray;
        image {
        	width: 240rpx;
        	height: 240rpx;
        }
    }
    
    // 温馨提示
    .reminder {
        background-color: #eef0ff;
        color: #B79872;
        padding: $padding;
        box-sizing: border-box;
        .reminder-tips {
            font-weight: 600;
            margin-bottom: 10rpx;
            display: flex;
            line-height: 34rpx;
            image {
                width: 34rpx;
                height: 34rpx;
                margin-right: 10rpx;
            }
        }
        text {
            font-size: $title-size-lg;
            padding-left: 44rpx;
        }
    }
</style>
