<template>
    <BasePage>
        <div class="b_l_w cart_tj_xzdz">
            <div class="b_l_w xzdz" @click="$refs.ad_selector.showSelector()">
                <span v-if="address.ReceiveName">
                    <p>
                        {{ address.ReceiveName }}
                        {{ address.ReceivePhone }}
                    </p>
                    {{ address.province }}-{{ address.city }}-{{ address.county }}-{{
                        address.ReceiveAddress
                    }}
                </span>
                <span v-else>请选择收货地址</span>
                <van-icon name="arrow" />
            </div>
            <div class="b_l_w cart_tj_xzdz_di"></div>
        </div>
        <div class="order-details f5">
            <div>
                <div style="font-size: 3.467vw;">
                    <div class="product">
                        <div class="d">
                            <img :src="$file(product.img)" />
                            <div class="c">
                                <b>{{ product.name }}</b>
                                <p>数量：{{ product.buynums }}</p>
                            </div>
                            <div class="price">
                                <b><span>￥</span>{{ (product.saleprice || 0) * (product.buynums || 1) }}</b>
                            </div>

                            <van-stepper v-model="product.buynums" :min="1" :max="999" input-width="7vw"
                                button-size="6vw" integer></van-stepper>
                        </div>
                    </div>
                </div>
            </div>

            <div class="content">
                <p>
                    商品金额
                    <b>￥{{ totalPrice }}</b>
                </p>
                <!-- <van-cell clickable :title="`使用果实抵扣`"
                    :label="`剩余:${fruit}果实，果实单价￥${fruitData.TodayPrice}，可抵￥${$trunc(useFruit / 100, 2)}`"
                    @click.stop="toggleClick">
                    <template #right-icon>
                        <van-checkbox v-model="isFruit" checked-color="#ee0a24" :disabled="fruit == 0" @click.stop />
                    </template>
</van-cell> -->
                <p>
                    实付金额
                    <b class="red">￥{{ useFruitPrice }}</b>
                </p>
            </div>

            <van-field v-if="product.id" label="买家留言" autosize type="textarea" v-model="remark" placeholder="请输入买家留言" />

        </div>

        <van-submit-bar class="b_l_w" placeholder :price="useFruitPrice * 100" :tip="`商品总数:${totalQuantity}件`"
            tip-icon="info-o" safe-area-inset-bottom>
            <template #button>
                <van-button round color="rgb(227, 83, 33)" :loading="isloading" @click="submitOrder"
                    style="height: 10vw;">
                    提交订单
                </van-button>
            </template>
        </van-submit-bar>

        <AddressSelector ref="ad_selector" @confirm="onAddressConfirm" />

    </BasePage>
</template>

<script>
export default {
    name: 'TradeConfirm',
    mounted() {
        this.loadProduct();
    },
    data() {
        return {
            product: {},
            remark: "",
            address: {},
            coupon: 0,
            useCoupon: 0,
            fruit: 0,
            fruitData: {},
            isFruit: false,
            isloading: false,
        };
    },
    computed: {
        totalQuantity() {
            return this.product.buynums || 1;
        },
        totalPrice() {
            return ((this.product.saleprice || 0) * (this.product.buynums || 1)).toFixed(2);
        },
        useFruitPrice() {
            return this.totalPrice;
        },
    },
    methods: {
        loadProduct() {
            this.$get(`/v1/client/EProsClient/${this.$route.query.id}`).then(res => {
                const data = res.data;
                const skuid = this.$route.query.skuid;
                const sku = (data.specCombinations || []).find(s => s.skuid == skuid);
                this.product = {
                    ...data,
                    skuid: sku?.skuid,
                    skuname: sku?.skuname,
                    saleprice: sku?.saleprice,
                    originalprice: sku?.originalprice,
                    img: sku?.img || data.img,
                    buynums: 1
                };
            });
        },
        onAddressConfirm(addr) {
            this.address = addr;
        },
        submitOrder() {
            if (!this.address.ReceiveName) {
                this.$showFailToast("请选择收货地址！");
                return;
            }
            this.isloading = true;
            const form = {
                info: [{
                    proid: this.product.id,
                    skuid: this.product.skuid,
                    skuname: this.product.skuname,
                    buynums: this.product.buynums || 1
                }],
                expresstype: true,
                name: this.address.ReceiveName,
                phone: this.address.ReceivePhone,
                province: this.address.province,
                city: this.address.city,
                county: this.address.county,
                address: this.address.ReceiveAddress,
                isquan: this.isFruit
            };
            this.$post('/v1/client/FOrdersClient', form).then(data => {
                this.$showSuccessToast('提交成功');
                this.$navigate('/Pay?ordernum=' + data.data);
            }).catch(err => {
                this.$showFailToast(err.errmsg);
            }).finally(() => {
                this.isloading = false;
            });
        },
        toggleClick() {
            if (!this.exchangePoint)
                this.isFruit = !this.isFruit;
        }
    },
};
</script>
