<template>
    <hc-new-dialog is-table widths="90%" :show="isShow" title="引用预变更" @save="addModalSave" @close="addModalClose">
        <hc-card-item>
            <template #header>
                <div class="w-60">
                    <el-input v-model="searchForm.key1" placeholder="变更方案编号" />
                </div>
            </template>
            <hc-table
                :column="tableColumn" :datas="tableData" :loading="tableLoading"
                is-new :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
                @selection-change="tableCheckChange"
            />
            <template #action>
                <hc-pages :pages="searchForm" @change="pageChange" />
            </template>
        </hc-card-item>
    </hc-new-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('isShow', val)
    }
})

//搜索表单
const searchForm = ref({
    key1: null, current: 1, size: 10, total: 0,
})

//分页
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
}

//表格数据
const tableLoading = ref(false)
const tableColumn = ref([
    { key: 'key1', name: '变更方案编号' },
    { key: 'key2', name: '变更方案名称' },
    { key: 'key3', name: '业务日期' },
    { key: 'key4', name: '变更类型' },
    { key: 'key5', name: '变更申请金额' },
])
const tableData = ref([
    { key1: '1111' },
])

const tableCheckChange = () => {

}

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

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