<!-- eslint-disable vue/valid-v-model -->
<template>
  <div class="table-content">
    <!-- TODO: 待优化测试表格 -->
    <table align="center">
      <thead>
        <tr>
          <th v-for="item in editTestCellTableTHeadConfig.slice(1)" :key="item">{{ item }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableTestArray.content" :key="index">
          <td style="width: 7.5vw">
            <a-input disabled placeholder="请输入" v-model:value="item.key" />
          </td>
          <td style="width: 6.5vw">
            <a-input placeholder="请输入" v-model:value="item.value" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script lang="ts" setup name="editCellTable">
  import { reactive } from 'vue';
  import { cloneDeep } from 'lodash-es';
  import { tableItems } from '../../../types';
  import { editTestCellTableTHeadConfig } from '../../../config';

  defineProps({
    method: {
      type: String,
    },
  });

  const tableTestArray = reactive<{
    content: tableItems[];
  }>({
    content: [
      {
        key: undefined,
        value: undefined,
        keyValue: null,
        editDisabled: false,
        dateValue: null,
      },
    ],
  });

  //设置数据
  const setTableArray = (data) => {
    const list = cloneDeep(data);
    if (Array.isArray(list)) tableTestArray.content = list;
  };

  //获取数据
  const getValue = () => {
    return tableTestArray.content;
  };
  defineExpose({
    getValue,
    setTableArray,
  });
</script>

<style scoped lang="less">
  @table-color: #e5e7eb;

  .table-border-color {
    border: 1px solid #e5e7eb;
    text-align: center;
  }

  .table-content {
    table {
      width: 31vw;
      &:extend(.table-border-color);
    }

    table td {
      padding: 5px;
      white-space: nowrap;
      &:extend(.table-border-color);
    }

    table th {
      padding: 5px;
      &:extend(.table-border-color);
    }
  }
</style>