<template>
  <!-- 移动端布局 -->
  <el-drawer
    v-if="isMobile"
    v-model="dialogVisible"
    title="审批流程"
    direction="rtl"
    size="100%"
    :close-on-press-escape="true"
    :destroy-on-close="true"
  >
    <div class="mobile-approval-records">
      <el-timeline>
        <el-timeline-item
          v-for="record in approvalRecords"
          :key="record.id"
          :timestamp="formatDate(record.createTime)"
          placement="top"
          :type="getTimelineType(record.approvalResult)"
          :icon="getTimelineIcon(record.approvalResult)"
        >
          <div class="mobile-record-card">
            <div class="mobile-record-card__header">
              <span class="mobile-record-card__title">{{ getLevelText(record.approvalLevel) }}</span>
              <el-tag :type="getStatusTagType(record.approvalResult)" size="small">
                {{ getApprovalResultText(record.approvalResult) }}
              </el-tag>
            </div>
            <div class="mobile-record-card__body">
              <div class="mobile-record-card__row">
                <span class="mobile-record-card__label">申请人</span>
                <span>{{ record.applicantName || record.applicant }}</span>
              </div>
              <div class="mobile-record-card__row">
                <span class="mobile-record-card__label">审批人</span>
                <span>{{ record.approverName || record.approver }}</span>
              </div>
              <div class="mobile-record-card__row" v-if="record.assigner">
                <span class="mobile-record-card__label">指定者</span>
                <span>{{ record.assignerName || record.assigner }}</span>
              </div>
              <div class="mobile-record-card__row" v-if="record.assignReason">
                <span class="mobile-record-card__label">指定原因</span>
                <span>{{ record.assignReason }}</span>
              </div>
              <div class="mobile-record-card__row" v-if="record.approvalTime">
                <span class="mobile-record-card__label">审批时间</span>
                <span>{{ formatDate(record.approvalTime) }}</span>
              </div>
              <div class="mobile-record-card__row" v-if="record.comment">
                <span class="mobile-record-card__label">审批意见</span>
                <span>{{ record.comment }}</span>
              </div>
              <div class="mobile-record-card__row">
                <span class="mobile-record-card__label">流程状态</span>
                <el-tag :type="getProcessStatusTagType(record.processStatus)" size="small">
                  {{ getProcessStatusText(record.processStatus) }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
      <el-empty v-if="approvalRecords.length === 0" description="暂无审批记录" />
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-drawer>

  <!-- PC端布局 -->
  <el-dialog v-else v-model="dialogVisible" title="审批流程" width="700px" :close-on-press-escape="true" :destroy-on-close="true">
    <el-table v-loading="loading" :data="approvalRecords" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="审批层级" align="center" width="100"><template #default="scope">{{ getLevelText(scope.row.approvalLevel) }}</template></el-table-column>
      <el-table-column label="申请人" align="center" prop="applicantName" width="100"><template #default="scope">{{ scope.row.applicantName || scope.row.applicant }}</template></el-table-column>
      <el-table-column label="审批人" align="center" prop="approverName" width="100"><template #default="scope">{{ scope.row.approverName || scope.row.approver }}</template></el-table-column>
      <el-table-column label="审批结果" align="center" width="90"><template #default="scope"><el-tag :type="getStatusTagType(scope.row.approvalResult)" size="small">{{ getApprovalResultText(scope.row.approvalResult) }}</el-tag></template></el-table-column>
      <el-table-column label="流程状态" align="center" width="90"><template #default="scope"><el-tag :type="getProcessStatusTagType(scope.row.processStatus)" size="small">{{ getProcessStatusText(scope.row.processStatus) }}</el-tag></template></el-table-column>
      <el-table-column label="审批时间" align="center" prop="approvalTime" width="160"><template #default="scope">{{ scope.row.approvalTime ? formatDate(scope.row.approvalTime) : '-' }}</template></el-table-column>
      <el-table-column label="审批意见" align="center" prop="comment" min-width="150" />
    </el-table>
    <el-empty v-if="approvalRecords.length === 0" description="暂无审批记录" />
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ApprovalRecordApi } from '@/api/erp/approval'
import { formatDate } from '@/utils/formatTime'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)

const dialogVisible = ref(false)
const loading = ref(false)
const approvalRecords = ref<any[]>([])

const open = async (bizId: string, bizTableName: string) => {
  dialogVisible.value = true
  loading.value = true
  try {
    const data = await ApprovalRecordApi.getApprovalRecordListByBiz(bizId, bizTableName)
    approvalRecords.value = data
  } catch (error) {
    console.error('获取审批记录失败', error)
  } finally {
    loading.value = false
  }
}

const getLevelText = (level: number) => {
  return `第${level}级审批`
}

const getApprovalResultText = (result: number) => {
  const map = {
    0: '待审批',
    1: '已通过',
    2: '已驳回',
    3: '已转审'
  }
  return map[result] || '未知'
}

const getProcessStatusText = (status: number) => {
  const map = {
    1: '流转中',
    2: '已通过',
    3: '已驳回',
    4: '已终止'
  }
  return map[status] || '未知'
}

const getStatusTagType = (result: number) => {
  const map = {
    0: 'warning',
    1: 'success',
    2: 'danger',
    3: 'info'
  }
  return map[result] || ''
}

const getProcessStatusTagType = (status: number) => {
  const map = {
    1: 'warning',
    2: 'success',
    3: 'danger',
    4: 'info'
  }
  return map[status] || ''
}

const getTimelineType = (result: number) => {
  const map = {
    0: 'warning',
    1: 'success',
    2: 'danger',
    3: 'info'
  }
  return map[result] || 'primary'
}

const getTimelineIcon = (result: number) => {
  const map = {
    0: 'Clock',
    1: 'Check',
    2: 'Close',
    3: 'Right'
  }
  return map[result] || 'InfoFilled'
}

defineExpose({ open })
</script>

<style scoped lang="scss">
.mobile-approval-records {
  padding: 12px;
}
.mobile-record-card {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
  overflow: hidden;
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
  }
  &__title {
    font-weight: 600;
    font-size: 14px;
    color: #303133;
  }
  &__body {
    padding: 10px 12px;
  }
  &__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
    color: #606266;
  }
  &__label {
    color: #909399;
    flex-shrink: 0;
    margin-right: 12px;
  }
}
</style>
