<template>
  <div class="recent-drawings">
    <div class="card-header">
      <h3>最近图纸生成</h3>
      <el-button type="primary" size="small" plain @click="goAll">查看全部</el-button>
    </div>
    <div class="drawings-list">
      <div v-for="item in drawingData" :key="item.id" class="drawing-item">
        <div class="drawing-info">
          <div class="drawing-title">{{ item.file_name }}</div>
          <div class="drawing-details">
            <span class="drawing-id">生成编号：{{ item.order_no }}</span>
            <span class="drawing-user">用户：{{ item.username }}({{ item.user_id }})</span>
          </div>
          <div class="drawing-time">
            生成时间：{{
              item.CreatedAt ? dayjs(item.CreatedAt).format('YYYY-MM-DD HH:mm:ss') : ''
            }}
          </div>
        </div>
        <div class="drawing-status">
          <el-tag :type="getStatusTagType(item.status)" size="small">
            <template v-if="item.status == 0">待执行</template>
            <template v-if="item.status == 1">已分发</template>
            <template v-if="item.status == 2">执行中</template>
            <template v-if="item.status == 3">执行完成(未收集结果)</template>
            <template v-if="item.status == 4">结果已收集</template>
            <template v-if="item.status == 5">执行异常</template>
          </el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import RPC from '@/utils/rpc'
import dayjs from 'dayjs'
const router = useRouter()
const goAll = () => router.push('/GenerateRecord')
const loading = ref(false)
const getList = () => {
  loading.value = true
  RPC.post('/planned_list', { page: 1, page_size: 10 })
    .then((res) => {
      drawingData.value = res.list || []
    })
    .finally(() => {
      loading.value = false
    })
}
getList()
const drawingData = ref([])

const getStatusTagType = (status) => {
  // const statusMap = {
  //   已完成: 'success',
  //   生成中: 'warning',
  //   错误: 'danger',
  //   待处理: 'info',
  // }
  const statusMap = ['info', 'info', 'info', 'warning', 'success', 'danger']
  return statusMap[status] || ''
}
</script>

<style lang="scss" scoped>
.recent-drawings {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 100%;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  .drawings-list {
    height: 280px;
    overflow-y: auto;
    .drawing-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid #f0f2f5;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        background-color: #f8f9fa;
        margin: 0 -12px;
        padding: 16px 12px;
        border-radius: 6px;
      }

      .drawing-info {
        flex: 1;

        .drawing-title {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
          margin-bottom: 6px;
        }

        .drawing-details {
          display: flex;
          gap: 16px;
          margin-bottom: 4px;

          .drawing-id,
          .drawing-user {
            font-size: 12px;
            color: #909399;
          }
        }

        .drawing-time {
          font-size: 12px;
          color: #c0c4cc;
        }
      }

      .drawing-status {
        flex-shrink: 0;
      }
    }
  }
}
</style>
