<template>
    <view class="order-confirm-price">
        <widget-modal title="尾款确认" @close="closeModal">
            <view class="modal-content">
                <view class="input-row">
                    <text class="title">费用增加</text>
                    <input class="input" type="number" v-model="price" @input="price = parseFloat(price)" />
                    <text class="unit">
                        <text class="iconfont icon-qingchu" @click="price = 0"></text>
                        <text class="text">元</text>
                    </text>
                </view>
                <view class="desc">
                    <text class="text">1)添加后，请客户在小程序订单中支付尾款</text>
                    <text class="text">2)没有尾款的话，请直接点击确认提交</text>
                </view>
                <view class="btn" @click="confirmPrice">确认</view>
            </view>
        </widget-modal>
    </view>
</template>

<script>
import WidgetModal from "@/components/widgets/modal";
import { mapState } from "vuex";
export default {
    name: "order-confirm-price",
    data() {
        return {
            id: 0,
            price: 0,
        };
    },
    props: {
        currentId: {
            type: Number,
            default: 0,
        },
    },
    computed: {
        ...mapState("order", {
            confirmId: (state) => state.confirmId,
        }),
    },
    components: {
        WidgetModal,
    },
    created() {},
    mounted() {},
    destroyed() {},
    watch: {},
    methods: {
        closeModal() {
            this.$store.commit("order/setConfirmId", 0);
            this.price = 0;
            this.$emit("close");
        },
        confirmPrice() {
            this.$emit("confirm", {
                id: this.confirmId,
                price: this.price,
            });
        },
    },
};
</script>

<style lang="less" scoped>
.order-confirm-price {
    .modal-content {
        width: 100%;
        .desc {
            padding: 24rpx 0;
            .text {
                display: block;
                font-size: 24rpx;
                color: #999999;
                line-height: 36rpx;
            }
        }
        .btn {
            width: 100%;
            height: 68rpx;
            line-height: 68rpx;
            text-align: center;
            font-size: 32rpx;
            color: #ffffff;
            background-color: #7286f1;
            margin-top: 15rpx;
        }
    }
    .input-row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 40rpx 0;
        border-bottom: 4rpx solid #f5f5f5;
        .title {
            font-size: 28rpx;
            color: #666666;
        }
        .input {
            width: 308rpx;
            height: 72rpx;
            box-sizing: border-box;
            border: 1px solid #d8d8d8;
            text-align: center;
        }
        .unit {
            color: #333333;
        }
        .iconfont {
            display: inline-block;
            font-size: 30rpx;
            margin-right: 22rpx;
        }
        .text {
            font-size: 28rpx;
        }
    }
}
</style>