<template>
    <hc-new-dialog is-table widths="1200px" :show="isShow" title="选择需要关联的检查的部位" @save="modalSave" @close="modalClose">
        <hc-new-card>
            <template #header>
                <div class="w-60">
                    <el-input v-model="searchForm.queryValue" clearable placeholder="请输入部位名称检索" @keyup="keyUpEvent" />
                </div>
                <div class="ml-2">
                    <el-button type="primary" @click="searchClick">
                        <HcIcon name="search-2" />
                        <span>搜索</span>
                    </el-button>
                </div>
            </template>
            <template #extra>
                <el-button type="danger" hc-btn class="mr-3">
                    <HcIcon name="delete-bin" />
                    <span>批量删除</span>
                </el-button>
                <hc-new-switch :datas="typeData" :keys="typeKey" :round="false" size="default" @change="typeChange" />
            </template>
            <div v-if="typeKey === '1'" class="relative h-full flex">
                <div id="hc_tree_warranty">
                    <hc-card-item scrollbar>
                        <hc-lazy-tree :h-props="treeProps" @load="treeLoadNode" />
                    </hc-card-item>
                </div>
                <div id="hc_table_warranty" class="flex-1">
                    <hc-card-item>
                        <hc-table
                            :column="tableColumn" :datas="tableData" :loading="tableLoading"
                            is-new is-check :check-style="{ width: 29 }" :index-style="{ width: 60 }"
                            @selection-change="tableCheckChange"
                        />
                        <template #action>
                            <hc-pages :pages="searchForm" @change="pageChange" />
                        </template>
                    </hc-card-item>
                </div>
            </div>
            <div v-if="typeKey === '2'" class="relative h-full">
                <hc-card-item>
                    <hc-table
                        :column="tableColumn1" :datas="tableData" :loading="tableLoading"
                        is-new is-check :check-style="{ width: 29 }" :index-style="{ width: 60 }"
                        @selection-change="tableCheckChange"
                    />
                    <template #action>
                        <hc-pages :pages="searchForm" @change="pageChange" />
                    </template>
                </hc-card-item>
            </div>
        </hc-new-card>
    </hc-new-dialog>
</template>

<script setup>
import { nextTick, 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,
})

//数据类型
const typeKey = ref('1')
const typeData = ref([
    { key: '1', name: '关联部位' },
    { key: '2', name: '已关联部位' },
])
const typeChange = ({ key }) => {
    typeKey.value = key
    if (key === '1') {
        setSplitRef()
    }
}


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

//监听
watch(isShow, (val) => {
    if (val) {
        setSplitRef()
    }
})

//初始化设置拖动分割线
const setSplitRef = () => {
    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
    nextTick(() => {
        window.$split(['#hc_tree_warranty', '#hc_table_warranty'], {
            sizes: [20, 80],
            snapOffset: 0,
            minSize: [50, 500],
        })
    })
}

//数据格式
const treeProps = {
    label: 'name',
    children: 'children',
    isLeaf: 'leaf',
}

//懒加载的数据
const treeLoadNode = ({ level }, resolve) => {
    if (level === 0) {
        return resolve([{ name: 'region' }])
    }
    if (level > 3) {
        return resolve([])
    }
    setTimeout(() => {
        resolve([
            { name: 'leaf', leaf: true },
            { name: 'zone' },
        ])
    }, 500)
}

//内容搜索
const searchForm = ref({
    queryValue: null, current: 1, size: 20, total: 0,
})

//回车搜索
const keyUpEvent = (e) => {
    if (e.key === 'Enter') {
        searchForm.value.current = 1
    }
}

//搜索
const searchClick = () => {
    searchForm.value.current = 1
}

//分页被点击
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: '资料完成状态' },
]
const tableData = ref([
    { key1: '1111' },
])
const tableColumn1 = [
    { key: 'key1', name: '文件名称' },
    { key: 'key2', name: '桩号名称' },
    { key: 'key3', name: '资料完成状态' },
]


//表格选择
const tableCheckChange = (checks) => {
    console.log(checks)
}
const modalSave = () => {
    emit('finish')
    modalClose()
}
const modalClose = () => {
    isShow.value = false
    emit('close')
}
</script>

<style scoped lang="scss">

</style>
