<template>
    <hc-new-dialog v-model="isShow" is-table widths="95%" title="合同计量单元新增" @save="modalSave">
        <div class="relative h-full flex">
            <div :id="`hc_tree_card_${uuid}`">
                <hc-new-card scrollbar>
                    <template #header>
                        <div class="text-sm text-orange">↓ 选择部位【点击新增】</div>
                    </template>
                    <div class="tree-list">
                        <div v-for="(item, index) in treeDataList" :key="index" class="item" @click="treeListClick(item)">
                            <HcIcon name="box-3" fill />
                            <span class="ml-1">{{ item.name }}</span>
                        </div>
                    </div>
                </hc-new-card>
            </div>
            <div :id="`hc_table_card_${uuid}`" class="flex-1">
                <hc-new-card scrollbar title="合同计量单元">
                    <hc-table :is-index="false" :column="tableColumn" :datas="tableData" is-new :index-style="{ width: 60 }">
                        <template #key1="{ row }">
                            <hc-table-input v-model="row.key1" />
                        </template>
                        <template #key2="{ row }">
                            <hc-table-input v-model="row.key2" />
                        </template>
                        <template #key3="{ row }">
                            <hc-table-input v-model="row.key3" />
                        </template>
                        <template #key4="{ row }">
                            <hc-table-input v-model="row.key4" />
                        </template>
                        <template #key5="{ row }">
                            <el-radio-group v-model="row.key5">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="2" class="ml-2">否</el-radio>
                            </el-radio-group>
                        </template>
                        <template #action="{ index }">
                            <el-link type="danger" @click="delRowClick(index)">删除</el-link>
                        </template>
                    </hc-table>
                </hc-new-card>
            </div>
        </div>
    </hc-new-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'
import { getRandom } from 'js-fast-way'

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

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

const uuid = getRandom(4)

//双向绑定
// 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) {
        setSplitRef()
    }
})

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

const treeDataList = ref([
    { name: '测试' },
    { name: '临时道路修建、养护与拆除(包括原道路的养护费)' },
    { name: '征地拆迁放样（含挖边沟、埋界桩）' },
])
const treeListClick = (item) => {
    tableData.value.push({
        key1: item.name,
        key2: '',
        key3: '',
        key4: '',
        key5: 1,
    })
}

//表格数据
const tableColumn = ref([
    { key: 'key1', name: '名称' },
    { key: 'key2', name: '开始桩号' },
    { key: 'key3', name: '结束桩号' },
    { key: 'key4', name: '合同图号' },
    { key: 'key5', name: '是否划分子节点', width: 120, align: 'center' },
    { key: 'action', name: '操作', width: 80, align: 'center' },
])
const tableData = ref([])

//删除
const delRowClick = (index) => {
    tableData.value.splice(index, 1)
}

const modalSave = () => {
    emit('finish')
}
</script>

<style lang="scss" scoped>
.tree-list {
    position: relative;
    .item {
        position: relative;
        height: 24px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        cursor: pointer;
        transition: color .2s;
        &:hover {
            color: var(--el-color-primary);
        }
    }
}
</style>
