<template>
  <el-table :data="rows" style="width: 100%">
    <el-table-column width="140">
      <template #header></template>
      <template #default="{ row /*, column, $index*/ }">
        <el-text truncated>
          <contenteditable v-model="row.option" :active="active" @blur="emitValue" />
        </el-text>
      </template>
    </el-table-column>
    <el-table-column v-for="(col, colIndex) in cols" :key="col.option" width="100">
      <template #header>
        <el-text truncated>
          <contenteditable
            v-if="col.option"
            v-model="col.option"
            :active="active"
            @blur="emitValue"
          />
          <van-field v-else v-model="col.option" placeholder="请输入"></van-field>
        </el-text>
      </template>
      <template #default="{ /*row, column, */ $index: rowIndex }">
        <input
          type="checkbox"
          :name="`R${rowIndex + 1}`"
          :checked="isOptionChecked(rowIndex, colIndex)"
          @change="handleMatrixCheckboxChange(rowIndex, colIndex)"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
// import { defineProps } from 'vue';
// import { vFocus } from '@/utils/directives/useVFocus';

// 记录行和列的索引
const rowRecord = defineModel<number[][]>('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 element = defineModel<question>('element', {
  required: false,
  default: () => {
    /**/
  }
});

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

// 判断是否选中
const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
  // [
  //   [0, 1],
  //   [0, 1]
  // ]
  if (!rowRecord.value[rowIndex]) {
    return false;
  }
  return rowRecord.value[rowIndex].includes(colIndex);
};

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

// 当 matrix radio 选中时，更新 rowRecord 和 matrixAnswer
function handleMatrixCheckboxChange(row: number, col: number) {
  // 获取 colIndexArray
  if (!rowRecord.value[row]) {
    // 如果没有对应的row，创建一个
    rowRecord.value[row] = [];
  }
  // cols 的逻辑 和 handleMatrixRadioChange 一致
  const cols = rowRecord.value[row];

  // 检查 cols 对应的 col 是否有 数值
  if (cols.includes(col)) {
    // 如果有，删除
    cols.splice(cols.indexOf(col), 1);
  } else {
    // 如果没有，添加
    cols.push(col);
  }

  // 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 = (/* val: unknown */) => {
  emit('update:element', element.value);
};
</script>

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

.matrix-table {
  text-align: left;
}

.matrix-checkbox {
  position: relative;
  overflow: hidden;
  width: 15px;
  height: 15px;
  border: 1px solid #f4f4f4;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  appearance: none; /* 去除默认样式 */
  //transition: border-color 0.3s;
}

.matrix-checkbox:checked {
  border-color: transparent; /* 选中时边框颜色 */
}

.matrix-checkbox:checked::before {
  content: '\e728';
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: $theme-color; /* 选中颜色 */
  color: #fff;
  line-height: 15px;
  text-align: center;
}
</style>
