<template>
    <view class="container">
        <template v-if="Data.is_sell != 1">
            <div class="qtmd mar_b20" v-if="goodsInfo.shipping_method == 2">
                <view class="order_list flex_r flex_ac flex_jb">
                    <view class="list_name">发货方式</view>
                    <view class="list_con flex_r flex_jb">
                        <div class="select_tab" @click="onprom(0)" :class="{st_active:prom_type===0}">快递邮寄</div>
                        <div class="select_tab" @click="onprom(1)" :class="{st_active:prom_type===1}">到店自提</div>
                    </view>
                </view>
            </div>
            <div class="qtmd mar_b20" v-else>
                <view class="order_list flex_r flex_ac flex_jb">
                    <view class="list_name">发货方式</view>
                    <view class="list_con flex_r flex_jb">
                        <div class="list_con" v-if="prom_type==0">快递邮寄</div>
                        <div class="list_con" v-else>到店自提</div>
                    </view>
                </view>
            </div>
        </template>
        <!-- 收货地址 -->
        <view class="address mar_b20" v-if="Data.is_sell != 1 && prom_type != 1">
            <block v-if="DefaultAddress.name">
                <view class="add_head flex_r flex_ac flex_jb">
                    <view class="user_info flex_r flex_ac">
                        <view class="user_name">{{ DefaultAddress.name }}</view>
                        <view class="user_phone">{{ DefaultAddress.mobile }}</view>
                    </view>
                    <view class="set_address flex_r flex_ac" @tap="chooseWXaddress">
                        <image class="set_img" src="/static/img/setAddress.png" mode=""></image>
                        <view class="set_text">修改</view>
                    </view>
                </view>
                <view class="add_name mar_t20">{{ DefaultAddress.province + ' ' + DefaultAddress.city + ' ' + DefaultAddress.area + ' ' + DefaultAddress.street + ' ' + DefaultAddress.address }}</view>
            </block>
            <block v-else>
                <view class="add_address flex_c flex_ac flex_jc" @tap="chooseWXaddress('add')">
                    <image class="add_icon" src="/static/img/add.png" mode=""></image>
                    <view class="add_text">添加收货地址</view>
                </view>
            </block>
        </view>
        <!-- 收货地址-end -->
        <!-- 商品信息 -->
        <view class="goods_info mar_b20">
            <view class="info_type">{{ modularName }}</view>
            <view class="goods flex_r">
                <image class="goods_img" :src="goodsInfo.original_img" mode=""></image>
                <view class="goods_con flex_c flex_jc flex_jb">
                    <view class="goods_name ellipsis2">{{ goodsInfo.goods_name }}</view>
                    <view class="goods_msg" v-if="Data.type == 2">{{ goodsInfo.trade_price }}元+{{ goodsInfo.trade_num }}批发券+{{
                        goodsInfo.treasure_price
                        }}茶宝</view>
                    <view class="goods_msg" v-else>{{ goodsInfo.cost_price }}</view>
                    <view class="goods_num">x {{ Data.num }}</view>
                </view>
            </view>
        </view>
        <!-- 商品信息-end -->
        <!-- 订单信息 -->
        <view class="order">
            <view class="order_list flex_r flex_ac flex_jb">
                <view class="list_name">数量</view>
                <view class="list_con">{{ Data.num }}</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.is_sell != 1 && prom_type != 1">
                <view class="flex_r flex_ac">
                    <view class="list_name">运费</view>
                    <view class="list_con p_color">({{ freight }}元/每套)</view>
                </view>
                <view class="list_con">￥{{ $h.Mul(freight, Data.num) }}</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 2 || Data.type == 5">
                <view class="flex_r flex_ac">
                    <view class="list_name">茶宝</view>
                    <view class="list_con p_color">(可用{{ userinfo.cha_bao }})</view>
                </view>
                <view class="list_con" v-if="Data.type != 5">{{ goodsInfo.treasure_price * Data.num }} 茶宝</view>
                <view class="list_con" v-else>{{ $h.Mul(goodsInfo.cha_bao, Data.num) }} 茶宝</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type == 2">
                <view class="flex_r flex_ac">
                    <view class="list_name">批发券</view>
                    <view class="list_con p_color">(可用{{ userinfo.integral }})</view>
                </view>
                <view class="list_con">{{ $h.Mul(goodsInfo.trade_num, Data.num) }} 批发券</view>
            </view>
			<template v-if="Data.type==4 && isAct">
				<view class="order_list flex_r flex_ac flex_jb">
					<view class="list_name">商品原价</view>
					<view class="list_con">￥{{ originalPrice }}</view>
				</view>
				<view class="order_list flex_r flex_ac flex_jb">
					<view class="flex_r flex_ac">
						<view class="list_name">消费金抵</view>
                    	<view class="list_con p_color">（可用 {{ parseFloat(local_uinfo.integral) }}）</view>
					</view>
					<view class="list_con p_color">-￥{{ goldNum }}</view>
				</view>
			</template>
            
			<view class="order_list flex_r flex_ac flex_jb" v-if="Data.type != 5">
                <view class="list_name">商品金额</view>
                <view class="list_con">￥{{ CommodityPrice || 0 }}</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="['1','2','3'].includes(Data.type)">
                <view class="list_name">可用云宝</view>
                <view class="list_con p_color">￥{{ userinfo.user_money }}</view>
            </view>
            <view class="order_list flex_r flex_ac flex_jb" v-if="Data.type==4 && isAct">
                <view class="list_name">佣金余额</view>
                <view class="list_con g_color">￥{{ local_uinfo.property }}</view>
            </view>

        </view>
        <!-- 订单信息-end -->
        <!-- 底部操作栏 -->
        <view class="bar flex_r flex_ac flex_jb">
            <view class="bar_info flex_r flex_ac">待支付<text>￥{{ obligation }}</text></view>
            <view class="pay_btn flex_r flex_ac flex_jc" @tap="payment">立即支付</view>
        </view>
        <!-- 底部操作栏-end -->
        <!-- 收货地址弹窗 -->
        <userAddress ref="userAddress" @addressConfirm="loadDa" />
    </view>
</template>
<script>
let page = 1;
let app = getApp();
var appEv = app.$vm.$options;
import { post } from "@/request/api.js";
import { ToPayOpre } from "@/utils/reqTools.js";
let toPayOpre = new ToPayOpre();
import userAddress from "pages/xghc-addrress/userAddress";
export default {
    data() {
        return {
            Data: {},
            goodsInfo: "", // 商品信息
            modularName: "", // 商品类型
            DefaultAddress: {}, // 用户默认地址
			CommodityPrice: 0, //商品价格
            obligation: 0, //待支付
            freight: 0, //运费
			goldNum: 0, //消费金抵扣
			originalPrice: 0, //抵扣后价格

            userinfo: {},
            local_uinfo: {},

            prom_type: 0,
			isAct: false, //是否激活本地生活
        };
    },
    components: {
        userAddress,
    },
    onLoad(e) {
        this.Data = e;
        this.getLU();
		this.isActivation();
        this.getuserInfo();
        this.loadAddress();
        this.loadData(e);

        this.modularName = this.tidyTpye(e.type);
    },
    computed: {
        runp() {
            switch (this.Data.type) {
                case '2':
                    return this.goodsInfo.trade_price;
                case '4':
                    return this.$h.Sub(this.goodsInfo.cost_price, this.isAct ? this.goodsInfo.consume : 0);
                default:
                    return this.goodsInfo.cost_price;
            }
        }
    },
    methods: {
        onprom(va) {
            this.prom_type = va
            this.loadData(this.Data);
        },
        // 是否激活本地生活
        async isActivation() {
            let res = await post("local/isActivation", this.Query);
			if (res.code === 0) {
				this.isAct = true
			}else {
				uni.hideToast();
				this.isAct = false
			}
        },
        loadData(da) {
            post("v1/goods/goodsDetail", da).then((res) => {
                if (res.code === 0) {
                    this.goodsInfo = res.data.data;
                    if (this.goodsInfo.shipping_method != 2) this.prom_type = this.goodsInfo.shipping_method
                    post("v1/goods/freight", { type: da.type, id: da.id }).then((res) => {
                        if (res.code === 0) this.freight = res.data.freight;
						
                        // 计算待支付
                        let p = this.Data.type == 2 ? this.goodsInfo.trade_price : this.goodsInfo.cost_price; //商品单价
                        let y = (this.Data.is_sell == 1 || this.prom_type == 1) ? 0 : this.freight; // 运费单价   寄卖、自提 运费为0
                        let ps = this.$h.Mul(p, this.Data.num); //商品总价
						this.originalPrice = ps; this.CommodityPrice = ps;
                        let ys = this.$h.Mul(y, this.Data.num) //运费总价
                        let a = this.$h.Add(ps, ys); //商品总价加运费
                        let b = this.$h.Sub(a, this.userinfo.user_money); //待支付金额
                        let b1 = this.$h.Sub(ps, this.userinfo.user_money); //待支付金额 零售&批发   运费必须现金支付
                        if (this.Data.type == 4) {
							if(this.isAct){
								let um = this.local_uinfo.property; //本地生活模块佣金余额
								let up = this.local_uinfo.integral; //本地生活模块消费金
								let goldnum = this.$h.Mul(this.goodsInfo.consume, this.Data.num)
								this.goldNum = up > goldnum ? goldnum : up;
								let sp = this.$h.Sub(ps, this.goldNum);
								this.CommodityPrice = sp;
								let b2 = this.$h.Sub(sp, um); //甄选好物  可以使用本地生活佣金支付
								this.obligation = b2 > 0 ? b2 : 0;
							}
							else this.obligation = a;
						}
                        else if (["5", "6"].includes(this.Data.type)) this.obligation = a;
                        else if (["1", "2"].includes(this.Data.type)) this.obligation = b1 > 0 ? this.$h.Add(b1, ys) : ys;
                        else this.obligation = b > 0 ? b : 0;
                    });
                }
            });
        },
        // 获取用户地址
        async loadAddress() {
            let res = await post("v1/user/addressList");
			if (res.code === 0) {
				let da = res.data.data;
				if (da.length) {
					for (const i of da) {
						if (i.status == 1) {
							this.DefaultAddress = i;
							break;
						} else this.DefaultAddress = da[0];
					}
				}
			}
        },
        //获取微信的收货地址
        getwexinAddress() {
            let that = this
            uni.chooseAddress({
                success(res) {
                    console.log(res);
                    if (res.errMsg == "chooseAddress:ok") {
                        let data = {
                            province: res.provinceName,
                            city: res.cityName,
                            area: res.countyName,
                            street: res.streetName,
                            address: res.detailInfo,
                            mobile: res.telNumber,
                            name: res.userName,
                            is_default: 0,
                        };
                        post("v1/user/addAddress", data).then((res) => {
                            if (res.code === 0) {
                                appEv.errTips(res.msg);
                                that.loadAddress();
                            }
                        });
                    }
                },
            });
        },
        chooseWXaddress(va) {
            let a = va != "add" ? this.DefaultAddress.id : "add";
            this.$refs.userAddress.open(a);
        },
        // 支付
        payment() {
            let that = this
            if (that.obligation == 0) {
                uni.showModal({
                    title: "温馨提示",
                    content: "你将使用云宝支付该订单",
                    showCancel: true,
                    confirmText: "确认",
                    confirmColor: "#f02f2f",
                    success(res) {
                        if (res.confirm) {
                            that.Pay();
                        }
                    },
                });
            } else {
                that.Pay();
            }
        },
        Pay() {
            let type = "jsapi";
            // #ifdef  H5
            type = "H5";
            // #endif
            // #ifdef  APP
            type = "app";
            // #endif
            // #ifdef  MP-WEIXIN
            type = "jsapi";
            // #endif

            let that = this

            post("v1/goods/submitOrder", {
                ...that.Data,
                address_id: that.DefaultAddress.id || '',
                regional_code: that.DefaultAddress.regional_code || '',
                trade_type: type,
                prom_type: that.prom_type,
                price: that.goodsInfo.cost_price,
            }).then((res) => {
                if (res.code === 0) {
                    if (res.data.length !== 0) {
                        toPayOpre.toPay(res.data, (rea) => {
                            if (!rea) {
                                // 支付成功
                                appEv.errTips("支付成功");
                                if (that.Data.type == 2 && that.Data.is_sell == 1) {
                                    setTimeout(() => {
                                        that.goto("/pages/account/consignment");
                                    }, 1500);
                                } else {
                                    setTimeout(() => {
                                        that.goto("/pages/szw-order-list/index");
                                    }, 1500);
                                }
                            } else {
                                // 支付失败
                                appEv.errTips("支付已取消");
                            }
                        });
                    } else {
                        appEv.errTips("支付成功");
                        setTimeout(() => {
                            if (that.Data.is_sell != 1) that.goto("/pages/szw-order-list/index");
                            else that.goto("/pages/account/consignment");
                        }, 1500);
                    }
                } else {
                    that.loadData(that.Data);
                }
            });

        },
        loadDa(da) {
            this.DefaultAddress = da;
        },
        // 获取userinfo
        async getuserInfo() {
            this.userinfo = await uni.userfun();
        },
        async getLU() {
            this.local_uinfo = await uni.Luserfun()
        },
    },
};
</script>
<style lang="scss">
// 页面配置
page {
    background: #f5f5f5;
}

.container {
    padding: 20rpx;
    box-sizing: border-box;
}

// 页面配置-end

// 收货地址
.user_phone {
    font-size: 26rpx;
    color: #222;
}

.set_text {
    font-size: 24rpx;
    color: #868686;
}

.set_img {
    width: 24rpx;
    height: 24rpx;
    margin-right: 9rpx;
}

.add_address {
    width: 100%;
    overflow: hidden;
    height: 109rpx;
}

.add_icon {
    width: 60rpx;
    height: 60rpx;
    margin-bottom: 12rpx;
}

.user_name {
    font-size: 32rpx;
    color: #000;
    margin-right: 46rpx;
}

.add_name {
    // width: 448rpx;
    // overflow: hidden;
    font-size: 24rpx;
    color: #868686;
}

.add_text {
    font-size: 24rpx;
    color: #868686;
    font-family: "SourceHanSansCN-Normal";
}

.address {
    width: 100%;
    overflow: hidden;
    padding: 28rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12rpx;
}

// 收货地址-end

// 商品信息
.goods:nth-last-child(1) {
    margin-bottom: 0;
}

.goods_num {
    // text-align: right;
    font-size: 26rpx;
    color: #989898;
    position: absolute;
    bottom: 0;
    right: 0;
}

.goods_con {
    width: calc(100% - 202rpx - 36rpx);
    min-height: 187rpx;
    position: relative;
    // overflow: hidden;
}

.goods {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20rpx;
    align-items: initial;
}

.goods_img {
    width: 202rpx;
    height: 187rpx;
    margin-right: 36rpx;
    border-radius: 12rpx;
}

.goods_name {
    font-size: 34rpx;
    color: #1b1b1b;
    font-family: "SourceHanSansCN-Bold";
    font-weight: bold;
}

.goods_msg {
    overflow: hidden;
    font-size: 26rpx;
    color: #18bb88;
    font-family: "SourceHanSansCN-Medium";
    font-weight: 500;
}

.info_type {
    font-size: 30rpx;
    color: #353535;
    font-family: "SourceHanSansCN-Bold";
    font-weight: bold;
    margin-bottom: 43rpx;
}

.goods_info {
    width: 100%;
    overflow: hidden;
    padding: 28rpx;
    background: #fff;
    border-radius: 12rpx;
    box-sizing: border-box;
}

// 商品信息-end

// 订单信息
.list_name {
    width: 112rpx;
    text-align-last: justify;
    font-size: 26rpx;
    color: rgba(0, 0, 0, 0.8);
    // font-family: SourceHanSansCN-Medium;
    font-weight: bold;
}

.order_list:nth-last-child(1) {
    margin-bottom: 0;
}

.order_list {
    width: 100%;
    overflow: hidden;
    margin-bottom: 30rpx;
}

.list_con {
    font-size: 24rpx;
    color: #000;
    font-family: "SourceHanSansCN-Medium";
    font-weight: bold;
    line-height: 1;
}

.order {
    width: 100%;
    overflow: hidden;
    padding: 28rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12rpx;
}

.list_name text {
    font-size: 26rpx;
    color: rgba(0, 0, 0, 0.8);
    font-family: "SourceHanSansCN-Medium";
    font-weight: bold;
    line-height: 1;
}

.p_color {
    color: #ff6d44;
}
.g_color {
    color: #18bb88;
}

// 订单信息-end

// 底部操作栏
.bar_info {
    font-size: 24rpx;
    color: #000;
    font-family: "SourceHanSansCN-Medium";
    font-weight: bold;
}

.bar_info text {
    font-size: 30rpx;
    color: #ff6d44;
    font-family: "SourceHanSansCN-Medium";
    font-weight: bold;
}

.pay_btn {
    width: 187rpx;
    height: 72rpx;
    font-size: 30rpx;
    font-family: "SourceHanSansCN-Medium";
    font-weight: bold;
    background: #2db48a;
    border-radius: 36rpx;
    color: #fff;
}

.bar {
    width: 100%;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.15);
    padding: 14rpx 30rpx;
    box-sizing: border-box;
}

// 底部操作栏-end

.qtmd {
    width: 100%;
    padding: 28rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12rpx;

    .select_tab {
        margin-left: 30rpx;
        font-size: 28rpx;

        &:first-child {
            margin-left: 0;
        }

        &::before {
            content: "";
            display: inline-block;
            width: 32rpx;
            height: 32rpx;
            background-image: url("~@/static/img/weixuanzhong_icon.png");
            background-size: 100% 100%;
            vertical-align: middle;
            margin-right: 6rpx;
        }
    }

    .st_active {
        &::before {
            background-image: url("~@/static/img/xuanzhong_icon.png");
        }
    }
}
</style>