<script setup lang="ts">
import { debounce } from '@/hooks'

const props = withDefaults(
  defineProps<{
    answer?: string | null
    submitAnswer?: string
    reportFlag: 0 | 1
    titleId: string
    fillBlankNum: number
    isDeadline?: boolean
  }>(),
  {
    fillBlankNum: 1,
    isDeadline: true,
  },
)

const emit = defineEmits(['submit', 'inputChange'])

const answerList = ref<string[]>([])

function handleInput(val: string, idx: number) {
  emit('inputChange', val.trim(), idx)
}
const debouceInput = debounce(handleInput, 200, false)

function handleChange(val: string, idx: number) {
  answerList.value[idx] = val.replace(/,/g, '，').replace(/^\s*|\s*$/g, '')
  emit('inputChange', answerList.value[idx], idx)
  emit('submit', { submitAnswer: answerList.value.join(',') })
}

watch(
  () => props.titleId,
  () => {
    answerList.value = []
    for (let i = 0; i < props.fillBlankNum; i++) {
      answerList.value[i] = props.submitAnswer?.split(',')[i] || ''
    }
  },
  { immediate: true },
)
</script>
<template>
  <div>
    <div v-for="(i, idx) in props.fillBlankNum || 3" :key="i" class="input-box">
      <el-input
        v-model="answerList[i - 1]"
        type="textarea"
        :placeholder="reportFlag ? '未填写' : `${i}. 请输入答案`"
        class="hidden_scroll"
        :maxlength="-1"
        :rows="1"
        :autosize="{ minRows: 1, maxRows: 6 }"
        :disabled="!!reportFlag"
        @change="val => handleChange(val, idx)"
        @input="val => debouceInput(val, idx)"
      ></el-input>
    </div>
    <slot name="markAnswer"></slot>
  </div>
</template>
<style scoped lang="scss">
.input-box {
  box-sizing: border-box;
  width: 100%;
  // max-height: 100%;
  // min-height: 84px;
  border-radius: 1.33vh;
  border: 0.33vh solid #bed5fe;
  background: #fff;
  overflow-y: auto;
  padding: 1.33vh;
  margin-bottom: 2vh;
  line-height: 1.5;
  :deep(.el-textarea) {
    .el-textarea__inner {
      font-size: 2.67vh;
      line-height: 1.5;
      // box-sizing: border-box;

      // font-family: 'OPPO Sans';
      // font-size: 34px;
      // font-style: normal;
      // font-weight: 400;
      // line-height: 50px;
      // color: $font-color;
      // height: auto;
      border: none;
      box-shadow: none;

      &::placeholder {
        color: #999;
        font-size: 2.67vh;
      }
    }
    &.is-disabled {
      .el-textarea__inner {
        background-color: transparent;
        color: $font-color;
      }
    }
  }
}
</style>
