<script lang="ts" setup>
import MdPreview from '@/components/markdown/MdPreview.vue'
import api from '@/servers/finyx/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { cloneDeep, isEmpty } from 'lodash-es'
import { ref } from 'vue'
import DialogBox from '@/components/dialog-box/index.vue'

const props = withDefaults(defineProps<{
  edit?: boolean
  isDel?: boolean
}>(), {
  edit: true,
  isDel: false
})

// 定义组件事件，允许触发 submitHandle 事件
const emit = defineEmits(['updateContent', 'refresh'])

// 定义一个响应式变量 dialogVisible，用于控制对话框的显示和隐藏
const dialogVisible = ref<boolean>(false)
// 定义一个响应式变量 formData，用于存储表单数据
const formData = ref<any>({})

// 定义一个响应式变量 loading，用于控制按钮的加载状态
const loading = ref<boolean>(false)

const isEdit = ref<boolean>(false)

// 关闭对话框的方法
const close = () => {
  dialogVisible.value = false;
  formData.value = {};
}
// 关闭对话框的方法
const open = (query?: any) => {
  isEdit.value = false
  dialogVisible.value = true
  if (!isEmpty(query)) {
    formData.value = cloneDeep(query);
    content.value = cloneDeep(query?.content || '');
  }
}

const content = ref<string>('')
// 提交表单的方法
const submitHandle = async () => {
  if (!isEdit.value) {
    isEdit.value = true
    return;
  }
  if (props.source === 'dataset') {
    ElMessage.success('保存成功!')
    emit('updateContent', formData.value)
    close()
    return
  }
  try {
    loading.value = true
    await api.wendangfenduan.update3({
      ...formData.value,
    })
    ElMessage.success('保存成功!')
    emit('updateContent', formData.value)
    close()
  } catch (e) {
    ElMessage.error('保存失败!')
  } finally {
    loading.value = false
  }
}

const handleCancel = async () => {
  if (content.value !== formData.value.content) {
    const confirm = await ElMessageBox.confirm('已修改的内容未保存，是否保存？', {
      title: '提示'
    })
    if (confirm) {
      await submitHandle()
    }
  }
  isEdit.value = false
}
const handleDelete = async () => {
  try {
    await api.wendangfenduan.delete3([formData.value.id])
    ElMessage.success('删除成功!')
    emit('refresh')
    close();
  } catch (e) {
    ElMessage.error('删除失败!')
  }
}
// 暴露 open 和 closeDialog 方法给外部使用
defineExpose({ open, close })
</script>

<template>
  <dialog-box :dialogVisible="dialogVisible" title="详情" width="800" @close="close">
    <div class="title">
      <span>
        {{ formData.title }}
      </span>
      <span class="serial">
        #{{ formData.serial }}
      </span>
    </div>
    <md-preview
      v-if="!props.edit || !isEdit"
      :modelValue="formData.content"
      class="maxkb-md"
      editorId="preview-only"
    ></md-preview>
    <el-input v-else type="textarea" v-model="formData.content" placeholder="请输入分段详情" :rows="10" style="margin-bottom: 12px;"></el-input>
    <template #footer>
      <span class="dialog-footer res_el-dialog__footer">
        <el-button v-if="props.isDel" type="danger"  :loading="loading" @click.prevent="handleDelete"> 删除 </el-button>
        <el-button  v-if="isEdit" :loading="loading" @click.prevent="handleCancel"> 取消 </el-button>
        <el-button :loading="loading" type="primary" @click="submitHandle()" v-if="props.edit">
          {{ isEdit ? '保存' : '编辑' }}
        </el-button>
      </span>
    </template>
  </dialog-box>
</template>

<style lang="scss" scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 400;
  font-size: 18px;
  color: #191919;
  margin-bottom: 12px;
}
.serial {
  color: #3067EF;
}
</style>
