<template>
    <view class="">
        <!-- 使用标题栏 -->
        <status-nav :statusBackw="true" :statusTitle="true" :whereCome="whereCome" :title-val="'订单确认'" :tabcolor="'#ffffff'"></status-nav>
        <!-- 地址信息 -->
        <view @tap="chooseAddress" class=" bacb disba padding-zy30 posir" :style="{paddingTop:(statusHNH+10)+'px'}" v-if="listAddress!=null">
           <view class="margin-sx40">
               <view class="fon28 color33 disac">
                   <view v-if="listAddress.is_default==1" class="fon24 colorb margin-y20 btnaddress" style="background-color: #e91111;">默认</view>
                   <!-- <view class="fon24 colorb margin-y20 btnaddress" style="background-color: #ffc600;">公司</view> -->
                   {{listAddress.province_str}} {{listAddress.city_str}} {{listAddress.county_str}} 
               </view>
               <view class="fon36 bold margin-sx20">{{listAddress.address}}</view>
               <view class="fon28 color33">{{listAddress.name}}   {{listAddress.phone}}</view>
           </view>
           <image class="youj" src="/static/img/my/youj.png" mode=""></image>
           <image class="posia lanh" src="/static/img/order/oaddressx.png" mode=""></image>
        </view>
		<view v-if="listAddress==null" @tap="chooseAddress" class="ptwo-box konga">添加地址</view>
        <!-- 商品列表 -->
        <view class="bacb margin-s20 padding-zy30 padding-x30">
            <view class="disba borbot padding-sx40" v-for="(itemOr,indexOr) in listInfo" :key="indexOr">
                <image class="flexs gouwcimg margin-y20" :src="itemOr.main_image" mode="aspectFill"></image>
                <view>
                    <view class="clips2 fon28">{{itemOr.spu_name}}</view>
                    <view class="fon24 color9 margin-sx10">{{itemOr.sub_title}}</view>
                    <view class="disba margin-s20">
                        <view class="bold colorf78">￥{{itemOr.price/100}}.0</view>
                        <view class="fon28">X{{itemOr.num}}</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 商品下单金额相关与留言 -->
        <view class="margin-s20 padding-zy30 bacb">
            <view @tap="clickfen(index)" v-for="(item,index) in infoArr" :key="index" class="disba padding-s40">
                <view class="fon30 color33 flexs">{{item.title}}</view>
                <view v-if="item.price!=''" class="disac width100 jcend">
                    <view :class="index==0?'bold':''" class="fon26 margin-y30" v-if="item.price!=''"><text :class="index==1?'colorf78':''">￥{{item.price}}</text></view>
                    <image v-if="item.src!=''" class="youj" :src="item.src" style="margin-left: -15rpx;" mode="aspectFill"></image>
                </view>
                <input class="borbot width100 margin-z20 fon24 padding-sx10" v-if="item.title=='订单备注'" type="text" v-model="orderBZ" placeholder="可以再这里给商家留言(*^▽^*)哟" placeholder-style="color:#9a9a9a;font-size:24rpx;font-weight:bold;"/>
                <view class="borbot"></view>
            </view>
            <view class="bold fon30 padding-sx20 textr">合计: <text class="colorf78 fon36">￥{{hPrice}}</text></view>
        </view>
        <view class="margin-s20 padding-zy30 color9 fon24 marb-box12 textr">本单商品可以获得{{percentage}}%的分红金额</view>
        <!-- 提交订单 -->
        <view class="disba bacb padding-sx10 padding-zy30 posi-bzy" style="border-top: 1rpx solid #eeeeee;">
            <view>
                <view class="fon28">合计: <text class="fon32 bold colorf78">￥{{hPrice}}</text></view>
                <view class="fon24" style="color: #353535;">已使用分红金额￥{{infoArr[1].price}}</view>
            </view>
			<!-- 发起支付 -->
            <button @tap="confirm" :disabled="disabled" class="bold btntj">{{btncon}}</button>
        </view>
        <!-- 底部弹框 -->
        <view @touchmove.stop.prevent="" v-if="isBtn" class="posiall zIn5" style="background-color: rgba(0,0,0,.6);">
            <view class="posi-bzy padding20 animated bounceInUp" style="border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;background-color: #FFFFFF;z-index: 6;">
                <view class="margin-s20 disba">
                    <view>分红抵扣</view>
                    <view @tap="isBtn=false" class="close-box">
                        <view style="transform: rotate(45deg);"></view>
                        <view style="transform: rotate(-45deg);"></view>
                    </view>
                </view>
                <view class="margin-sx20 width94" style="background-color: #f3f3f3;border-radius: 41rpx;">
                    <input @input="inputev" :disabled="disf" type="number" class="fon24 margin-zy30" :maxlength="len" style="height: 82rpx;" :value="fhprice" :placeholder="placeCon" />
                </view>
                <view class="fon24 color9">可用分红金额：￥{{usableAmount}}，实际获得金额：￥{{shijPrice}}</view>
                <view class="disbc">
                    <view @tap="tankEv" style="height: 86rpx;line-height: 86rpx;background-color: #FF7800;border-radius: 42.5rpx;text-align: center;color: #FFFFFF;font-weight: bold;width: 90%;margin-top: 40rpx;margin-bottom: 60rpx;">立即使用</view>
                </view>
            </view>
        </view>
        <successpopu :isShow="isShow" :isSuccess="isSuccess" :title="title" :content="content" :typeNum="typeNum" @change="changepopu"></successpopu>
    </view>
</template>

<script>
    import successpopu from '@/components/successpopu.vue';
    export default {
        components:{
            successpopu
        },
        data() {
            return {
                infoArr:[
                    {title:'商品总额',price:'0.00',src:''},
                    {title:'分红抵扣',price:'0.00',src:'/static/img/my/youj.png'},
                    {title:'配送费',price:'0.00',src:''},
                    {title:'本单分红',price:'0.00',src:''},
                    {title:'订单备注',price:'',src:''},
                ],
                orderBZ:'',
                isBtn:false,
                fhprice:'',
                isShow:false,
                isSuccess:true,
                title:'',
                content:'',
                disabled:false,
                btncon:'确认提交',
                usableAmount:'',//可用的分红抵扣金额
				zBig:'',//最大可抵扣实际金额
				percentage:0,//抵扣比例
                len:10,
				placeCon:'请输入您想要抵扣的金额',
				disf:false,
				listInfo:[],
				listAddress:'',
				hPrice:'',//合计金额
				shijPrice:'0.0',//实际获得金额
				orderInfo:'',//订单信息
				typeNum:'1',
				lenaddr:0,
				whereCome:0,
				newsku_list:[],
				statusHNH:uni.getStorageSync('statusHNH')
            }
        },
		onUnload() {
			uni.removeStorageSync('isAddr')
		},
		onShow() {
			this.$toolAll.tools.guoq()
			this.checkAddress()// 查询地址
		},
        onLoad(option) {
			// console.log(this.infoArr[3].price);
			// this.checkFHE()
			if(option.index!=undefined) this.whereCome = option.index
			this.orderInfo = uni.getStorageSync('orderInfo')
			// console.log('订单：',this.orderInfo);
			this.orderInfo.list.forEach(item=>{
				let obj = {
					coding:item.coding,
					id:item.id,
					main_image:this.$http + item.main_image,
					num:item.num,
					original_price:item.original_price,
					price:item.price,
					sku_name:item.sku_name,
					spec_summary:item.spec_summary,
					spu_id:item.spu_id,
					spu_name:item.spu_name,
					stock:item.stock,
					sub_title:item.sub_title
				}
				this.listInfo.push(obj)
			})
			this.listInfo.forEach(iteml=>{
				let nskObj = {
					sku_coding: iteml.coding,
					num: iteml.num
				}
				this.newsku_list.push(nskObj)
			})
			// console.log('参数',this.orderInfo);
			//商品总额
			this.infoArr[0].price = (this.orderInfo.original_total/100).toFixed(2)
			//运费
			this.infoArr[2].price = (this.orderInfo.freight/100).toFixed(2)
			//可用分红额度
			this.usableAmount = (this.orderInfo.bonus_amount/100).toFixed(2)
			if(this.usableAmount==0){
				this.placeCon = '暂无可用分红金额'
				this.disf = true
			}
			//抵扣比例
			this.percentage = this.orderInfo.bonus_rate
			// 实际金额
			// console.log('总金额+运费=',this.infoArr[0].price*1 + this.infoArr[2].price*1);//没问题
			
			this.hPrice = this.infoArr[0].price*1 + this.infoArr[2].price*1 - this.infoArr[1].price*1
			// 本单分红
			this.infoArr[3].price = (this.hPrice * (this.percentage/100)).toFixed(2)
			// 实际获得金额
			// this.shijPrice = (this.orderInfo.bonus_amount * this.orderInfo.deduction_rate/100).toFixed(2)
			// 地址
			this.listAddress = this.orderInfo.address
			
			
			let getisAddr = uni.getStorageSync('isAddr')
			if(getisAddr!='') this.listAddress = getisAddr
			
			// console.log(this.listAddress);
			
        },
        methods: {
			// checkFHE(){//查询可用分红额度
			// 	this.$requst.post('order/bonus-info').then(res=>{
			// 		if(res.code==0){
			// 			this.usableAmount = res.data.bonus
			// 			this.percentage = res.data.bonus_deduction_rate
			// 			if(this.usableAmount==0){
			// 				this.placeCon = '暂无可用分红金额'
			// 				this.disf = true
			// 			}
			// 			this.infoArr[3].price = this.infoArr[0].price*(this.percentage/100)
			// 			// console.log(this.infoArr);
			// 		}
			// 		// console.log(res);
			// 	},error=>{})
			// },
			checkAddress(){//查询地址列表事件
				this.$requst.post('user/address').then(res=>{
					if(res.code==0){
						this.lenaddr = res.data.length
						if(this.listAddress==''){
							if(this.lenaddr!=0){
								res.data.forEach(item=>{
									if(item.is_default==1){
										this.listAddress = item
									}
								})
							}
						}
					}
				},error=>{})
			},
            confirm(){//提交订单事件
				let ya = this
				// console.log(this.listAddress);
				if(this.lenaddr!=0){
					this.disabled = true
					this.btncon = '正在提交...'
					// console.log('数据：',this.orderInfo);
					// console.log('订单参数：',this.newsku_list);
					let orderObj = {
						sku_list: this.newsku_list,
						total: this.hPrice*100,
						address_id: this.listAddress.id,
						original_total: this.infoArr[0].price*100,
						bonus_amount: this.fhprice*100,
						bonus_deduction: this.infoArr[1].price*100,
						freight: this.orderInfo.freight,
						bonus: this.infoArr[3].price*100,
						remarks: this.orderBZ//买家备注
					}
					console.log('创建订单参数',orderObj);
					// console.log('随机数',this.$toolAll.tools.randomStr());
					this.$requst.post('order/create',orderObj).then(res=>{
						// console.log('调起结果',res);
						let dataInfo = res
						if(res.code==0){
							if(dataInfo.data.needPay){
								uni.requestPayment({
									provider: 'wxpay',
									appId:dataInfo.data.payment_params.appId,//appId
									timeStamp: dataInfo.data.payment_params.timeStamp,//时间戳
									nonceStr: dataInfo.data.payment_params.nonceStr,//随机字符串
									package: dataInfo.data.payment_params.package,//package
									signType: dataInfo.data.payment_params.signType,//MD5
									paySign: dataInfo.data.payment_params.sign,//签名
									success:(res)=> {
										this.btncon = '确认提交'
										this.isShow = true
										this.isSuccess = true
										this.title = '恭喜你，购买成功'
										this.content = '可以在个人中心--我的订单查看订单详情'
										// console.log('success:' + JSON.stringify(res));
										this.$requst.post('order/paid',{order_id:dataInfo.data.order_id}).then(result=>{
											// console.log('成功通知',result);
										},error=>{})
									},
									fail: (err)=> {
										// console.log('fail:' + JSON.stringify(err));
										this.disabled = false
										this.btncon = '确认提交'
									}
								});
							} else {
								this.btncon = '确认提交'
								this.isShow = true
								this.isSuccess = true
								this.title = '恭喜你，购买成功'
								this.content = '可以在个人中心--我的订单查看订单详情'
								// console.log('success:' + JSON.stringify(res));
								this.$requst.post('order/paid',{order_id:dataInfo.data.order_id}).then(result=>{
									// console.log('成功通知',result);
								},error=>{})
							}
							
						}
					},error=>{})
				}else {
					this.$toolAll.tools.showToast('请先完善地址信息')
					setTimeout(function(){
						ya.chooseAddress()
					},500)
				}
            },
            changepopu(){
                this.isShow = false
            },
            clickfen(index){
				if(index==1){this.fhprice=''}
                index==1?this.isBtn = true : this.isBtn = false
            },
            chooseAddress(){
                uni.navigateTo({
                    url:'/pagesB/adManagement/adManagement?isOrder=0'
                })
            },
            inputev(e){//分红金额输入框
                let val = e.target.value
                let ya =this
                let result = this.$toolAll.tools.checkPrice(val,ya.usableAmount)
                ya.len = result.len;
                ya.fhprice = result.val
				if(ya.fhprice>=100){
					ya.shijPrice = (ya.fhprice * ya.orderInfo.deduction_rate/100).toFixed(2)
				}
            },
			tankEv(){//立即使用事件
				if(this.shijPrice==''){this.shijPrice = '0.0'}
				if(this.fhprice<100){
					this.$toolAll.tools.showToast('抵扣金额最低 100')
				} else {
					this.infoArr[1].price = this.shijPrice
					if((this.infoArr[0].price - this.shijPrice)<=0){
						this.hPrice = 0
					} else {
						this.hPrice = this.infoArr[0].price - this.shijPrice
					}
					if((this.hPrice * this.percentage/100)==0){
						this.infoArr[3].price = '0.00'
					} else {
						this.infoArr[3].price = this.hPrice * this.percentage/100
					}
					this.isBtn = false
				}
			}
        }
    }
</script>

<style>
</style>
