<template>
  <table class="matrix-table">
    <thead>
      <tr>
        <th></th>
        <th v-for="col in cols" :key="col.option">
          <contenteditable v-model="col.option" :active="active" @blur="emitValue" />
          <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
          <!--          <input-->
          <!--            v-if="col.editor"-->
          <!--            v-model="col.option"-->
          <!--            v-focus-->
          <!--            type="text"-->
          <!--            @focusout="col.editor = false"-->
          <!--            @click="handleRowNameChange(col.option!)"-->
          <!--          />-->
          <!--          <span v-else @click="handleRowNameChange(col.option!)" v-html="col.option"></span>-->
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
        <!--        <th v-html="row.option"></th>-->
        <contenteditable v-model="row.option" :active="active" @blur="emitValue" />

        <td v-for="(col, colIndex) in cols" :key="colIndex">
          <input
            type="text"
            placeholder="请输入"
            :name="`R${rowIndex + 1}`"
            :value="getInputValue(rowIndex, colIndex)"
            @change="handleMatrixTextChange(rowIndex, colIndex, $event)"
          />
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
// 记录行和列的索引
const rowRecord = defineModel<string[][]>('rowRecord', { required: false, default: () => [] });
// const matrixAnswer = defineModel<{ [key: string]: 1 }>('matrixAnswer', { required: false, default: () => ({}) });
// 检查 rowRecord 是否存在
// console.log(`rowRecord:`, rowRecord.value);
const active = defineModel<boolean>('active', { required: false, default: true });

/* const isPreview =  */ defineModel<boolean>('isPreview', { required: false, default: false });
const rows = defineModel<questionOptionType[]>('rows', { required: false, default: () => [] });
const cols = defineModel<questionOptionType[]>('cols', { required: false, default: () => [] });

const emit = defineEmits(['update:matrixAnswer', 'update:rowRecord', 'update:element']);

// const handleRowNameChange = (/* value: string */) => {
// console.log(`row change: ${value}`);
// 你可以在这里添加其他逻辑
// };

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 handleColNameChange = (rowOption: string, colOption: string) => {
// // const target = e.target as HTMLInputElement;
// const col = props.columns.findIndex((option) => option.option === colOption);
// const row = props.rows.findIndex((option) => option.option === rowOption);

// if (props.questionType === 9) {
//   props.rowRecord[col] = row + 1;
//   props.matrixAnswer = {};
//   props.rowRecord.forEach((row, index) => {
//     props.matrixAnswer[`${index + 1}_${row}`] = 1;
//   });
// }

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

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

.matrix-table {
  text-align: left;

  tr,
  td {
    //width: 200px;
  }
}

input {
  width: 70%;
  padding: 0 5px;
  border: none;
  border-radius: 4px;
  outline: 1px solid #f4f4f4;

  &:focus {
    outline: 1px solid $theme-color;
  }
}
</style>
