<script setup lang="ts">
import type { TaskInfo } from '#/api/workflow/task/model';

import { computed } from 'vue';

import { VbenAvatar } from '@vben/common-ui';
import { DictEnum } from '@vben/constants';

import { ElDescriptions, ElDescriptionsItem, ElTooltip, ElTag } from 'element-plus';

import { renderDict } from '#/utils/render';

import { getDiffTimeString } from './helper';

interface Props extends TaskInfo {
  active: boolean;
}

const props = withDefaults(defineProps<{ info: Props; rowKey?: string }>(), {
  rowKey: 'id',
});

const emit = defineEmits<{ click: [string] }>();

/**
 * TODO: 这里要优化 事件没有用到
 */
function handleClick() {
  const idKey = props.rowKey as keyof TaskInfo;
  emit('click', props.info[idKey]);
}

const diffUpdateTimeString = computed(() => {
  return getDiffTimeString(props.info.updateTime || props.info.createTime);
});

// 处理数字类型的状态显示
function renderStatusNumber(status: number) {
  const statusMap = {
    0: { label: '待处理', type: 'warning' },
    1: { label: '处理中', type: 'info' },
    2: { label: '已处理', type: 'success' },
    3: { label: '已退回', type: 'danger' },
  };
  
  const statusInfo = statusMap[status as keyof typeof statusMap] || { label: '未知状态', type: 'default' };
  return {
    label: statusInfo.label,
    type: statusInfo.type
  };
}

// 处理数字类型的审批状态显示
function renderApproveStatusNumber(approveStatus: number) {
  const statusMap = {
    0: { label: '未审批', type: 'info' },
    1: { label: '已同意', type: 'success' },
    2: { label: '已拒绝', type: 'danger' },
    3: { label: '已废除', type: 'warning' },
  };
  
  const statusInfo = statusMap[approveStatus as keyof typeof statusMap] || { label: '未知状态', type: 'default' };
  return {
    label: statusInfo.label,
    type: statusInfo.type
  };
}
</script>

<template>
  <div
    :class="{
      'border-primary': info.active,
    }"
    class="cursor-pointer rounded-lg border-[1px] border-solid p-3 transition-shadow duration-300 ease-in-out hover:shadow-lg"
    @click.stop="handleClick"
  >
    <ElDescriptions
      :column="1"
      :title="info.orderNo"
      size="large"
    >
      <template #extra>
        <div class="flex gap-2">
          <!-- 根据status的类型选择不同的渲染方式 -->
          <template v-if="typeof info.status === 'number'">
            <ElTag :type="renderStatusNumber(info.status).type">
              {{ renderStatusNumber(info.status).label }}
            </ElTag>
          </template>
          <component v-else :is="renderDict(info.status, DictEnum.TICKET_STATUS)" />
          
          <!-- 显示审批状态 -->
          <template v-if="typeof info.approveStatus === 'number'">
            <ElTag :type="renderApproveStatusNumber(info.approveStatus).type">
              {{ renderApproveStatusNumber(info.approveStatus).label }}
            </ElTag>
          </template>
          <component v-else-if="info.approveStatus" :is="renderDict(info.approveStatus, DictEnum.TICKET_STATUS)" />
        </div>
      </template>
      <ElDescriptionsItem>
        <div class="font-bold">{{ info.content || info.delayReason }}</div>
      </ElDescriptionsItem>
      <ElDescriptionsItem label="提交时间">
        {{ info.createTime }}
      </ElDescriptionsItem>
      <!-- <DescriptionsItem label="更新时间">
        {{ info.updateTime }}
      </DescriptionsItem> -->
    </ElDescriptions>
    <div class="flex w-full items-center justify-between text-[14px]">
      <div class="flex items-center gap-1 overflow-hidden whitespace-nowrap">
        <VbenAvatar
          :alt="info?.currentHandler"
          class="bg-primary size-[24px] rounded-full text-[10px] text-white"
          src=""
        />
        <span class="overflow-hidden text-ellipsis opacity-50">
          {{ info.currentHandler }}
        </span>
      </div>
      <div class="text-nowrap opacity-50">
        <ElTooltip placement="top" :content="`更新时间: ${info.updateTime || info.createTime}`">
          <div class="flex items-center gap-1">
            <span class="icon-[mdi--clock-outline] size-[16px]"></span>
            <span>{{ diffUpdateTimeString }}前更新</span>
          </div>
        </ElTooltip>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-descriptions__header) {
  margin-bottom: 12px !important;
}

:deep(.el-descriptions__item) {
  padding-bottom: 8px !important;
}
</style>




