<template>
  <input
    type="text"
    class="el-input"
    style="width: 100%"
    :name="`R${rowIndex + 1}`"
    :value="getInputValue(rowIndex, colIndex)"
    @change="handleMatrixTextChange(rowIndex, colIndex, $event)"
  />
</template>

<script setup lang="ts">
// 接受获取到的 col row 的索引参数
const rowIndex = defineModel('rowIndex', { required: true, default: 0 });
const colIndex = defineModel('colIndex', { required: true, default: 0 });
// 记录行和列的索引
const rowRecord = defineModel<string[][]>('rowRecord', { required: false, default: () => [] });
const element = defineModel<question>('element', {
  required: false,
  default: () => {
    /**/
  }
});
const emit = defineEmits(['update:matrixAnswer', 'update:rowRecord', 'update:element']);

function getInputValue(row: number, col: number) {
  // console.log(`row: ${row}, col: ${col}`);
  // console.log(`rowRecord:`, rowRecord.value);

  return rowRecord.value?.[row]?.[col] ?? '';
}

// 当 matrix text 选中时，更新 rowRecord 和 matrixAnswer
function handleMatrixTextChange(row: number, col: number, e: Event) {
  const target = e.target as HTMLInputElement;
  const inputValue = target.value;

  // 获取 colIndexArray
  if (!rowRecord.value[row]) {
    // 如果没有对应的row，创建一个
    rowRecord.value[row] = [];
  }
  // cols 的逻辑 和 handleMatrixRadioChange 一致
  const cols = rowRecord.value[row];
  cols[col] = inputValue;
  // console.log(`rowRecord:`, rowRecord.value);
}

const emitValue = () => {
  emit('update:element', element.value);
};
</script>

<style scoped lang="scss">
@import '@/assets/css/theme';
</style>
