<template>
  <div>
    <!--    <el-input-number-->
    <!--      v-model="inputValueMTX"-->
    <!--      style="width: 100%"-->
    <!--      v-if="element.config.text_type === 1"-->
    <!--      controls-position="right"-->
    <!--      @change="(e) => ev"-->
    <!--      :max="element.config.max"-->
    <!--      @blur="changeValue(rowIndex, colIndex)"-->
    <!--    ></el-input-number>-->
    <!--    <el-input-number-->
    <!--      v-model="inputValueMTX"-->
    <!--      style="width: 100%"-->
    <!--      v-else-if="element.config.text_type === 2"-->
    <!--      controls-position="right"-->
    <!--      @change="(e) => handleMatrixTextChange(rowIndex, colIndex, { target: { value: e } })"-->
    <!--      :precision="element.config.decimal_few"-->
    <!--      :max="element.config.max"-->
    <!--      @blur="changeValue(rowIndex, colIndex)"-->
    <!--    ></el-input-number>-->
    <input
      type="text"
      class="el-input"
      style="width: 100%"
      :placeholder="element.config.placeholder"
      :name="`R${rowIndex + 1}`"
      :value="getInputValue(rowIndex, colIndex)"
      @change="handleMatrixTextChange(rowIndex, colIndex, $event)"
    />
  </div>
</template>

<script setup lang="ts">
import { ElInputNumber } from 'element-plus';
import { ref } from 'vue';
import { showFailToast } from 'vant';
// 接受获取到的 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 inputValueMTX = ref('');
const emit = defineEmits(['update:matrixAnswer', 'update:rowRecord', 'update:element']);

function ev() {
  console.log(1231);
}
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;

  console.log(inputValue, 123);
  // 获取 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 changeValue = (rowIndex, colIndex) => {
  if (
    inputValueMTX.value < element.value.config.min &&
    element.value.config.min &&
    inputValueMTX.value
  ) {
    inputValueMTX.value = null;
    showFailToast('请输入大于' + element.value.config.min + '的数字');

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

<style scoped lang="scss">
@import '@/assets/css/theme';
input[type='text'] {
  width: 100%;
  padding: 0 5px;
  border: none;
  border-radius: 4px;
  outline: 1px solid #f4f4f4;

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