<template>
  <el-form-item :label="itemName">
    <div style="overflow:auto;">
      <el-table :data="formData[keyValue]" style="min-width:700px">
        <el-table-column prop="name" label="字段名">
          <template #default="scope">
            <el-input v-model="formData[keyValue][scope.$index]['name']" />
          </template>
        </el-table-column>
        <el-table-column prop="key" label="字段key">
          <template #default="scope">
            <el-input v-model="formData[keyValue][scope.$index]['key']" />
          </template>
        </el-table-column>
        <el-table-column label="字段类型">
          <template #default="scope">
            <el-select v-model="formData[keyValue][scope.$index]['type']">
              <el-option
                label="文本"
                value="input"
              />
              <el-option
                label="数字"
                value="input-number"
              />
              <el-option
                label="时间"
                value="date"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="是否可编辑" width="100">
          <template #default="scope">
            <el-switch v-model="formData[keyValue][scope.$index]['isUpdate']" />
          </template>
        </el-table-column>
        <el-table-column prop="" label="" width="50">
          <template #default="scope">
            <el-button size="small" type="danger" :icon="Delete" circle @click="delItem(scope.$index)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button @click="onAddItem">
      添加字段
    </el-button>
  </el-form-item>
</template>
<script lang="ts" setup>
import {
  Delete
} from '@element-plus/icons-vue';

const props = defineProps({
  formData: String,
  keyValue: String,
  itemName: String
});

const { formData, keyValue, itemName } = toRefs(props);

const onAddItem = () => {
  formData.value[keyValue.value].push({
    name: '',
    key: '',
    type: 'input',
    isUpdate: true
  });
};
const delItem = (e) => {
  formData.value[keyValue.value].splice(e, 1);
};
</script>
<style scoped lang="less">
</style>



