<template>
  <el-drawer
    v-model="approval.visible"
    :title="approval.title"
    direction="rtl"
    size="420px"
    :destroy-on-close="true"
    @closed="approval.reset"
  >
    <div class="drawer-content">
      <el-alert
        v-if="approval.alertTitle"
        :title="approval.alertTitle"
        type="info"
        :closable="false"
        show-icon
        class="batch-alert"
      />
      <el-form :model="approval.form" label-width="80px">
        <el-form-item
          v-if="approval.form.action === 'pass' && approval.nextNodes.length > 0"
          label="选择分支"
        >
          <el-select
            v-model="approval.form.targetNodeId"
            placeholder="请选择下一节点"
            style="width: 100%"
          >
            <el-option
              v-for="n in approval.nextNodes"
              :key="n.nodeId"
              :label="n.branchName || n.nodeName"
              :value="n.nodeId"
            />
          </el-select>
        </el-form-item>
        <!-- TODO: 接入文件上传后重新启用 -->
        <el-form-item v-if="false" label="附件">
          <div v-if="approval.previousAttachments.length > 0" class="previous-attachments">
            <div class="previous-title">历史附件</div>
            <div
              v-for="att in approval.previousAttachments"
              :key="att.id"
              class="previous-item"
            >
              <el-link type="primary" size="small" @click="approval.openPreview(att.fileUrl)">
                {{ att.fileName }}
              </el-link>
              <span class="previous-meta">{{ att.nodeName || '发起' }} · {{ att.uploaderName || '未知' }}</span>
            </div>
          </div>
          <el-upload
            v-model:file-list="approval.attachmentList"
            action="#"
            :http-request="approval.handleUpload"
            :before-upload="beforeFileUpload"
            :before-remove="() => true"
            :on-preview="approval.handleFilePreview"
            multiple
          >
            <el-button type="primary" size="small">上传附件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="审批意见">
          <el-input
            v-model="approval.form.comment"
            type="textarea"
            :rows="4"
            placeholder="请输入审批意见"
          />
        </el-form-item>
      </el-form>
      <div class="drawer-footer">
        <el-button @click="approval.visible = false">取消</el-button>
        <el-button type="primary" :loading="approval.submitting" @click="approval.submit">
          确认{{ approval.actionText }}
        </el-button>
      </div>
    </div>

    <FilePreview v-model="approval.previewVisible" :url="approval.previewUrl" />
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useApproval } from '@/composables/useApproval'
import { beforeFileUpload } from '@/utils/file'
import FilePreview from '@/components/FilePreview/index.vue'
import type { FlowTask } from '@/types/flow'

const emit = defineEmits<{
  (e: 'success'): void
}>()

const approval = reactive(useApproval({
  onSuccess: () => emit('success')
}))

defineExpose({
  open: approval.open,
  reset: approval.reset
})
</script>

<style scoped>
.drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.batch-alert {
  margin-bottom: 16px;
}
.drawer-footer {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.previous-attachments {
  margin-bottom: 10px;
  padding: 10px 12px;
  background: #f5f7fa;
  border-radius: 4px;
}
.previous-title {
  font-size: 13px;
  color: #909399;
  margin-bottom: 6px;
}
.previous-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.previous-meta {
  font-size: 12px;
  color: #909399;
}
</style>
