<script setup lang="ts">
import { ref } from 'vue';

import { ElCard, ElSpace, ElTag } from 'element-plus';

// 任务类型定义
interface Task {
  id: number;
  title: string;
  status: 'overdue' | 'today' | 'upcoming';
  authorization: 'authorized' | 'been_authorized' | 'can_authorize' | 'none';
  timeLeft?: string;
  overdueDays?: number;
}

// 模拟数据
const overdueTasks = ref<Task[]>([
  {
    id: 1,
    title: '量缸试水 1',
    status: 'overdue',
    authorization: 'can_authorize',
    overdueDays: 23,
  },
  {
    id: 2,
    title: '量缸试水 1',
    status: 'overdue',
    authorization: 'been_authorized',
    overdueDays: 23,
  },
  {
    id: 3,
    title: '量缸试水 1',
    status: 'overdue',
    authorization: 'authorized',
    overdueDays: 23,
  },
  {
    id: 4,
    title: '量缸试水 1',
    status: 'overdue',
    authorization: 'none',
    overdueDays: 23,
  },
]);

const todayTasks = ref<Task[]>([
  {
    id: 5,
    title: '量缸试水 2',
    status: 'today',
    authorization: 'can_authorize',
    timeLeft: '还剩 34 分钟截止',
  },
  {
    id: 6,
    title: '量缸试水 2',
    status: 'today',
    authorization: 'been_authorized',
    timeLeft: '还剩 34 分钟截止',
  },
  {
    id: 7,
    title: '量缸试水 2',
    status: 'today',
    authorization: 'authorized',
    timeLeft: '还剩 34 分钟截止',
  },
  {
    id: 8,
    title: '量缸试水 2',
    status: 'today',
    authorization: 'none',
    timeLeft: '还剩 34 分钟截止',
  },
]);

// 获取授权标签的颜色
const getAuthorizationTagColor = (auth: string) => {
  switch (auth) {
    case 'authorized': {
      return 'warning';
    }
    case 'been_authorized': {
      return 'danger';
    }
    case 'can_authorize': {
      return 'primary';
    }
    default: {
      return '';
    }
  }
};

// 获取授权标签的文本
const getAuthorizationTagText = (auth: string) => {
  switch (auth) {
    case 'authorized': {
      return '已授权';
    }
    case 'been_authorized': {
      return '被授权';
    }
    case 'can_authorize': {
      return '可授权';
    }
    default: {
      return '';
    }
  }
};
</script>

<template>
  <div class="schedule-day-view-messages">
    <ElCard
      class="messages-container"
      shadow="hover"
      :body-style="{ padding: '16px' }"
    >
      <!-- 逾期待处理部分 -->
      <div class="section">
        <h3 class="section-title">逾期待处理</h3>
        <div class="tasks-list">
          <div
            v-for="task in overdueTasks"
            :key="task.id"
            class="task-item overdue"
          >
            <div class="task-content">
              <ElSpace size="small">
                <ElTag
                  v-if="task.authorization !== 'none'"
                  :type="getAuthorizationTagColor(task.authorization)"
                  size="small"
                >
                  {{ getAuthorizationTagText(task.authorization) }}
                </ElTag>
                <span class="task-title">{{ task.title }}</span>
              </ElSpace>
            </div>
            <div class="task-time">
              <span class="overdue-text">已逾期 {{ task.overdueDays }} 天</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 当日部分 -->
      <div class="section">
        <h3 class="section-title">当日</h3>
        <div class="tasks-list">
          <div
            v-for="task in todayTasks"
            :key="task.id"
            class="task-item today"
          >
            <div class="task-content">
              <ElSpace size="small">
                <ElTag
                  v-if="task.authorization !== 'none'"
                  :type="getAuthorizationTagColor(task.authorization)"
                  size="small"
                >
                  {{ getAuthorizationTagText(task.authorization) }}
                </ElTag>
                <span class="task-title">{{ task.title }}</span>
              </ElSpace>
            </div>
            <div class="task-time">
              <span class="time-left-text">{{ task.timeLeft }}</span>
            </div>
          </div>
        </div>
      </div>
    </ElCard>
  </div>
</template>

<style scoped lang="scss">
.schedule-day-view-messages {
  width: 100%;
  height: 100%;
  padding: 16px;
}

.messages-container {
  height: 100%;
  overflow: auto;
}

.section {
  margin-bottom: 24px;

  &-title {
    padding-bottom: 8px;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #409eff;
    border-bottom: 1px solid #e4e7ed;
  }
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 4px;
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
  }

  &.overdue {
    background-color: #fdf6ec;
    border: 1px solid #fae5d3;
  }

  &.today {
    background-color: #f0f9ff;
    border: 1px solid #e0f2fe;
  }
}

.task-content {
  flex: 1;
}

.task-title {
  font-size: 14px;
  color: #303133;
}

.task-time {
  font-size: 12px;
  font-weight: 500;
}

.overdue-text {
  color: #f56c6c;
}

.time-left-text {
  color: #e6a23c;
}
</style>
