<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">
                        <text class="iconfont icon-shijian icon"></text>
                        <picker mode="date" @change="bindDateChange" class="picker">
                            <text class="title">
                                <text class="limit-line clamp-1">
                                    {{ date ? date : "选择期望取货日期" }}
                                </text>
                            </text>
                        </picker>
                        <text class="iconfont icon-jinru more"></text>
                    </view>
                    <view class="widget-item">
                        <text class="iconfont icon-shijian icon"></text>
                        <picker mode="time" @change="bindTimeChange" class="picker">
                            <text class="title">
                                <text class="limit-line clamp-1">
                                    {{ time ? time : "选择期望取货时间" }}
                                </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-container">
                    <view class="input-item">
                        <view class="title-box">
                            <text>地址</text>
                        </view>
                        <view class="input-box map" @click="selectPickupAddress">
                            <view class="address-text limit-line clamp-1" :class="{ active: pickupAddress.text }">
                                {{ pickupAddress.text ? pickupAddress.text : "点击选择地址" }}
                            </view>
                            <text class="iconfont icon-dingwei"></text>
                        </view>
                    </view>
                    <view class="input-item">
                        <view class="title-box">
                            <text>门牌号</text>
                        </view>
                        <view class="input-box">
                            <input
                                class="input"
                                v-model="pickupAddress.detail"
                                placeholder="请输入详细地址，如8栋5单元18a"
                                placeholder-class="placeholder-style-3"
                            />
                        </view>
                    </view>
                    <view class="input-item">
                        <view class="title-box">
                            <text>联系人</text>
                        </view>
                        <view class="input-box">
                            <input
                                class="input"
                                v-model="pickupAddress.name"
                                placeholder="请输入姓名"
                                placeholder-class="placeholder-style-3"
                            />
                        </view>
                    </view>
                    <view class="input-item">
                        <view class="title-box">
                            <text>手机号码</text>
                        </view>
                        <view class="input-box">
                            <input
                                class="input"
                                v-model="pickupAddress.mobile"
                                placeholder="请输入手机号码"
                                placeholder-class="placeholder-style-3"
                            />
                        </view>
                    </view>
                </view>
            </view>
            <view class="form-item">
                <view class="form-item-title">卸货地址</view>
                <view class="common-form-container">
                    <view class="input-item">
                        <view class="title-box">
                            <text>地址</text>
                        </view>
                        <view class="input-box map" @click="selectUnloadAddress">
                            <view class="address-text limit-line clamp-1" :class="{ active: unloadAddress.text }">
                                {{ unloadAddress.text ? unloadAddress.text : "点击选择地址" }}
                            </view>
                            <text class="iconfont icon-dingwei"></text>
                        </view>
                    </view>
                    <view class="input-item">
                        <view class="title-box">
                            <text>门牌号</text>
                        </view>
                        <view class="input-box">
                            <input
                                class="input"
                                v-model="unloadAddress.detail"
                                placeholder="请输入详细地址，如8栋5单元18a"
                                placeholder-class="placeholder-style-3"
                            />
                        </view>
                    </view>
                    <view class="input-item">
                        <view class="title-box">
                            <text>联系人</text>
                        </view>
                        <view class="input-box">
                            <input
                                class="input"
                                v-model="unloadAddress.name"
                                placeholder="请输入姓名"
                                placeholder-class="placeholder-style-3"
                            />
                        </view>
                    </view>
                    <view class="input-item">
                        <view class="title-box">
                            <text>手机号码</text>
                        </view>
                        <view class="input-box">
                            <input
                                class="input"
                                v-model="unloadAddress.mobile"
                                placeholder="请输入手机号码"
                                placeholder-class="placeholder-style-3"
                            />
                        </view>
                    </view>
                </view>
            </view>
            <view class="form-item distance">
                <view class="input-title">预估价格</view>
                <view class="input-box">
                    <input
                        class="input"
                        v-model="price"
                        type="number"
                        placeholder="请输入预估配送价格"
                        placeholder-class="placeholder-style-3"
                    />
                    <text class="unit">元</text>
                </view>
            </view>
            <view class="form-item explain">
                <view class="form-item-title">配送说明</view>
                <view class="textarea-box">
                    <text>请合理预估价格，价格过低可能会导致长时间无师傅接单。</text>
                </view>
            </view>
        </view>
        <view class="common-bottom-components" :style="{ paddingBottom: pageConfig.safeAreaInsets.bottom + 'px' }">
            <text class="price">¥ {{ utils.formatNumber(price) }}</text>
            <view class="btn" @click="submit">
                <div class="text">立即支付</div>
            </view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import { mapGetters } from "vuex";
export default {
    name: "service-other-distribution",
    data() {
        return {
            utils: this.$utils,
            pageConfig: {},
            carTypeList: [],
            carTypeId: 0,
            carTypeText: "",
            pickupAddress: {
                lng: 0.0,
                lat: 0.0,
                text: "",
                detail: "",
                name: "",
                mobile: "",
            },
            unloadAddress: {
                lng: 0.0,
                lat: 0.0,
                text: "",
                detail: "",
                name: "",
                mobile: "",
            },
            pickupAddressId: 0,
            pickupAddressText: "",
            unloadAddressId: 0,
            unloadAddressText: "",
            date: "",
            time: "",
            price: null,
            content: "",
            total: 0,
        };
    },
    components: {
        AppLayout,
    },
    computed: {
        ...mapGetters({
            isLogin: "user/isLogin",
        }),
    },
    onLoad() {
        this.pageConfig = getApp().globalData.pageConfig;
        this.$models.service.distributionCar().then((list) => {
            this.carTypeList = list;
        });
    },
    onShow() {
        if (!this.isLogin) {
            this.$store.commit("user/showLoginModal", true);
        }
    },
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        /**
         * 选择车型
         */
        selectCarType(e) {
            let { id, name } = this.carTypeList[e.detail.value];
            this.carTypeId = id;
            this.carTypeText = name;
        },
        /**
         * 选择取货地址
         */
        selectPickupAddress() {
            const that = this;
            uni.chooseLocation({
                success({ name, address, longitude, latitude }) {
                    that.pickupAddress.text = address;
                    that.pickupAddress.detail = name;
                    that.pickupAddress.lng = longitude;
                    that.pickupAddress.lat = latitude;
                },
                fail(error) {},
            });
        },
        /**
         * 选择卸货地址
         */
        selectUnloadAddress() {
            const that = this;
            uni.chooseLocation({
                success({ name, address, longitude, latitude }) {
                    that.unloadAddress.text = address;
                    that.unloadAddress.detail = name;
                    that.unloadAddress.lng = longitude;
                    that.unloadAddress.lat = latitude;
                },
                fail(error) {},
            });
        },
        /**
         * 选择日期
         */
        bindDateChange(e) {
            this.date = e.detail.value;
        },
        /**
         * 选择时分
         */
        bindTimeChange(e) {
            this.time = e.detail.value;
        },
        /**
         * 提交订单
         */
        submit() {
            if (!this.carTypeId) {
                return this.$utils.toast("请选择车型");
            }
            if (!this.date || !this.time) {
                return this.$utils.toast("请选择时间和日期");
            }
            if (
                this.pickupAddress.text == "" ||
                this.pickupAddress.detail == "" ||
                this.unloadAddress.text == "" ||
                this.unloadAddress.detail == ""
            ) {
                return this.$utils.toast("请完善地址信息");
            }
            if (this.pickupAddress.name == "" || this.unloadAddress.name == "") {
                return this.$utils.toast("请填写联系人");
            }
            if (!this.$test.mobile(this.pickupAddress.mobile) || !this.$test.mobile(this.unloadAddress.mobile)) {
                return this.$utils.toast("请填写正确的手机号码");
            }
            let datetime = this.date + " " + this.time;
            if (!this.price) {
                return this.$utils.toast("请输入预估价格");
            }
            this.$models.service
                .createDistributionOrder({
                    car: this.carTypeId,
                    address: {
                        address: this.pickupAddress.text,
                        doorplate: this.pickupAddress.detail,
                        name: this.pickupAddress.name,
                        mobil: this.pickupAddress.mobile,
                        lng: this.pickupAddress.lng,
                        lat: this.pickupAddress.lat,
                    },
                    addressb: {
                        address: this.unloadAddress.text,
                        doorplate: this.unloadAddress.detail,
                        name: this.unloadAddress.name,
                        mobil: this.unloadAddress.mobile,
                        lng: this.unloadAddress.lng,
                        lat: this.unloadAddress.lat,
                    },
                    starttime: datetime,
                    sendtime: 0,
                    money: this.price,
                })
                .then((data) => {
                    this.$store.commit("system/currentOrderTabIndex", 2);
                    this.$store.commit("system/refreshOrder", true);
                    this.$models.order
                        .pay({
                            request: {
                                api: "order.pay.t3",
                                data: {
                                    id: data.id,
                                },
                            },
                        })
                        .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%;
        height: 200rpx;
        font-size: 30rpx;
        box-sizing: border-box;
        padding: 30rpx;
        color: #999999;
    }
}
.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;
        }
    }
}
.common-form-container {
    width: 100%;
    .title-box {
        font-weight: normal;
    }
    .input-box.map {
        .address-text {
            font-size: 28rpx;
            line-height: 38rpx;
            color: #c9c9c9;
            box-sizing: border-box;
            padding-right: 40rpx;
        }
        .address-text.active {
            color: #000000;
        }
        .iconfont {
            position: absolute;
            top: 28rpx;
            right: 0;
            font-size: 35rpx;
            color: #8194f2;
        }
    }
}
</style>