<template>
    <app-layout title="货物配送">
        <view class="distribution-container">
            <view class="form-item">
                <view class="form-item-title">选择车型</view>
                <view class="common-form-widget-group">
                    <view class="widget-item">
                        <text class="iconfont icon-icon-truck icon"></text>
                        <picker mode="selector" :range="carTypeList" range-key="name" @change="selectCarType" class="picker">
                            <text class="title">
                                <text class="limit-line clamp-1">
                                    {{ carTypeText ? carTypeText : "请选择装货车型" }}
                                </text>
                            </text>
                        </picker>
                        <text class="iconfont icon-jinru more"></text>
                    </view>
                </view>
            </view>
            <view class="form-item">
                <view class="form-item-title">取货地址</view>
                <view class="common-form-widget-group">
                    <view class="widget-item" @click="selectPickupAddress">
                        <text class="iconfont icon-dingwei icon"></text>
                        <text class="title">
                            <text class="limit-line clamp-1">
                                {{ pickupAddressText ? pickupAddressText : "请选择取货地址" }}
                            </text>
                        </text>
                        <text class="iconfont icon-jinru more"></text>
                    </view>
                    <view class="widget-item">
                        <text class="iconfont icon-shijian icon"></text>
                        <picker mode="date" @change="bindDateChange" class="picker">
                            <text class="title">
                                <text class="limit-line clamp-1">
                                    {{ datetime ? datetime : "选择期望取货时间" }}
                                </text>
                            </text>
                        </picker>
                        <text class="iconfont icon-jinru more"></text>
                    </view>
                </view>
            </view>
            <view class="form-item">
                <view class="form-item-title">卸货地址</view>
                <view class="common-form-widget-group">
                    <view class="widget-item" @click="selectUnloadAddress">
                        <text class="iconfont icon-dingwei icon"></text>
                        <text class="title">
                            <text class="limit-line clamp-1">
                                {{ unloadAddressText ? unloadAddressText : "请选择卸货地址" }}
                            </text>
                        </text>
                        <text class="iconfont icon-jinru more"></text>
                    </view>
                </view>
            </view>
            <view class="form-item distance">
                <view class="input-title">预估配送公里数</view>
                <view class="input-box">
                    <input
                        class="input"
                        v-model="distance"
                        type="number"
                        placeholder="请输入预估配送预估公里数"
                        placeholder-class="placeholder-style-4"
                        @input="changeDistance(distance)"
                    />
                    <text class="unit">km</text>
                </view>
            </view>
            <view class="form-item explain">
                <view class="form-item-title">配送说明</view>
                <view class="textarea-box">
                    <textarea
                        class="textarea"
                        v-model="content"
                        placeholder="每公里配送费为3元，5公里以下按5公里计算"
                        placeholder-class="placeholder-style-4"
                    />
                </view>
            </view>
        </view>
        <view class="common-bottom-components" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
            <text class="price">¥ {{ utils.formatNumber(total) }}</text>
            <view class="btn" @click="submit">
                <div class="text">立即支付</div>
            </view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
export default {
    name: "service-other-distribution",
    data() {
        return {
            utils: this.$utils,
            pageConfig: {},
            carTypeList: [
                {
                    id: 1,
                    name: "营运",
                },
                {
                    id: 2,
                    name: "非营运",
                },
            ],
            unitPrice: 0,
            minDistance: 0,
            carTypeId: 0,
            carTypeText: "",
            pickupAddressId: 0,
            pickupAddressText: "",
            unloadAddressId: 0,
            unloadAddressText: "",
            datetime: "",
            distance: null,
            content: "",
            total: 0,
        };
    },
    components: {
        AppLayout,
    },
    onLoad() {
        this.pageConfig = getApp().globalData.pageConfig;
        this.$models.service.distributionConfig().then((config) => {
            this.unitPrice = config.unitPrice;
            this.minDistance = config.minDistance;
        });
        this.$models.service.distributionCar().then((list) => {
            this.carTypeList = list;
        });
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        /**
         * 选择车型
         */
        selectCarType(e) {
            let { id, name } = this.carTypeList[e.detail.value];
            this.carTypeId = id;
            this.carTypeText = name;
        },
        /**
         * 选择取货地址
         */
        selectPickupAddress() {
            const that = this;
            this.$utils.toPage("/pages/address/address?openType=choose&id=" + that.pickupAddressId, {
                events: {
                    setAddress(address) {
                        that.pickupAddressId = address.id;
                        that.pickupAddressText = address.address + address.detail;
                    },
                },
            });
        },
        /**
         * 选择卸货地址
         */
        selectUnloadAddress() {
            const that = this;
            this.$utils.toPage("/pages/address/address?openType=choose&id=" + that.unloadAddressId, {
                events: {
                    setAddress(address) {
                        that.unloadAddressId = address.id;
                        that.unloadAddressText = address.address + address.detail;
                    },
                },
            });
        },
        /**
         * 选择日期
         */
        bindDateChange(e) {
            this.datetime = e.detail.value;
        },
        /**
         * 计算价格
         */
        changeDistance(num) {
            num = parseFloat(num);
            if (num < this.minDistance) {
                num = this.minDistance;
            }
            this.total = num * this.unitPrice;
        },
        /**
         * 提交订单
         */
        submit() {
            this.$models.service
                .createDistributionOrder({
                    car: this.carTypeId,
                    address: this.pickupAddressId,
                    addressb: this.unloadAddressId,
                    starttime: this.datetime,
                    sendtime: 0,
                    distance: this.distance,
                })
                .then((data) => {
                    this.$models.service
                        .payDistributionOrder(data.id)
                        .then((response) => {
                            this.$utils.toast(response.msg).then(() => {
                                this.$utils.toPage("/pages/order/order", {}, "switch");
                            });
                        })
                        .catch(() => {
                            this.$utils.toPage("/pages/order/order", {}, "switch");
                        });
                })
                .catch((e) => {
                    this.$utils.toast(e);
                });
        },
    },
};
</script>

<style lang="less" scoped>
.distribution-container {
    width: 710rpx;
    margin: 0 auto;
    padding-bottom: 120rpx;
    .form-item {
        width: 100%;
        background-color: #ffffff;
        margin-bottom: 24rpx;
    }
    .form-item-title {
        font-size: 30rpx;
        font-weight: bold;
        color: #000000;
        box-sizing: border-box;
        padding: 20rpx 30rpx 0 30rpx;
    }
}
.common-form-widget-group {
    .widget-item {
        .iconfont.icon-icon-truck {
            font-size: 44rpx;
            top: 38rpx;
        }
    }
}
.form-item.distance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 30rpx;
    .input-title {
        font-size: 30rpx;
        font-weight: 500;
        color: #010101;
        flex-shrink: 0;
    }
    .input-box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 30rpx;
        line-height: 30rpx;
        font-weight: 400;
        color: #333333;
        .input {
            width: 350rpx;
            font-size: 28rpx;
        }
        .unit {
            font-size: 30rpx;
        }
    }
}
.form-item.explain {
    margin-bottom: 0;
    .textarea-box {
        width: 100%;
        box-sizing: border-box;
        padding: 30rpx;
        .textarea {
            width: 100%;
            height: 200rpx;
            font-size: 30rpx;
        }
    }
}
.common-bottom-components {
    .price {
        font-size: 40rpx;
        font-weight: bold;
        color: #ec7655;
    }
    .btn {
        width: 234rpx;
        height: 76rpx;
        background: #8b9beb;
        border: 2rpx solid #4b65ed;
        text-align: center;
        .text {
            font-size: 24rpx;
            color: #ffffff;
            line-height: 76rpx;
        }
    }
}
</style>