<template>
    <div class="foromData">
        <n-form ref="formRef" :model="model" :rules="rules" label-placement="top" label-width="auto">
            <!-- 1 -->
            <n-form-item label="Input" path="inputValue" width="100">
                <n-input v-model:value="model.inputValue" placeholder="Input" />
            </n-form-item>

            <!-- 2 -->
            <n-form-item label="Input Number" path="inputNumberValue">
                <n-input-number v-model:value="model.inputNumberValue" />
            </n-form-item>

            <!-- 3 -->
            <n-form-item label="Select" path="selectValue">
                <n-select v-model:value="model.selectValue" placeholder="Select" :options="generalOptions" />
            </n-form-item>

            <!-- 4 -->
            <n-form-item label="Multiple Select" path="multipleSelectValue">
                <n-select v-model:value="model.multipleSelectValue" placeholder="Select" :options="generalOptions"
                    multiple />
            </n-form-item>

            <!-- 5 -->
            <n-form-item label="Multiple Select" path="multipleSelectValue">
                <n-divider />
            </n-form-item>

            <!-- 7 -->
            <n-form-item label="Datetime" path="datetimeValue">
                <n-date-picker v-model:value="model.datetimeValue" type="datetime" />
            </n-form-item>

            <!-- 9 -->
            <n-form-item label="Datetime" path="datetimeValue">
                <n-date-picker v-model:value="range" type="datetimerange" clearable />
            </n-form-item>

            <!-- 10 -->
            <n-form-item label="Datetime" path="datetimeValue">
                <n-upload action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f" :default-file-list="fileList"
                    list-type="image-card">
                    点击上传
                </n-upload>
                <n-divider />
            </n-form-item>

            <!-- 11 -->
            <n-form-item label="Datetime" path="datetimeValue">
                <n-upload action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f" :default-file-list="fileList"
                    list-type="image-card">
                    点击上传
                </n-upload>
                <n-divider />
            </n-form-item>

            <!-- 12 -->
            <n-form-item label="Datetime" path="datetimeValue">
                <n-date-picker v-model:value="model.datetimeValue" type="datetime" />
            </n-form-item>

            <!-- 13 -->
            <n-form-item label="Datetime" path="datetimeValue">
                <n-date-picker v-model:value="range" type="datetimerange" clearable />
            </n-form-item>
        </n-form>
    </div>
</template>

<script setup>
import { reactive } from "vue"
const props = defineProps({
    task: {
        type: Object,
        default: () => ({}),
    },
    classList: {
        type: Array,
        default: () => [],
    },
    time: {
        type: String,
        default: null,
    },
    temporalInterval: {
        type: Array,
        default: () => [],
    },
})
const model = reactive({
    inputValue: ''
})

</script>

<style lang="scss">
.foromData {
    overflow-y: auto;
    height: 70vh;
}</style>