<template>
  <!-- 商品评论管理对话框 -->
  <el-dialog
    v-model="visible"
    :title="!dataForm.prodCommId ? '新增' : '修改'"
  :close-on-click-modal="false"
  >
  <el-form
    ref="dataFormRef"
    :model="dataForm"
    :rules="dataRule"
    label-width="80px"
    @keyup.enter="onSubmit()"
  >
  <!-- 如果不是编辑状态，则显示评论详情 -->
  <div v-if="!isEdit">
    <!-- 评论内容表单项，只读 -->
    <el-form-item label="评论内容" prop="content">
      <el-input
        v-model="dataForm.content"
        type="textarea"
        :readonly="true"
      />
    </el-form-item>

    <!-- 评论图片表单项 -->
    <el-form-item label="评论图片" prop="pics">
      <div v-if="!dataForm.pics?.length">无</div>
      <div v-else>
        <img
          v-for="item in dataForm.pics"
          :key="item"
          alt=""
          max-width="100%"
          :src="dialogImageUrl + item"
        >
      </div>
    </el-form-item>

    <!-- 记录时间表单项，只读 -->
    <el-form-item label="记录时间" prop="recTime">
      <el-input
        v-model="dataForm.recTime"
        :readonly="true"
      />
    </el-form-item>

    <!-- 回复时间表单项，只读 -->
    <el-form-item label="回复时间" prop="replyTime">
      <el-input
        v-model="dataForm.replyTime"
        :readonly="true"
      />
    </el-form-item>

    <!-- IP来源表单项，只读 -->
    <el-form-item label="IP来源" prop="postip">
      <el-input
        v-model="dataForm.postip"
        :readonly="true"
      />
    </el-form-item>

    <!-- 得分表单项，只读 -->
    <el-form-item label="得分" prop="score">
      <el-input
        v-model="dataForm.score"
        :readonly="true"
      />
    </el-form-item>

    <!-- 是否匿名表单项，只读 -->
    <el-form-item label="是否匿名" prop="isAnonymous">
      <el-radio-group
        v-model="dataForm.isAnonymous"
        :disabled="true"
      >
        <el-radio :label="1">是</el-radio>
        <el-radio :label="0">不是</el-radio>
      </el-radio-group>
    </el-form-item>
  </div>

  <!-- 掌柜回复表单项，非编辑状态下只读 -->
  <el-form-item label="掌柜回复" prop="replyContent">
    <el-input
      v-model="dataForm.replyContent"
      type="textarea"
      :readonly="!isEdit"
    />
  </el-form-item>

  <!-- 审核表单项，仅在编辑状态下显示 -->
  <el-form-item v-if="isEdit" label="审核" prop="status">
    <el-radio-group v-model="dataForm.status">
      <el-radio :label="1">审核通过</el-radio>
      <el-radio :label="-1">不通过</el-radio>
      <el-radio :label="0">等待审核</el-radio>
    </el-radio-group>
  </el-form-item>
  </el-form>

  <!-- 对话框底部的操作按钮 -->
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="visible = false">取消</el-button> <!-- 点击取消关闭对话框 -->
      <el-button
        v-if="isEdit"
        type="primary"
        @click="onSubmit()"
      >确定</el-button> <!-- 编辑状态下点击确定提交表单 -->
    </div>
  </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
const emit = defineEmits(['refreshDataList'])

// 表单验证规则（这里没有定义具体的规则）
const dataRule = ref({})

// 控制是否处于编辑模式
const isEdit = ref(false)

// 表单数据对象，使用ref定义响应式数据
const dataForm = ref({
  prodCommId: null,
  prodId: null,
  orderItemId: null,
  userId: null,
  content: null,
  replyContent: null,
  recTime: null,
  replyTime: null,
  replySts: null,
  postip: null,
  score: null,
  usefulCounts: null,
  photoJson: null,
  isAnonymous: null,
  status: null
})

// 初始化方法，接收prodCommId和isEditParam参数以决定是新增还是编辑
const init = (prodCommId, isEditParam) => {
  isEdit.value = isEditParam // 设置编辑模式
  dataForm.value.prodCommId = prodCommId || 0
  visible.value = true // 显示对话框
  nextTick(() => {
    dataFormRef.value?.resetFields() // 重置表单
    if (dataForm.value.prodCommId) {
      // 如果有ID，则获取具体评论信息进行编辑
      http({
        url: http.adornUrl('/prod/prodComm/info/' + dataForm.value.prodCommId),
        method: 'get',
        params: http.adornParams()
      })
        .then(({ data }) => {
          Object.assign(dataForm.value, data) // 将服务器返回的数据赋值给dataForm
        })
    }
  })
}

defineExpose({ init }) // 暴露init方法供外部调用

// 控制对话框显示与隐藏
const visible = ref(false)

// 表单引用
const dataFormRef = ref(null)

/**
 * 表单提交方法
 */
const onSubmit = () => {
  dataFormRef.value?.validate((valid) => {
    if (valid) {
      // 发送请求保存或更新评论信息
      http({
        url: http.adornUrl('/prod/prodComm'),
        method: dataForm.value.prodCommId ? 'put' : 'post',
        data: http.adornData(dataForm.value)
      })
        .then(() => {
          ElMessage.success('操作成功')
          visible.value = false // 关闭对话框
          emit('refreshDataList') // 触发父组件刷新列表
        })
    }
  })
}
</script>
