<script setup>
import { computed, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { thumbUpAction } from '@/http/api.js';
// 受控组件：由父组件通过 v-model:visible 控制打开/关闭
const props = defineProps({
  visible: { type: Boolean, default: false },
  width: { type: [String, Number], default: '660' },
  messageId: {
    type: String,
    required: true,
  },
  conversationId: {
    type: String,
    default: '',
    required: true,
  },
});

const emit = defineEmits(['update:visible', 'confirm']);

const btnNames = ['问题理解有误', '内容太浮夸', '逻辑不清晰', '重复输出', '遗忘上下文', '引用网页质量不高', '语言风格不喜欢'];
const feedback = ref('');
// 将外部的 visible 与内部 v-model 绑定
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val),
});

const btnLoading = ref(false);
const handleClose = () => {
  feedback.value = '';
  // 关闭弹窗时清空表单，防止下次打开仍然显示旧数据
  emit('update:visible', false);
};

const onConfirm = async () => {
  // 执行表单校验
  try {
    // 例如：await api.createRepository({ name: form.email })
    btnLoading.value = true;
    let res = await thumbUpAction({
      conversation_id: props.conversationId,
      message_id: props.messageId,
      feedback: feedback.value,
      thumbup: false,
    });
    if (res.code === 0) {
      emit('confirm');
      ElMessage.success('感谢您的反馈');
      handleClose();
      // 保存成功后重置表单并关闭弹窗
    } else {
      ElMessage.error(res.message);
    }
    // 通知父组件确认事件（如需外部继续处理）
  } catch (error) {
    const message = (error && (error.message || error.msg)) || '提交失败，请稍后重试';
    ElMessage.error(message);
  } finally {
    btnLoading.value = false;
  }
};
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :width="width"
    align-center
    :before-close="handleClose"
    :append-to-body="true"
    class="gradient-dialog"
    style="background: linear-gradient(180deg, #e8f0ff 0%, #ffffff 44%)"
  >
    <template #header>
      <div class="dialog-title text-[20px]">抱歉，让你有不好的体验</div>
      <div class="text-[14px] text-quaternary-text">你的反馈将帮助我们更好的进步。</div>
    </template>
    <div class="flex gap-4 flex-wrap">
      <el-button v-for="(btn, index) in btnNames" :key="index" @click="feedback = btn">{{ btn }}</el-button>
    </div>

    <textarea :rows="8" v-model="feedback" class="mt-8 w-full common-border rounded-lg p-2" placeholder="其他反馈建议内容" maxlength="300" />

    <template #footer>
      <div class="dialog-footer">
        <el-button color="#1570ef" :loading="btnLoading" @click="onConfirm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
:deep(.el-button + .el-button) {
  margin-left: 0;
}
/* 给当前对话框应用渐变背景色 */
.gradient-dialog {
  background: linear-gradient(180deg, #e8f0ff 0%, #ffffff 44%);
}

/* 让头部、主体、底部背景透明，以便显示整体渐变 */
:deep(.gradient-dialog .el-dialog__header),
:deep(.gradient-dialog .el-dialog__body),
:deep(.gradient-dialog .el-dialog__footer) {
  background-color: transparent;
}

/* 搜索编辑区文本域样式 */
textarea {
  width: 100%;
  min-height: 60px;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: #111827;
  caret-color: #111827;
  font-size: 16px;
  line-height: 1.5;
  resize: none;
}
textarea:focus {
  outline: none;
  box-shadow: none;
}
textarea::placeholder {
  color: #9ca3af;
  font-size: 14px;
}
</style>
