<template>
    <ut-confirm-dialog v-model:show="visable" :title="title" width="680rpx" @close="onClose">
        <template #content>
            <scroll-view scroll-y class="scroll-view-content" style="max-height: 60vh">
                <view class="p-rtv pd4-0-24-24-24">
                    <up-form ref="formRef" :model="form" :rules="rules" labelWidth="auto" class="p-rtv" labelPosition="top">
                        <up-form-item label="名称/编号" prop="landName" required borderBottom>
                            <up-input v-model="form.landName" placeholder="请输入名称/编号" border="none" clearable />
                        </up-form-item>
                        <template v-if="['1', '2'].includes(form.landType as string)">
                            <up-form-item label="面积" prop="area" required borderBottom>
                                <up-input v-model="form.area" placeholder="请输入面积" border="none" clearable />
                                <template #right>
                                    <span>{{ form.areaUnit || '亩' }}</span>
                                </template>
                            </up-form-item>
                        </template>
                        <template v-if="['3'].includes(form.landType as string)">
                            <up-form-item label="层数" prop="layers" required borderBottom>
                                <up-input v-model="form.layers" placeholder="请输入层数" border="none" clearable />
                            </up-form-item>
                            <up-form-item label="每层容量" prop="capacityAmount" required borderBottom>
                                <up-input v-model="form.capacityAmount" placeholder="请输入每层容量" border="none" clearable />
                                <template #right>
                                    <view @click.stop>
                                        <ut-action-sheet v-model="form.capacityUnit" :tabs="pt_capacity_unit">
                                            <!-- 可点击选择单位 -->
                                            <view class="d-flex pd-10" style=""> 
                                                <span>{{ form.capacityUnit || '瓶' }}</span>
                                                <up-icon size="22rpx" color="#2A6D52" name="arrow-down-fill"></up-icon>
                                            </view>
                                        </ut-action-sheet>
                                    </view>
                                </template>
                            </up-form-item>
                            <!-- 光照类型 -->
                            <up-form-item label="光照类型" prop="lightType" borderBottom>
                                <up-radio-group v-model="form.lightType" direction="row">
                                    <up-radio :customStyle="{ marginRight: '60rpx' }" v-for="(item, index) in pt_light_type" :key="index" :label="item.label" :name="item.value"></up-radio>
                                </up-radio-group>
                            </up-form-item>
                            <!-- 是否有独立温控 -->
                            <up-form-item label="是否有独立温控" prop="tempeStatus" borderBottom>
                                <up-radio-group v-model="form.tempeStatus" direction="row">
                                    <up-radio :customStyle="{ marginRight: '60rpx' }" v-for="(item, index) in yes_no" :key="index" :label="item.label" :name="item.value"></up-radio>
                                </up-radio-group>
                            </up-form-item>
                        </template>
                        <up-form-item @click="selectCpyMember" borderBottom label="负责人" prop="contact">
                            <view v-if="form.contact" class="f-s-30 c-333 f-w-5 flex1">{{ form.contactName }}</view>
                            <view v-else class="f-s-30 c-ccc f-w-4 flex1">请选择负责人</view>
                            <template #right>
                                <up-icon size="22rpx" color="#2A6D52" name="arrow-down-fill"></up-icon>
                            </template>
                        </up-form-item>
                    </up-form>
                </view>
            </scroll-view>
        </template>
        <template #footer>
            <view class="pd-24 d-flex a-c">
                <up-button class="mr-16" @click="onClose">取消</up-button>
                <up-button type="primary" @click="onConfirm">确定</up-button>
            </view>
        </template>
    </ut-confirm-dialog>
</template>

<script setup lang="ts" name="FormPlot">
import { BaseLandInfoAddDTO } from './form-plot';
const props = withDefaults(
    defineProps<{
        show: boolean;
        title?: string;
        modelValue?: BaseLandInfoAddDTO;
        dict: any;
    }>(),
    {
        show: false,
        title: '新增地块',
        dict: () => ({}),
        modelValue: () => ({
            landName: '',
            area: undefined,
            areaUnit: '亩',
            baseId: 0,
            capacityAmount: undefined,
            capacityUnit: '',
            contact: undefined,
            contactName: '',
            landType: '',
            layers: undefined,
            lightType: '',
            tempeStatus: '',
            tempFlag: '',
        }),
    }
);
const { pt_base_type, pt_light_type, yes_no, pt_capacity_unit } = toRefs(props.dict);
const visable = ref(props.show);
const emit = defineEmits<{
    'update:show': [value: boolean];
    close: [];
    submit: [data: BaseLandInfoAddDTO];
}>();

const formRef = ref();
const submitting = ref(false);
const form = ref<BaseLandInfoAddDTO>({
    landName: '',
    area: undefined,
    areaUnit: '亩',
    baseId: 0,
    capacityAmount: undefined,
    capacityUnit: '',
    contact: undefined,
    contactName: '',
    landType: '',
    layers: undefined,
    lightType: '',
    tempeStatus: '',
    tempFlag: '',
});
const selectCpyMember = () => {
    uni.$on('selectCpyMember', (item: any) => {
        form.value.contact = item.userInfo?.id;
        form.value.contactName = item.userInfo?.name;
        uni.$off('selectCpyMember');
    });
    uni.$u.route({
        type: 'navigateTo',
        url: '/tools/select-cpy-member/index',
    });
};
const rules = reactive({
    landName: [{ required: true, message: '请输入名称/编号' }],
    area: [
        {
            required: true,
            message: '请输入面积',
        },
    ],
    layers: [
        {
            required: true,
            message: '请输入层数',
        },
    ],
    capacityAmount: [
        {
            required: true,
            message: '请输入每层容量',
        },
    ],
});

const onClose = () => {
    emit('update:show', false);
    emit('close');
};
watch(
    () => props.show,
    (newVal) => {
        console.log('sdadad');

        visable.value = newVal;
    }
);
const onConfirm = async () => {
    try {
        // uview-plus 的 up-form 暴露 validate 方法
        await formRef.value?.validate();
        console.log('----');
        emit('submit', form.value);
        emit('update:show', false);
    } catch (e) {
        // 校验不通过
    }
};
watch(
    () => props.modelValue,
    (newVal) => {
        Object.assign(form.value, newVal);
    },
    { immediate: true }
);
</script>

<style scoped lang="scss"></style>
