<template>
    <hc-dialog is-to-body is-footer-center widths="30rem" :show="isShow" title="新增中期支付证书" @save="addModalSave" @close="addModalClose">
        <el-form ref="formRef" class="p-2" label-position="top" :model="formModel" :rules="formRules" size="large">
            <el-form-item label="计量期：" prop="key1">
                <el-select v-model="formModel.key1" block>
                    <el-option label="第一期" :value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="证书编号：" prop="key2">
                <el-input v-model="formModel.key2" />
            </el-form-item>
            <el-form-item label="材料计量期：" prop="key3">
                <div class="form-item-div">
                    <el-radio-group v-model="formModel.key3">
                        <el-radio :label="3">第一期</el-radio>
                        <el-radio :label="6">第二期</el-radio>
                        <el-radio :label="9">第三期</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="开工预付计量期：" prop="key4">
                <div class="form-item-div text-orange">无开工计量期可进行关联</div>
            </el-form-item>
            <el-form-item label="打印日期：">
                <div class="form-item-div" />
            </el-form-item>
        </el-form>
    </hc-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
    ids: {
        type: [String, Number],
        default: '',
    },
})

//事件
const emit = defineEmits(['finish', 'close'])

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

//监听
watch(() => [
    props.ids,
], ([ids]) => {
    console.log('ids', ids)
}, { immediate: true })

//监听
watch(isShow, (val) => {
    if (val) {
        console.log('处理数据')
    }
})

//表单数据
const formRef = ref(null)
const formModel = ref({})
const formRules = {}


const addModalSave = () => {
    emit('finish')
    addModalClose()
}

//关闭弹窗
const addModalClose = () => {
    isShow.value = false
    emit('close')
}
</script>

<style scoped lang="scss">

</style>
