<template>
    <a-space style="width: 100%;" class="flex justify-end">
        <a-button class="editable-add-btn" type="primary" @click="handleAdd" style="margin-bottom: 8px">添加</a-button>
        <!-- <a-button class="editable-add-btn" type="primary" @click="save" style="margin-bottom: 8px">保存</a-button> -->
    </a-space>
    <a-table :columns="columns" :data-source="dataSource" bordered>
        <template #headerCell="{ column }">
            <!-- 添加必填字段 -->
            <template v-for="col in ['name', 'zw', 'phone']" :key="col">
                <template v-if="column.dataIndex === col">
                    <span>
                        {{ column.title }}
                    </span>
                    <span style="color:red;"> * </span>
                </template>
            </template>
        </template>
        <template #bodyCell="{ column, text, record, index }">
            <template v-if="column.dataIndex === 'name'">
            <div style="position: relative;">
                <a-input v-model:value="record.name" style="width:100%" />
                <!-- <a-button type="primary" style="position: absolute; top: 0;right: 0;" @click="openModal(true, '')">选择</a-button> -->
            </div>
            </template>
            <template v-for="col in ['zw',]" :key="col">
                <template v-if="column.dataIndex === col">
                    <div>
                        <a-input style="margin: -5px 0"  v-model:value="record[col]"/>
                    </div>
                </template>
            </template>
            <template v-for="col in ['phone']" :key="col">
                <template v-if="column.dataIndex === col">
                    <div>
                        <!-- <input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" >  -->
                        <a-input  onkeyup="value=value.replace(/[^\d]/g,'')" style="margin: -5px 0"  v-model:value="record[col]"/>
                    </div>
                </template>
            </template>
            <template v-if="column.dataIndex === 'operation'">
                <div>
                    <a-button type="primary" @click="handleDel(index)" size="small" v-if="index !== 0">删除</a-button>
                    <a-button type="primary" size="small" v-else>/</a-button>
                </div>
            </template>
        </template>
    </a-table>
<!-- 选择用户 -->
<roleModal  @register="registerModal"  @sumbitTable="sumbitTable"/>
</template>
<script lang="ts" setup>
// import { BasicModal, useModalInner } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
import { ref, watch, nextTick } from 'vue';
import { useModal } from '/@/components/Modal';
import roleModal from "./roleModal.vue";

const [registerModal, { openModal,closeModal }] = useModal();
const props = defineProps({
    data: Object,
})
function requerInput(val) {
    debugger
    val = val.replace(/^1[3456789]\d{9}$/g,'')
}
const { createMessage } = useMessage();
function sumbitTable(val) {
    // 获取modal传参 保存到表格里面
    console.log(val);
    closeModal()
}
const columns = [
    {
        title: '姓名',
        dataIndex: 'name',

    },
    {
        title: '职位',
        dataIndex: 'zw',
    },
    {
        title: '电话',
        dataIndex: 'phone',
    },
   
    {
        title: '操作',
        dataIndex: 'operation',
    },

];
interface DataItem {
    name: string;
    zw: string;
    phone: string;
}

const data: DataItem[] = [{
    name: '',
    zw: '',
    phone: ''
}];
const dataSource = ref(data);

watch(
    () => props.data,
    async (val: any) => {
        val && nextTick(async () => {
            dataSource.value = val
            console.log(val, 'val')
            console.log(dataSource.value)
        });
    }, { deep: true }
);
const handleAdd = () => {
    // key需要获取数据最后一条id +1
    const newData = {
        name: '',
        zw: '',
        phone: ''
    };
    dataSource.value.push(newData);
}
const handleDel = (key: any) => {
    dataSource.value = dataSource.value.filter((item: any, index: any) => index != key);
}
defineExpose({
    dataSource,
})

</script>
