<template>
  <input
    type="radio"
    :name="`R${rowIndex + 1}`"
    :checked="isOptionChecked(rowIndex, colIndex)"
    @change="handleMatrixRadioChange(rowIndex, colIndex)"
  />
</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<number[]>('rowRecord', { 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 => {
  // console.log(`rowIndex: ${rowIndex}, colIndex: ${colIndex}`);
  // console.log(`rowRecord.value[rowIndex] === colIndex`, rowRecord.value[rowIndex] === colIndex);

  return rowRecord.value[rowIndex] === colIndex;
  // const key = `R${rowIndex + 1}_C${colIndex + 1}`;
  // return !!matrixAnswer.value?.[key];
};

// 当 matrix radio 选中时，更新 rowRecord 和 matrixAnswer
function handleMatrixRadioChange(row: number, col: number) {
  rowRecord.value[row] = col;
  // matrixAnswer.value = {};
  // rowRecord.value.forEach((row, col) => {
  //   matrixAnswer.value[`${col + 1}_${row}`] = 1;
  // });
}

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

<style scoped lang="scss">
@import '@/assets/css/main';
input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: border-color 0.4s ease;
  &:checked {
    border-color: $theme-color;
    &::after {
      content: '';
      display: block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: $theme-color;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
