<template>
  <el-table :data="tableData" style="width: 100%"  height="400px">
    <el-table-column
      v-for="(item, index) in tableTitle"
      :key="index"
      :label="item.lable"
    >
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-input v-model="scope.row[item.prop]" placeholder="Please input" />
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180px" align="center" fixed="right">
      <template #default="scope">
        <div style="display: flex; align-items: center; justify-content: center">
          <slot v-bind="scope"></slot>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <div class="flex-center-h" style="margin-top: 10px">
    <el-input v-model="addInput" placeholder="输入名称" style="width: 300px">
      <template #prepend>
        <el-icon><Plus /></el-icon>
      </template>
    </el-input>
    <el-button type="primary" style="margin-left: 10px" @click="add">新增</el-button>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
export default {
  name: 'InputTable',
  props: {
    tableTitle: {
      type: Array,
      default: null
    },
    tableData: {
      type: Array,
      default: null
    }
  },
  emits: ['onAdd'],
  setup(props, context) {
    const addInput = ref('')
    const add = ref( async () => {
      await context.emit('onAdd', addInput.value)
      addInput.value = ''
    })
    return {
      add,
      addInput
    }
  }
}
</script>
