<!-- 球机申领 -->
<template>
    <view class="MainBox">
        <view class="FormBox">
            <view class="FormItem">
                <view class="FormLableBox mustBox">作业地点</view>
                <view class="FormValueBox">
                    <u-input v-model="allData.workLocation" placeholder="请输入作业地点" readonly></u-input>
                </view>
            </view>
            <view class="FormItem">
                <view class="FormLableBox mustBox">作业周期</view>
                <view class="FormValueBox">
                    <view class="date-range-box">
                        <view class="date-item">
                            <u-input v-model="allData.startTime" placeholder="开始时间" readonly></u-input>
                        </view>
                        <view class="date-separator">至</view>
                        <view class="date-item">
                            <u-input v-model="allData.endTime" placeholder="结束时间" readonly></u-input>
                        </view>
                    </view>
                </view>
            </view>
            <view class="FormItem">
                <view class="FormLableBox mustBox">申领数量</view>
                <view class="FormValueBox">
                    <up-number-box v-model="formData.applyQuantity" @change="valChange"></up-number-box>
                </view>
            </view>
            <view class="FormItem">
                <view class="FormLableBox mustBox">安装位置</view>
                <view class="FormValueBox">
                    <u-input v-model="formData.installationSite" placeholder="请输入安装位置"></u-input>
                </view>
            </view>
            <view class="FormItem">
                <view class="FormLableBox mustBox">联系人+联系方式</view>
                <view class="FormValueBox">
                    <u-input v-model="formData.linkman" placeholder="请输入联系人+联系方式"></u-input>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { generateGuid } from '@/utils/index.js';
import dayjs from 'dayjs';
import { ref, defineExpose } from 'vue'

const props = defineProps({
    allData: {
        type: Object,
        default: () => { },
    },
})

const formData = ref({
    applyQuantity: '', // 申领数量
    installationSite: '', // 安装位置
    linkman: '', // 联系人+联系方式
})

defineExpose({
    getFormData() {
        return formData.value;
    }
})

</script>
<style lang="scss" scoped>
.BlueTxt {
    font-size: 28rpx;
    color: #2979ff;
    margin: 10rpx 0;
}

.addBtn {
    font-size: 30rpx;
    color: #2979ff;
    font-weight: bold;
}

.BorderBox {
    border: 1rpx solid #e4e7ed;
    padding: 20rpx;
    border-radius: 10rpx;
}

.FlexBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20rpx;
}

.MainBox {
    padding: 20rpx;
    background-color: #fff;
    height: 100%;
    overflow: auto;
}

.mustBox::after {
    content: "*";
    color: red;
    font-size: 30rpx;
    margin-left: 10rpx;
}

.FormBox {
    // background-color: #f5f5f5;
    height: 100%;

    .FormItem {
        padding: 20rpx;
        background-color: #fff;

        .FormLableBox {
            font-size: 30rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
        }

        .FormValueBox {
            font-size: 30rpx;
            margin-top: 20rpx;
        }
    }
}

.date-range-box {
    display: flex;
    align-items: center;
    gap: 20rpx;
    flex: 1;

    .date-item {
        flex: 1;
    }

    .date-separator {
        color: #999;
        font-size: 28rpx;
    }
}
</style>