<template>
    <div>
        {{ config?.title || '' }}
    </div>
    <div>
        <el-table :data="formData">
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-form-item label-width="0">
                        <div class="my-0 mx-auto">
                            <el-button @click="handleAdd">+</el-button>
                            <el-button @click="handleDelete(row)">-</el-button>
                        </div>
                    </el-form-item>
                </template>
            </el-table-column>
            <slot></slot>
            <el-table-column :label="item.label" v-for="(item, index) in config.tableConfig" :key="index"
                :prop="item[value]">
                <template #default="{ row, $index }">
                    <!-- 下拉框 -->
                    <el-form-item v-if="item.select" label-width="0">
                        <div class="my-0 mx-auto">
                            <el-select v-model="row[item.value]">
                                <el-option
                                    v-for="items in (Array.isArray(item.select) ? item.select : dictData[item.select])"
                                    :label="items.name" :value="items.value"></el-option>
                            </el-select>
                        </div>
                    </el-form-item>

                    <!-- 时间框 -->
                    <el-form-item v-else-if="item.date && !item.check" label-width=" 0">
                        <el-date-picker class="flex-1 !flex" v-model="row[item.value]" clearable value-format="YYYY-MM-DD"
                            placeholder="请选择日期">
                        </el-date-picker>
                    </el-form-item>

                    <!-- 带校验的时间框 -->
                    <el-form-item v-else-if="item.date && item.check" :prop="`${item.check[0]}[${$index}].${item.value}`"
                        :rules="item?.check ? {
                            validator: item.check[1],
                            trigger: ['blur'],
                        } : ''" label-width="0">
                        <el-date-picker class="flex-1 !flex" v-model="row[item.value]" clearable value-format="YYYY-MM-DD"
                            placeholder="请选择日期">
                        </el-date-picker>
                    </el-form-item>

                    <!-- 校验单位不能为数字的文本输入框 -->
                    <el-form-item v-else-if="item.label.includes('单位')" :prop="item.check ? item.value : ''"
                        label-width="0">
                        <el-input v-model="row[item.value]"
                            @input="row[item.value] = row[item.value].replace(/\d+/g, '')" />
                    </el-form-item>

                    <!-- 自定义校验的文本输入框 -->
                    <el-form-item v-else-if="item.check && ($index >= 0)" label-width="0"
                        :prop="`${item.check[0]}[${$index}].${item.value}`" :rules="item?.check ? {
                            validator: item.check[1],
                            trigger: ['blur'],
                        } : ''">
                        <el-input v-model="row[item.value]" :type="item.type == 'number' ? 'number' : 'text'" />
                    </el-form-item>

                    <!-- 普通文本输入框（type为number为数字输入框） -->
                    <el-form-item label-width="0" v-else>
                        <el-input v-model="row[item.value]" :type="item.type == 'number' ? 'number' : 'text'" />
                    </el-form-item>
                </template>
            </el-table-column>
            <template #empty>
                <span class="cursor-pointer">暂无数据，点击添加 <el-button @click="handleAdd">+</el-button></span>
            </template>
        </el-table>
        <slot name="accumulate"></slot>

    </div>
</template>
<script lang="ts" setup>
import { defineProps, onMounted, ref } from "vue"
/** config参数说明
 * 
 * title: 标题
 * tableConfig: 表格的table-column的每一项
 *  [{
 *    label:表头名称
 *    value:值
 *    select:是否为下拉选择框，不填默认为文本框，为String类型时表示为字典option，为Array类型表示自定义option ，
 *    date:是否为日期选择框 
 *  }] 
 *  deleteApi:删除列表每行所需要的api,不填默认为禁止对列表的添加/除操作
 */
const props = defineProps({
    formData: {
        type: Object,
        require: true
    },
    config: {
        type: Object,
        require: true
    },
    dictData: Object
})

// 生成table的每一列的初始对象
const list = props.config.tableConfig.map(item => item.value)
const getInitialData = () => {
    return list.reduce((acc, curr) => {
        acc[curr] = '';
        return acc;
    }, {});
};


const handleAdd = () => {
    props.formData.push(getInitialData());
};


const handleDelete = async (row: any) => {
    if (row.id && props?.config?.deleteApi) {
        await props.config.deleteApi({ id: row.id });
    }
    const index = props.formData.indexOf(row);
    props.formData.splice(index, 1);
};


</script>
