<template>
    <view class="components-order-change-time">
        <widget-modal title="修改时间" @close="close">
            <view class="common-form-container form-widget modal">
                <view class="input-item">
                    <view class="common-form-widget-group">
                        <view class="input-box">
                            <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">
                                            {{ changeTimeData.date ? changeTimeData.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">
                                            {{ changeTimeData.time ? changeTimeData.time : "选择期望上门时间" }}
                                        </text>
                                    </text>
                                </picker>
                                <text class="iconfont icon-jinru more"></text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="btn" @click="submit">提交</view>
            </view>
        </widget-modal>
    </view>
</template>

<script>
import WidgetModal from "@/components/widgets/modal";
export default {
    name: "order-change-time",
    data() {
        return {
            changeTimeData: {
                date: "",
                time: "",
            },
        };
    },
    props: {
        orderId: {
            type: [Number, String],
            default: 0,
        },
    },
    components: {
        WidgetModal,
    },
    created() {},
    mounted() {},
    destroyed() {},
    watch: {
        orderId() {
            this.changeTimeData = {
                date: "",
                time: "",
            };
        },
    },
    methods: {
        bindDateChange(e) {
            this.changeTimeData.date = e.detail.value;
        },
        bindTimeChange(e) {
            this.changeTimeData.time = e.detail.value;
        },
        close() {
            this.$emit("close");
        },
        submit() {
            this.$emit("submit", this.changeTimeData);
        },
    },
};
</script>

<style lang="less" scoped>
.components-order-change-time {
    .common-form-container.modal {
        width: 100%;
        .btn {
            width: 300rpx;
            height: 60rpx;
            line-height: 60rpx;
            background-color: #7286f1;
            color: #ffffff;
            text-align: center;
            font-size: 28rpx;
            margin: 30rpx auto 0 auto;
        }
        .input-item {
            height: auto;
            padding: 0;
            .input-box {
                width: 100%;
                padding: 0;
            }
        }
        .common-form-widget-group {
            .widget-item {
                padding: 30rpx;
                .title {
                    padding: 30rpx 80rpx 30rpx 100rpx;
                }
            }
        }
    }
}
</style>