<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { getSuggestionDetail, replySuggestion } from '../api'
import VEditor from '@/components/tinymce/Index.vue'

const emit = defineEmits<Emits>()
const ruleFormRef = ref<FormInstance>()
// 封面类型
// 封面状态
const form: any = reactive({
  sso_id_name: '',
  created_time: '',
  title: '',
  files: '',
  content: '',
  reply: ''
})
const rules = {
  reply: [{ required: true, message: '请输入我的答复', trigger: 'blur' }]
}
const props = defineProps({
  isShowDialog: {
    type: Boolean,
    required: true
  },
  id: {
    type: String,
    required: true
  },
  status: {
    type: String,
    required: true
  }
})
interface Emits {
  (e: 'update:isShowDialog', isShowDialog: boolean): void
  (e: 'updatePage'): void
}

// 取消
const handleCancel = () => {
  emit('update:isShowDialog', false)
}
// 确定
const handleConfirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(valid => {
    if (valid) {
      replySuggestion({ id: props.id, reply: form.reply }).then(() => {
        emit('update:isShowDialog', false)
        emit('updatePage')
      })
    }
  })
}
// 获取投诉建议详情数据
getSuggestionDetail({ id: props.id }).then(res => {
  Object.keys(form).forEach(key => {
    form[key] = res.data[key]
  })
  form.files = JSON.parse(form.files)
})
</script>
<template>
  <el-dialog
    :model-value="isShowDialog"
    draggable
    :before-close="handleCancel"
    width="50%"
    :title="props.status === '1' ? '处理投诉建议' : '查看详情'"
  >
    <el-form style="height: 60vh; overflow-y: auto" :model="form" ref="ruleFormRef" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="9">
          <el-form-item label="投诉建议人：" prop="sso_id_name">
            {{ form.sso_id_name }}
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label="提交时间：" prop="created_time"> {{ form.created_time }} </el-form-item>
        </el-col>
        <el-divider border-style="dashed" />
      </el-row>
      <el-form-item label="问题描述：" prop="title">
        <v-editor v-model="form.title" class="editor" :height="200" disabled></v-editor>
      </el-form-item>
      <el-form-item label="问题详情：" prop="content">
        <v-editor v-model="form.content" class="editor" :height="200" disabled></v-editor>
      </el-form-item>
      <el-form-item label="相关附件：" prop="files">
        <div v-for="(item, index) in form.files" :key="index">
          <a :href="item.url" style="color: #aa1941" target="_blank">{{ item.name }}</a>
        </div>
      </el-form-item>
      <el-divider border-style="dashed" />
      <el-form-item label="我的答复：" prop="reply">
        <el-input
          v-model="form.reply"
          :autosize="{ minRows: 2, maxRows: 6 }"
          type="textarea"
          placeholder="请输入我的答复"
          :disabled="props.status !== '1'"
        />
      </el-form-item>
    </el-form>
    <template #footer v-if="props.status === '1'">
      <span>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
