<template>
    <hc-new-dialog is-table :footer="false" widths="1200px" :show="isShow" title="收方清单明细" @close="modalClose">
        <div class="relative h-full">
            <div id="hc_details_table">
                <hc-card-item>
                    <hc-table is-new :index-style="{ width: 60 }" :column="tableColumn" :datas="tableData" :loading="tableLoading" />
                    <template #action>
                        <hc-pages :pages="searchForm" @change="pageChange" />
                    </template>
                </hc-card-item>
            </div>
            <div id="hc_details_list">
                <hc-card-item>
                    <hc-table is-new :index-style="{ width: 60 }" :column="tableColumn1" :datas="tableData1" />
                </hc-card-item>
            </div>
        </div>
    </hc-new-dialog>
</template>

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

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

//事件
const emit = defineEmits(['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) {
        detailsModalShow()
    }
})

const detailsModalShow = () => {
    nextTick(() => {
        window.$split(['#hc_details_table', '#hc_details_list'], {
            direction: 'vertical',
            sizes: [70, 30],
            snapOffset: 0,
            minSize: [170, 500],
        })
    })
}

//搜索表单
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 = [
    { key: 'key1', name: '清单编号' },
    { key: 'key2', name: '清单名称' },
    { key: 'key3', name: '变更后数量' },
    { key: 'key4', name: '收方数量' },
    { key: 'key5', name: '单价' },
    { key: 'key6', name: '完成金额' },
]
const tableData = ref([
    { key1: '1111' },
])


//详细明细
const tableColumn1 = [
    { key: 'key1', name: '凭证编号' },
    { key: 'key2', name: '收方期' },
    { key: 'key3', name: '工程部位' },
    { key: 'key4', name: '审核状态' },
    { key: 'key5', name: '本期收方数量' },
    { key: 'key6', name: '收方总金额' },
]
const tableData1 = ref([
    { key1: '1111' },
])


const modalClose = () => {
    isShow.value = false
    emit('close')
}
</script>

<style scoped lang="scss">

</style>
