<template>
  <ie-popup ref="popupRef" mode="center" :close-on-click-overlay="false" :showToolbar="false" :round="16">
    <view class="popup-content">
      <view class="popup-header">
        <view class="popup-header-title">
          <text>试题纠错</text>
        </view>
      </view>
      <view class="px-30">
        <view class="h-60 flex items-center justify-between border-0 border-b border-solid border-[#efefef]">
          <view class="flex items-center gap-x-10">
            <text>试题编号</text>
            <ie-image src="/static/image/icon-lock.png" custom-class="w-26 h-26" mode="aspectFit" />
          </view>
          <text class="text-fore-light">{{ questionId }}</text>
        </view>
        <view class="mt-30">
          <uv-textarea v-model="remark" placeholder="在这里填写问题描述" count :height="100" :maxlength="200" />
        </view>
      </view>
      <view class="mt-50 mx-30 mb-30 flex items-center gap-x-30">
        <view class="flex-1">
          <uv-button type="error" plain shape="circle" @click="close">取消</uv-button>
        </view>
        <view class="flex-1">
          <uv-button type="primary" shape="circle" :disabled="submitBtnDisabled" @click="handleSubmit">提交</uv-button>
        </view>
      </view>
    </view>
  </ie-popup>
</template>
<script lang="ts" setup>
import { correctQuestion } from '@/api/modules/study';
const popupRef = ref();
const questionId = ref(0);
const remark = ref('');
const loading = ref(false);
const submitBtnDisabled = computed(() => !remark.value?.trim() || loading.value);
const open = (id: number) => {
  if (id !== questionId.value) {
    remark.value = '';
  }
  questionId.value = id;
  popupRef.value.open();
}
const emit = defineEmits<{
  close: [];
}>();
const close = () => {
  popupRef.value.close();
  emit('close');
}
const handleSubmit = () => {
  loading.value = true;
  correctQuestion({ questionid: questionId.value, remark: remark.value.trim() }).then((res) => {
    loading.value = false;
    uni.$ie.showToast('提交成功，等待工作人员处理');
    close();
  }).catch((err) => {
    console.log(err)
    loading.value = false;
  })
}
defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.popup-content {
  @apply w-[88vw];
}

.popup-header {
  @apply px-30 h-100 flex items-center justify-center;
}

.popup-header-title {
  @apply flex items-center text-30 text-fore-title font-bold;
}
</style>
