<template>
  <input
    type="checkbox"
    class="mobilefont"
    :name="`R${rowIndex + 1}`"
    :checked="isOptionChecked(rowIndex, colIndex)"
    @change="handleMatrixCheckboxChange(rowIndex, colIndex)"
  />
</template>

<script setup lang="ts">
import type { IQuestion } from '@/types/question';
import type { IMatrixCheckboxConfig } from '@/types/questions/matrixCheckbox';

// 接受获取到的 col row 的索引参数
const rowIndex = defineModel<number>('rowIndex', { required: true, default: 0 });
const colIndex = defineModel<number>('colIndex', { required: true, default: 0 });

const rowRecord = defineModel<number[][]>('rowRecord', { required: false, default: () => [] });

const element = defineModel<IQuestion<IMatrixCheckboxConfig>>('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);
};

// 当 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);
  }
}

const emitValue = (/* val: unknown */) => {
  emit('update:element', element.value);
};
</script>
<style scoped lang="scss">
@import '@/assets/css/main';

input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 1px;
  outline: none;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color 0.4s ease;

  &:checked {
    border-color: $theme-color;
    background: $theme-color;

    &::after {
      content: '\2713';
      font-family: 'Arial', sans-serif; // 确保符号正常显示
      color: #fff; // 勾选符号的颜色
      font-size: 12px; // 勾选符号的大小
      display: block;
      position: absolute;
      background: $theme-color;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
