<template>
    <div>
        <div class="container">
            <van-form @submit="onSubmit">
                <div class="little-box">
                    <div class="text1">快递单号</div>
                    <van-field v-model="object.a" name="快递单号" placeholder="请输入快递单号"
                        :rules="[{ required: true, message: '' }]" />
                </div>
                <div class="little-box">
                    <div class="text">快递公司:</div>
                    <van-field readonly clickable name="picker" :value="value" placeholder="请选择快递公司"
                        @click="showPicker = true" />
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
                    </van-popup>
                </div>
                <div class="little-box">
                    <div class="text">收件人手机号码</div>
                    <van-field v-model="object.b" name="手机号码" placeholder="请输入收件人手机号码"
                        :rules="[{ required: true, message: '' }]" />
                </div>
                <div class="little-box">
                    <div class="text">收件人姓名</div>
                    <van-field v-model="object.username" name="收件人姓名" placeholder="请输入收件人姓名"
                        :rules="[{ required: true, message: '' }]" />
                </div>
                <div class="little-box">
                    <div class="text">收件人部门</div>
                    <van-field v-model="object.username" name="收件人姓名" placeholder="请输入收件人部门"
                        :rules="[{ required: true, message: '' }]" />
                </div>
                <div class="little-box">
                    <div class="text">所属收发室:</div>
                    <van-field readonly clickable name="picker" :value="value2" placeholder="请选择所属收发室"
                        @click="outgoing = true" />
                    <van-popup v-model="outgoing" position="bottom">
                        <van-picker show-toolbar :columns="outgoings" @confirm="onOutgoing"
                            @cancel="outgoing = false" />
                    </van-popup>
                </div>
                <div class="little-box">
                    <div class="text">收件人楼层:</div>
                    <van-field readonly clickable name="picker" :value="value3" placeholder="请选择收件人楼层"
                        @click="floor = true" />
                    <van-popup v-model="floor" position="bottom">
                        <van-picker show-toolbar :columns="floors" @confirm="onFloor" @cancel="floor = false" />
                    </van-popup>
                </div>
                <div class="little-box">
                    <div class="text">收件人座位</div>
                    <van-field v-model="object.set" name="收件人座位" placeholder="请输入收件人座位"
                        :rules="[{ required: true, message: '' }]" />
                </div>
                <div class="little-box">
                    <div class="text">快件类型</div>
                    <van-field name="radio">
                        <template #input>
                            <van-radio-group v-model="object.radio" direction="horizontal">
                                <van-radio name="1">文件</van-radio>
                                <van-radio name="2">物品</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                </div>
                <div class="little-box">
                    <div class="text">快递数量</div>
                    <van-field v-model="object.e" name="快递数量" placeholder="请输入快递数量"
                        :rules="[{ required: true, message: '' }]" />
                </div>
                <div class="little-box">
                    <div class="text">货架信息:</div>
                    <van-field readonly clickable name="picker" :value="value4" placeholder="请选择货架"
                        @click="shelf = true" />
                    <van-popup v-model="shelf" position="bottom">
                        <van-picker show-toolbar :columns="shelfs" @confirm="onShelf" @cancel="shelf = false" />
                    </van-popup>
                </div>
                <div class="little-box">
                    <div class="text">到付件</div>
                    <div style="display: flex; justify-content: flex-start;">
                        <van-field name="checkbox">
                            <template #input>
                                <van-checkbox v-model="checkbox" @change="onCheckboxChange"
                                    shape="square" /><span>到付</span>
                            </template>
                        </van-field>
                        <van-field :disabled="isdisabled" style="margin-left: -245px;" v-model="object.e" name="到付备注"
                            placeholder="请输入到付备注"  />
                    </div>
                </div>
                <div class="little-box">
                    <div class="text">快递备注</div>
                    <van-field v-model="object.f" name="快递备注" placeholder="请输入快递备注"
                        :rules="[{ required: true, message: '' }]" />
                </div>






                <div style=" display: flex; justify-content: space-between; background-color: #fff;  padding: 10px 0;">
                    <van-button size="small" style="border-radius: 5px; width: 190px;" block type="info"
                        native-type="submit">保存/打印小标签并添加下一个</van-button>
                    <van-button size="small" style="width: 130px; border-radius: 5px;" block type="info"
                        native-type="submit">保存并打印小标签</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            object: {
                username: '',
                a: '',
                b: '',
                c: '',
                d: '',
                e: '',
                f: '',
                set: '',
                radio: '1',
            },
            checkbox: false,
            isdisabled: true,//是否选中多选
            value: '', //快递公司
            columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'], //快递公司
            showPicker: false, //快递公司
            value2: '', //快递公司
            outgoings: ['杭州', '宁波', '温州', '嘉兴', '湖州'], //收发室
            outgoing: false, //收发室
            value3: '', //快递公司
            floors: ['杭州', '宁波', '温州', '嘉兴', '湖州'], //收发室
            floor: false, //收发室
            value4: '', //快递公司
            shelfs: ['杭州', '宁波', '温州', '嘉兴', '湖州'], //收发室
            shelf: false, //收发室
        };
    },
    methods: {
        // 选择快递公司
        onConfirm(value) {
            this.value = value;
            this.showPicker = false;
        },
        // 选择收发室
        onOutgoing(value) {
            this.value2 = value;
            this.outgoing = false;
        },
        onFloor(value) {
            this.value3 = value;
            this.floor = false;
        },
        onShelf(value) {
            this.value4 = value;
            this.shelf = false;
        },
        // 提交
        onSubmit(values) {
            console.log('submit', values);
            this.$router.push('/')
        },
        onCheckboxChange() {
            this.isdisabled = !this.isdisabled
        }


    },


};
</script>

<style lang="less" scoped>
.container {
    height: 100%;
    background-color: #f2f2f2;
    margin: 18px 12px;

    .little-box {
        background-color: #fff;
        margin-top: 2px;

        /deep/ .van-field {
            padding: 0;
            margin-top: 6px;
        }

        .text {
            padding-top: 10px;
            font-size: 12px;
        }

        .text1 {
            padding-top: 0px;
            font-size: 12px;
        }
    }

}
</style>
