<template>
    <el-radio-group v-model="value" class="block">
        <el-radio
            v-for="item in dict.timeLimit"
            :key="item.dictCode"
            :value="item.dictValue"
            >{{ item.dictLabel
            }}{{ item.remark ? `(${item.remark})` : "" }}</el-radio
        >
    </el-radio-group>
    <template v-if="value === TimeLimit.OTHER">
        <el-row style="width: 100%">
            <el-col :span="8">
                <el-form-item
                    label="签收"
                    prop="maxSignDuration"
                    label-width="80"
                    :rules="{
                        required: true,
                        message: '请输入最大签收时长'
                    }"
                >
                    <div class="flex gap">
                        <el-input
                            v-model="maxSignDurationValue"
                            type="number"
                            style="width: 70px"
                            :min="1"
                            :max="99"
                        />
                        <span style="width: 60px">工作日</span>
                    </div>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item
                    label="办理"
                    prop="maxHandleDuration"
                    label-width="80"
                    :rules="{
                        required: true,
                        message: '请输入最大办理时长'
                    }"
                >
                    <div class="flex gap">
                        <el-input
                            v-model="maxHandleDurationValue"
                            type="number"
                            style="width: 70px"
                            :min="1"
                            :max="99"
                        />
                        <span style="width: 60px">工作日</span>
                    </div>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item
                    label="延期"
                    prop="maxExtensionDuration"
                    :rules="{
                        required: true,
                        message: '请输入最大延期天数'
                    }"
                >
                    <div class="flex gap">
                        <el-input
                            v-model="maxExtensionDurationValue"
                            type="number"
                            style="width: 70px"
                            :min="1"
                            :max="99"
                        />
                        <span>天</span>
                    </div>
                </el-form-item>
            </el-col>
        </el-row>
    </template>
</template>
<script setup>
import {
    TimeLimit
} from "@/enums/dictEnums";
import useCatchStore from "@/stores/modules/catch";
import { watch } from "vue";

const catchStore = useCatchStore();
const dict = catchStore.getDicts([
    "timeLimit"
]);
const props = defineProps({
    modelValue: {
        type: String
    },
    maxSignDuration: {
        type: String
    },
    maxHandleDuration: {
        type: String
    },
    maxExtensionDuration: {
        type: String
    },
})
const emit = defineEmits(['update:modelValue', 'update:maxSignDuration', 'update:maxHandleDuration', 'update:maxExtensionDuration'])
const value = ref(props.modelValue)
const maxSignDurationValue = ref(props.maxSignDuration)
const maxHandleDurationValue = ref(props.maxHandleDuration)
const maxExtensionDurationValue = ref(props.maxExtensionDuration)
watch(value, () => {
    emit('update:modelValue', value.value)
})
watch(maxSignDurationValue, () => {
    emit('update:maxSignDuration', maxSignDurationValue.value)
})
watch(maxHandleDurationValue, () => {
    emit('update:maxHandleDuration', maxHandleDurationValue.value)
})
watch(maxExtensionDurationValue, () => {
    emit('update:maxExtensionDuration', maxExtensionDurationValue.value)
})
</script>
<style lang="scss" scoped>
</style>