<template>
    <hc-new-dialog v-model="isShow" is-table widths="1200px" title="添加公式" @save="modalSave">
        <div class="hc-search-form">
            <el-select v-model="searchForm.key1" filterable class="w-40" placeholder="公式分类" @change="searchKeyClick">
                <el-option label="xxx" value="1" />
            </el-select>
        </div>
        <div class="hc-search-table">
            <el-radio-group v-model="tableRadio" class="hc-search-table-radio-group">
                <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }">
                    <template #action="{ row }">
                        <el-radio :label="row.key1" size="large" />
                    </template>
                </hc-table>
            </el-radio-group>
        </div>
    </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('处理数据')
    }
})

//搜索表单
const searchForm = ref({})
const searchKeyClick = () => {

}

//表格数据
const tableLoading = ref(false)
const tableColumn = [
    { key: 'key1', name: '公式编号' },
    { key: 'key2', name: '公式名称' },
    { key: 'key3', name: '备注' },
    { key: 'action', name: '选择', width: 50, align: 'center' },
]
const tableData = ref([
    { key1: '1111' },
    { key1: '222' },
])

const tableRadio = ref('')

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

<style scoped lang="scss">
.hc-search-form {
    position: relative;
    margin-bottom: 10px;
}
.hc-search-table {
    position: relative;
    height: calc(100% - 42px);
}
.hc-search-table-radio-group {
    display: block;
    height: 100%;
}
</style>

<style lang="scss">
.hc-search-table .hc-search-table-radio-group .el-table[hc].new .cell .el-radio {
    margin-right: 0;
    height: 20px;
    .el-radio__label {
        display: none;
    }
}
</style>
