<template>
    <el-dialog
        :model-value="visible"
        :title="title"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="handleCancel"
        :width="width"
    >
        <el-form :model="form" ref="formRef" :rules="rules">
            <el-form-item class="score" label="" prop="reason">
                <div class="flex">
                    上门服务时间前{{ state!.intervalTime }}分钟，扣
                    <el-input class="flex-1 px-2" v-model.trim="form.reason"></el-input>
                    分
                </div>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleConfirm">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { validateScore } from '@/utils/validate'

const props = defineProps({
    title: { type: String, default: '' },
    visible: { type: Boolean, default: true },
    width: { type: [Number, String], default: '50%' },
    onCancel: { type: Function, default: () => {} },
    onConfirm: { type: Function, default: () => {} },
    state: { type: Object, defualt: () => ({ intervalTime: '', value: '' }) }
})
const formRef = ref<FormInstance>()
const form = reactive({
    reason: props.state!.value
})
const rules = reactive<FormRules>({
    reason: [
        { required: true, message: '请输入', trigger: 'blur' },
        { validator: validateScore, trigger: 'blur' }
    ]
})
/**确认 */
const handleConfirm = () => {
    formRef.value?.validate(valid => {
        if (!valid) return
        props.onConfirm(form)
        handleCancel()
    })
}
const handleCancel = () => {
    props.onCancel()
}
</script>
<style lang="scss" scoped>
.score {
    :deep(.el-form-item__error) {
        left: 40%;
    }
}
</style>
