<template>
  <div class="table-content">
    <!-- 采用的原生表格 -->
    <table align="center">
      <thead>
        <tr>
          <th v-for="item in editTestCellTableTHeaderConfig" :key="item">{{ item }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableArray.content" :key="index">
          <td>
            {{ index + 1 }}
          </td>
          <td style="width: 12vw">
            <a-input style="width: 12vw" placeholder="请输入" v-model:value="item.key" />
          </td>
          <td style="width: 12vw">
            <a-input style="width: 12vw" placeholder="请输入" v-model:value="item.value" />
          </td>
          <td style="width: 4vw">
            <a-switch v-model:checked="item.required" />
          </td>
          <td style="width: 4vw">
            <div>
              <Button type="dashed" @click="add(item, index)">
                <template #icon><PlusOutlined /></template
              ></Button>
              <Button type="dashed" style="margin-left: 5px" @click="remove(index)">
                <template #icon> <MinusOutlined /></template>
              </Button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script lang="ts" setup name="editCellTable">
  import { reactive, nextTick } from 'vue';
  import { Button } from 'ant-design-vue';
  import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
  import { editTestCellTableTHeaderConfig } from '../../../config/config';
  import { tableItems } from '../../../config/types';
  import { useUtils } from '../../../hooks/useUtils';

  const { CommonFuncValue } = useUtils();

  const tableArray = reactive<{
    content: tableItems[];
  }>({
    content: [
      {
        key: '',
        value: '',
        required: false,
      },
    ],
  });

  const add = (_, index: number) => {
    tableArray.content.splice(index + 1, 0, {
      key: '',
      value: '',
      required: false,
    });
  };

  const remove = (index: number) => {
    if (tableArray.content.length > 1) {
      tableArray.content.splice(index, 1);
    } else {
      resetValue();
    }
  };

  //获取数据
  const getValue = () => {
    const newFuncValue = new CommonFuncValue(tableArray.content as tableItems[]);
    return newFuncValue.get();
  };

  //设置数据
  const setValue = async (data) => {
    await nextTick();
    tableArray.content = data;
  };

  //重置数据
  const resetValue = () => {
    tableArray.content = [];
    tableArray.content.push({
      key: 'ContentType',
      value: 'none',
      required: false,
    });
  };
  defineExpose({
    getValue,
    setValue,
    resetValue,
  });
</script>

<style scoped lang="less">
  @import '../common/commonTable.less';
</style>