<template>
  <div class="approval-instances-page">
    <a-page-header title="审批记录" sub-title="查看所有审批实例及其处理状态" />

    <!-- 搜索筛选 -->
    <a-card class="filter-card">
      <a-form layout="inline" class="search-form">
        <a-form-item>
          <a-input-search
            v-model:value="searchKeyword"
            placeholder="搜索业务标题 / 发起人"
            allow-clear
            style="width: 220px"
            @search="handleSearch"
          />
        </a-form-item>
        <a-form-item>
          <a-select
            v-model:value="filterScenario"
            placeholder="业务场景"
            allow-clear
            style="width: 130px"
            @change="handleSearch"
          >
            <a-select-option v-for="(label, key) in ApprovalScenarioMap" :key="key" :value="key">
              {{ label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-select
            v-model:value="filterStatus"
            placeholder="审批状态"
            allow-clear
            style="width: 120px"
            @change="handleSearch"
          >
            <a-select-option v-for="(label, key) in ApprovalInstanceStatusMap" :key="key" :value="key">
              {{ label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-range-picker
            v-model:value="dateRange"
            :placeholder="['开始日期', '结束日期']"
            style="width: 240px"
            @change="handleSearch"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSearch">
            <SearchOutlined /> 查询
          </a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="handleReset">
            <ReloadOutlined /> 重置
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 数据列表 -->
    <a-card class="main-card" :loading="loading">
      <a-table
        :columns="columns"
        :data-source="instanceList"
        :pagination="pagination"
        row-key="id"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'business'">
            <div class="business-cell">
              <a-tag :color="getScenarioColor(record.scenario)" size="small">
                {{ ApprovalScenarioMap[record.scenario as ApprovalScenario] }}
              </a-tag>
              <span class="business-title">{{ record.businessTitle }}</span>
            </div>
          </template>
          
          <template v-else-if="column.key === 'initiator'">
            <div class="user-cell">
              <a-avatar :src="record.initiatorAvatar" :size="28" />
              <span>{{ record.initiatorName }}</span>
            </div>
          </template>
          
          <template v-else-if="column.key === 'currentNode'">
            <span v-if="record.currentNodeName" class="current-node">
              <ClockCircleOutlined /> {{ record.currentNodeName }}
            </span>
            <span v-else class="no-node">-</span>
          </template>
          
          <template v-else-if="column.key === 'status'">
            <a-badge
              :status="ApprovalInstanceStatusBadgeMap[record.status as ApprovalInstanceStatus]"
              :text="ApprovalInstanceStatusMap[record.status as ApprovalInstanceStatus]"
            />
          </template>
          
          <template v-else-if="column.key === 'submittedAt'">
            {{ formatDateTime(record.submittedAt) }}
          </template>
          
          <template v-else-if="column.key === 'action'">
            <a-button type="link" size="small" @click="showDetail(record as ApprovalInstance)">
              <EyeOutlined /> 详情
            </a-button>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 详情抽屉 -->
    <a-drawer
      v-model:open="detailVisible"
      title="审批详情"
      width="640"
      destroy-on-close
    >
      <template v-if="currentInstance">
        <!-- 业务信息 -->
        <a-descriptions :column="2" bordered size="small" title="业务信息">
          <a-descriptions-item label="业务类型">
            <a-tag :color="getScenarioColor(currentInstance.scenario)">
              {{ ApprovalScenarioMap[currentInstance.scenario] }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="审批状态">
            <a-badge
              :status="ApprovalInstanceStatusBadgeMap[currentInstance.status]"
              :text="ApprovalInstanceStatusMap[currentInstance.status]"
            />
          </a-descriptions-item>
          <a-descriptions-item label="业务标题" :span="2">
            {{ currentInstance.businessTitle }}
          </a-descriptions-item>
          <a-descriptions-item label="使用流程">
            {{ currentInstance.templateName }}
          </a-descriptions-item>
          <a-descriptions-item label="当前节点">
            {{ currentInstance.currentNodeName || '-' }}
          </a-descriptions-item>
        </a-descriptions>

        <!-- 发起人 -->
        <a-divider>发起人</a-divider>
        <div class="initiator-info">
          <a-avatar :src="currentInstance.initiatorAvatar" :size="48" />
          <div class="info">
            <div class="name">{{ currentInstance.initiatorName }}</div>
            <div class="time">提交于 {{ formatDateTime(currentInstance.submittedAt) }}</div>
          </div>
        </div>

        <!-- 审批记录 -->
        <a-divider>审批记录</a-divider>
        <a-timeline v-if="currentInstance.records.length">
          <a-timeline-item
            v-for="(record, index) in currentInstance.records"
            :key="index"
            :color="getActionColor(record.action)"
          >
            <div class="record-item">
              <div class="record-header">
                <a-avatar :src="record.approverAvatar" :size="32" />
                <div class="record-info">
                  <div class="approver">
                    {{ record.approverName }}
                    <a-tag :color="getActionColor(record.action)" size="small">
                      {{ getActionText(record.action) }}
                    </a-tag>
                  </div>
                  <div class="node-name">{{ record.nodeName }}</div>
                </div>
                <div class="record-time">{{ formatDateTime(record.operatedAt) }}</div>
              </div>
              <div v-if="record.comment" class="record-comment">
                <MessageOutlined /> {{ record.comment }}
              </div>
            </div>
          </a-timeline-item>
        </a-timeline>
        <a-empty v-else description="暂无审批记录" :image-style="{ height: '40px' }" />
      </template>
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import type { Dayjs } from 'dayjs'
import {
  SearchOutlined,
  ReloadOutlined,
  EyeOutlined,
  ClockCircleOutlined,
  MessageOutlined
} from '@ant-design/icons-vue'
import type { ApprovalInstance, ApprovalScenario, ApprovalInstanceStatus } from '@/types'
import { ApprovalScenarioMap, ApprovalInstanceStatusMap, ApprovalInstanceStatusBadgeMap } from '@/types'
import { mockGetApprovalInstanceList } from '@/mock'
import { formatDateTime } from '@/utils/common'

const loading = ref(false)
const instanceList = ref<ApprovalInstance[]>([])

const searchKeyword = ref('')
const filterScenario = ref<ApprovalScenario | undefined>()
const filterStatus = ref<ApprovalInstanceStatus | undefined>()
const dateRange = ref<[Dayjs, Dayjs] | undefined>()

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`
})

const detailVisible = ref(false)
const currentInstance = ref<ApprovalInstance | null>(null)

const columns = [
  { title: '业务信息', key: 'business', width: 280 },
  { title: '发起人', key: 'initiator', width: 140 },
  { title: '当前节点', key: 'currentNode', width: 130 },
  { title: '状态', key: 'status', width: 100 },
  { title: '提交时间', key: 'submittedAt', width: 160 },
  { title: '操作', key: 'action', width: 100 }
]

function getScenarioColor(scenario: ApprovalScenario): string {
  const colors: Record<ApprovalScenario, string> = {
    project_publish: '#1890ff',
    withdrawal: '#52c41a',
    contract: '#722ed1',
    certification: '#faad14',
    content: '#13c2c2',
    expense_reimbursement: '#eb2f96',
    payment_request: '#fa541c',
    purchase_request: '#fa8c16',
    budget_adjustment: '#2f54eb',
    invoice_apply: '#722ed1'
  }
  return colors[scenario]
}

function getActionColor(action: string): string {
  const colors: Record<string, string> = {
    approve: 'green',
    reject: 'red',
    transfer: 'blue',
    return: 'orange'
  }
  return colors[action] || 'gray'
}

function getActionText(action: string): string {
  const texts: Record<string, string> = {
    approve: '通过',
    reject: '拒绝',
    transfer: '转交',
    return: '退回'
  }
  return texts[action] || action
}

async function loadData() {
  loading.value = true
  try {
    const res = await mockGetApprovalInstanceList({
      page: pagination.current,
      pageSize: pagination.pageSize,
      keyword: searchKeyword.value || undefined,
      scenario: filterScenario.value,
      status: filterStatus.value,
      startDate: dateRange.value?.[0]?.format('YYYY-MM-DD'),
      endDate: dateRange.value?.[1]?.format('YYYY-MM-DD')
    })
    instanceList.value = res.list
    pagination.total = res.total
  } catch (error) {
    console.error(error)
    message.error('加载数据失败')
  } finally {
    loading.value = false
  }
}

function handleSearch() {
  pagination.current = 1
  loadData()
}

function handleReset() {
  searchKeyword.value = ''
  filterScenario.value = undefined
  filterStatus.value = undefined
  dateRange.value = undefined
  pagination.current = 1
  loadData()
}

function handleTableChange(pag: { current?: number; pageSize?: number }) {
  pagination.current = pag.current || 1
  pagination.pageSize = pag.pageSize || 10
  loadData()
}

function showDetail(instance: ApprovalInstance) {
  currentInstance.value = instance
  detailVisible.value = true
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.approval-instances-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  overflow-y: auto;
  padding-right: 8px;
}

.filter-card, .main-card { border-radius: 12px; }

.filter-card :deep(.ant-card-body) { padding: 16px; }

.search-form { display: flex; flex-wrap: wrap; gap: 12px; }
.search-form :deep(.ant-form-item) { margin-bottom: 0; margin-right: 0; }

.business-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.business-title {
  font-weight: 500;
  color: #1a1a2e;
}

.user-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.current-node {
  color: #faad14;
  font-size: 13px;
}

.no-node {
  color: #8c8c8c;
}

/* 详情样式 */
.initiator-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fafafa;
  border-radius: 8px;
}

.initiator-info .info { flex: 1; }
.initiator-info .name { font-size: 15px; font-weight: 600; }
.initiator-info .time { font-size: 12px; color: #8c8c8c; margin-top: 2px; }

.record-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.record-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.record-info { flex: 1; }
.record-info .approver {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.record-info .node-name { font-size: 12px; color: #8c8c8c; margin-top: 2px; }
.record-time { font-size: 12px; color: #8c8c8c; }

.record-comment {
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 6px;
  font-size: 13px;
  color: #666;
  margin-left: 44px;
}
</style>
