<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import {
  getProjectDetail,
  type ProjectDetail,
  type ProjectMember,
  type ProjectMilestone,
  type ProjectTask,
  type ProjectResource,
  type ProjectRisk
} from "@/api/project";
import { GGanttChart, GGanttRow } from "@infectoone/vue-ganttastic";
import { message } from "@/utils/message";
import dayjs from "dayjs";
import isoWeek from "dayjs/plugin/isoWeek";

// 启用 isoWeek 插件，vue-ganttastic 周精度需要
dayjs.extend(isoWeek);

import ArrowLeftIcon from "~icons/ri/arrow-left-line";
import DownloadIcon from "~icons/ri/download-line";
import EditIcon from "~icons/ri/edit-line";
import UserIcon from "~icons/ri/user-line";
import AlertIcon from "~icons/ri/alert-line";
import RobotIcon from "~icons/ri/robot-2-line";
import RefreshIcon from "~icons/ri/refresh-line";
import FullscreenIcon from "~icons/ri/fullscreen-line";
import FileListIcon from "~icons/ri/file-list-line";
import ArrowRightIcon from "~icons/ri/arrow-right-s-line";
import CheckIcon from "~icons/ri/check-line";

defineOptions({
  name: "ProjectDetail"
});

const route = useRoute();
const router = useRouter();
const projectId = ref<string>(route.params.id as string);

// 加载状态
const loading = ref(false);
const ganttLoading = ref(false);

// 边距设置
const marginSettings = ref({
  top: 16,
  right: 80,
  bottom: 16,
  left: 16
});

// 计算边距样式
const marginStyle = computed(() => ({
  padding: `${marginSettings.value.top}px ${marginSettings.value.right}px ${marginSettings.value.bottom}px ${marginSettings.value.left}px`
}));

// 项目详情数据
const projectDetail = ref<ProjectDetail | null>(null);

// 项目基本信息（计算属性）
const projectInfo = computed(() => {
  const data = projectDetail.value;
  return {
    id: data?.id || projectId.value,
    projectName: data?.projectName || "",
    projectCode: data?.projectCode || "",
    status: data?.status || "ongoing",
    statusText: getStatusText(data?.status),
    startDate: data?.planStartDate || "",
    endDate: data?.planEndDate || "",
    progress: data?.progress || 0,
    progressChange: 0,
    budget: data?.budget || 0,
    cost: data?.cost || 0,
    teamSize: data?.memberCount || 0,
    riskLevel: data?.riskLevel || "low",
    riskText: getRiskText(data?.riskLevel),
    riskCount: data?.riskCount || 0,
    description: data?.description || "",
    objectives: data?.objectives || ""
  };
});

// 甘特图数据（使用任务列表）

// AI助手消息
const aiMessages = ref([
  {
    type: "ai",
    content:
      "您好！我是项目AI助手，我可以帮您分析项目进度和流程卡点。请问有什么可以帮助您的？",
    time: "上午 9:30"
  },
  {
    type: "user",
    content: "当前项目进度如何？有没有什么风险点需要注意？",
    time: "上午 9:32"
  },
  {
    type: "ai",
    content: `**项目进度分析：** 当前项目整体进度为68%，比计划进度超前5%。

**关键风险点：**
• 玻璃幕墙材料尚未发货，可能影响后续安装工序
• 水电安装工序存在资源调配问题，可能导致延期
• 室内装修团队人力不足，建议增加2名熟练工人

**建议措施：** 优先跟进玻璃幕墙供应商发货情况，协调水电安装资源，考虑从其他项目临时调配装修工人。`,
    time: "上午 9:33"
  }
]);

const aiInput = ref("");

// 资源清单数据（从API获取）
const resourceList = computed(() => {
  return projectDetail.value?.resources || [];
});

// 风险列表数据（从API获取）
const riskList = computed(() => {
  return projectDetail.value?.risks || [];
});

// 成员列表数据（从API获取）
const memberList = computed(() => {
  return projectDetail.value?.members || [];
});

// 里程碑列表数据（从API获取）
const milestoneList = computed(() => {
  return projectDetail.value?.milestones || [];
});

// 任务列表数据（从API获取，用于甘特图）
const taskList = computed(() => {
  return projectDetail.value?.tasks || [];
});

// 返回上一页
function goBack() {
  router.push("/project");
}

// 获取甘特图数据（现在使用项目详情中的任务数据）
async function fetchGanttData() {
  // 任务数据已从项目详情API获取，无需单独请求
  ganttLoading.value = true;
  try {
    // 模拟加载延迟
    await new Promise(resolve => setTimeout(resolve, 300));
  } catch (error) {
    console.error("获取甘特图数据失败:", error);
  } finally {
    ganttLoading.value = false;
  }
}

// 发送AI消息
function sendAiMessage() {
  if (!aiInput.value.trim()) return;
  const userMsg = aiInput.value.trim();
  aiMessages.value.push({
    type: "user",
    content: userMsg,
    time: dayjs().format("HH:mm")
  });
  aiInput.value = "";

  // 模拟AI回复
  setTimeout(() => {
    aiMessages.value.push({
      type: "ai",
      content: "收到您的问题，我正在分析项目数据，请稍候...",
      time: dayjs().format("HH:mm")
    });
  }, 500);
}

// 获取状态标签类型
function getStatusType(
  status?: string
): "success" | "warning" | "info" | "primary" | "danger" {
  switch (status) {
    case "completed":
      return "success";
    case "ongoing":
      return "primary";
    case "paused":
      return "warning";
    case "cancelled":
      return "danger";
    default:
      return "info";
  }
}

// 获取物料状态类型
function getMaterialStatusType(
  status: string
): "success" | "warning" | "info" | "primary" | "danger" {
  switch (status) {
    case "arrived":
      return "success";
    case "pending":
      return "info";
    case "delayed":
      return "danger";
    default:
      return "info";
  }
}

// 将任务数据转换为 vue-ganttastic 格式
const ganttTasks = computed(() => {
  return taskList.value.map(task => ({
    id: task.id,
    label: task.taskName,
    startDate: task.planStartDate || "",
    endDate: task.planEndDate || "",
    progress: task.progress || 0,
    assignee: task.assigneeName || "未分配",
    status: task.status || "pending",
    ganttBarConfig: {
      id: task.id,
      label: `${task.taskName} ${task.assigneeName ? "负责人：" + task.assigneeName : ""}`,
      hasHandles: false,
      style: {
        backgroundColor: getTaskColor(task.status, task.progress),
        color: "#fff"
      }
    }
  }));
});

// 获取任务颜色
function getTaskColor(status?: string, progress?: number): string {
  if (progress === 100) return "#67c23a"; // 已完成 - 绿色
  if (status === "completed") return "#67c23a"; // 已完成 - 绿色
  if (status === "in_progress" || status === "ongoing") return "#409eff"; // 进行中 - 蓝色
  if (status === "pending") return "#e6a23c"; // 待开始 - 橙色
  if (status === "delayed") return "#f56c6c"; // 延期 - 红色
  if (status === "paused") return "#909399"; // 暂停 - 灰色
  return "#409eff"; // 默认 - 蓝色
}

// 将里程碑数据转换为 vue-ganttastic 格式
const ganttMilestones = computed(() => {
  return milestoneList.value.map(milestone => ({
    id: milestone.id,
    label: milestone.milestoneName,
    startDate: milestone.planDate || "",
    endDate: milestone.planDate || "",
    status: milestone.status || "pending",
    isKey: milestone.isKey === 1,
    ganttBarConfig: {
      id: milestone.id,
      label: `${milestone.milestoneName} ${milestone.isKey === 1 ? "【关键】" : ""}`,
      hasHandles: false,
      style: {
        backgroundColor: getMilestoneColor(milestone.status, milestone.isKey),
        color: "#fff",
        borderRadius: "50%",
        width: "16px",
        height: "16px",
        minWidth: "16px"
      }
    }
  }));
});

// 获取里程碑颜色
function getMilestoneColor(status?: string, isKey?: number): string {
  if (status === "completed") return "#67c23a"; // 已完成 - 绿色
  if (status === "in_progress") return "#409eff"; // 进行中 - 蓝色
  if (isKey === 1) return "#f56c6c"; // 关键里程碑 - 红色
  return "#e6a23c"; // 默认 - 橙色
}

// 获取里程碑状态文本
function getMilestoneStatusText(status?: string): string {
  const statusMap: Record<string, string> = {
    completed: "已完成",
    in_progress: "进行中",
    pending: "待开始",
    delayed: "已延期"
  };
  return statusMap[status || ""] || "待开始";
}

// 按日期排序的里程碑列表
const sortedMilestones = computed(() => {
  return [...milestoneList.value].sort((a, b) => {
    const dateA = new Date(a.planDate || "").getTime();
    const dateB = new Date(b.planDate || "").getTime();
    return dateA - dateB;
  });
});

// 计算甘特图日期范围
const ganttDateRange = computed(() => {
  const start = projectInfo.value.startDate || dayjs().format("YYYY-MM-DD");
  const end =
    projectInfo.value.endDate || dayjs().add(6, "month").format("YYYY-MM-DD");
  return {
    start: dayjs(start).format("YYYY-MM-DD"),
    end: dayjs(end).format("YYYY-MM-DD")
  };
});

// 计算项目时间跨度（天数）
const projectDays = computed(() => {
  const start = dayjs(ganttDateRange.value.start);
  const end = dayjs(ganttDateRange.value.end);
  return end.diff(start, "day");
});

// 动态计算甘特图精度：超过两个月(60天)使用周精度，否则使用日精度
const ganttPrecision = computed(() => {
  return projectDays.value > 60 ? "week" : "day";
});

// 获取项目详情
async function fetchProjectDetail() {
  if (!projectId.value) return;
  loading.value = true;
  try {
    const res = await getProjectDetail(projectId.value);
    const result = res as any;
    if (result.code === 200 && result.data) {
      projectDetail.value = result.data;
    }
  } catch (error) {
    console.error("获取项目详情失败:", error);
    message("获取项目详情失败", { type: "error" });
  } finally {
    loading.value = false;
  }
}

// 获取状态文本
function getStatusText(status?: string): string {
  const statusMap: Record<string, string> = {
    ongoing: "进行中",
    completed: "已完成",
    paused: "已暂停",
    cancelled: "已取消",
    planning: "规划中",
    draft: "草稿"
  };
  return statusMap[status || ""] || "未知";
}

// 获取风险文本
function getRiskText(risk?: string): string {
  const riskMap: Record<string, string> = {
    low: "低",
    medium: "中等",
    high: "高"
  };
  return riskMap[risk || ""] || "低";
}

// 获取角色文本
function getRoleText(roleCode?: string): string {
  const roleMap: Record<string, string> = {
    manager: "项目经理",
    leader: "负责人",
    member: "成员",
    sponsor: "发起人"
  };
  return roleMap[roleCode || ""] || roleCode || "成员";
}

// 获取资源类型文本
function getResourceTypeText(type?: string): string {
  const typeMap: Record<string, string> = {
    equipment: "设备",
    material: "物料",
    human: "人力",
    service: "服务"
  };
  return typeMap[type || ""] || type || "其他";
}

// 获取资源状态类型
function getResourceStatusType(
  status?: string
): "success" | "warning" | "info" | "primary" | "danger" {
  switch (status) {
    case "arrived":
    case "actual":
      return "success";
    case "planned":
      return "info";
    case "delayed":
      return "danger";
    default:
      return "info";
  }
}

// 获取资源状态文本
function getResourceStatusText(status?: string): string {
  const statusMap: Record<string, string> = {
    arrived: "已到货",
    actual: "实际",
    planned: "计划中",
    delayed: "延期"
  };
  return statusMap[status || ""] || status || "计划中";
}

// 获取风险等级标签类型
function getRiskLevelType(
  level?: string
): "success" | "warning" | "danger" | "info" {
  switch (level) {
    case "low":
      return "success";
    case "medium":
      return "warning";
    case "high":
      return "danger";
    default:
      return "info";
  }
}

onMounted(() => {
  fetchProjectDetail();
  fetchGanttData();
});
</script>

<template>
  <div class="project-detail w-full" :style="marginStyle">
    <!-- 顶部导航 -->
    <div class="flex-bc mb-4">
      <div class="flex items-center gap-3">
        <el-button link @click="goBack">
          <component :is="useRenderIcon(ArrowLeftIcon)" />
        </el-button>
        <div>
          <div class="flex items-center gap-2">
            <h2 class="text-xl font-bold">{{ projectInfo.projectName }}</h2>
            <el-tag :type="getStatusType(projectInfo.status)" size="small">
              {{ projectInfo.statusText }}
            </el-tag>
          </div>
          <p class="text-gray-500 text-sm mt-1">
            项目编号: {{ projectInfo.projectCode }} | 开始日期:
            {{ projectInfo.startDate }} | 预计结束日期:
            {{ projectInfo.endDate }}
          </p>
        </div>
      </div>
      <div class="flex gap-2">
        <el-button>
          <template #icon>
            <component :is="useRenderIcon(DownloadIcon)" />
          </template>
          导出报告
        </el-button>
        <el-button type="primary">
          <template #icon>
            <component :is="useRenderIcon(EditIcon)" />
          </template>
          编辑项目
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="16" class="mb-4">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="flex-bc">
            <div>
              <p class="text-gray-500 text-sm">项目进度</p>
              <p class="text-2xl font-bold mt-1">{{ projectInfo.progress }}%</p>
              <p class="text-xs text-green-500 mt-1">
                <el-icon
                  ><component :is="useRenderIcon('ri/arrow-up-line')"
                /></el-icon>
                {{ projectInfo.progressChange }}%
              </p>
            </div>
            <div class="stat-icon bg-blue-100">
              <el-icon :size="24" color="#409eff">
                <component :is="useRenderIcon('ri/bar-chart-line')" />
              </el-icon>
            </div>
          </div>
          <el-progress
            :percentage="projectInfo.progress"
            :status="projectInfo.progress === 100 ? 'success' : ''"
            class="mt-3"
          />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="flex-bc">
            <div>
              <p class="text-gray-500 text-sm">项目预算</p>
              <p class="text-2xl font-bold mt-1">¥{{ projectInfo.cost }}万</p>
              <p class="text-xs text-gray-400 mt-1">
                / ¥{{ projectInfo.budget }}万
              </p>
            </div>
            <div class="stat-icon bg-orange-100">
              <el-icon :size="24" color="#e6a23c">
                <component :is="useRenderIcon('ri/money-cny-circle-line')" />
              </el-icon>
            </div>
          </div>
          <el-progress
            :percentage="
              projectInfo.budget > 0
                ? Math.round((projectInfo.cost / projectInfo.budget) * 100)
                : 0
            "
            status="warning"
            class="mt-3"
          />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="flex-bc">
            <div>
              <p class="text-gray-500 text-sm">团队成员</p>
              <p class="text-2xl font-bold mt-1">
                {{ projectInfo.teamSize }}人
              </p>
              <p class="text-xs text-gray-400 mt-1">项目参与人员</p>
            </div>
            <div class="stat-icon bg-green-100">
              <el-icon :size="24" color="#67c23a">
                <component :is="useRenderIcon(UserIcon)" />
              </el-icon>
            </div>
          </div>
          <div class="flex -space-x-2 mt-3">
            <el-avatar
              v-for="member in memberList.slice(0, 4)"
              :key="member.id"
              :size="28"
              :src="
                member.avatar ||
                `https://api.dicebear.com/7.x/avataaars/svg?seed=${member.id}`
              "
              :title="getRoleText(member.roleCode)"
            />
            <el-avatar
              v-if="memberList.length > 4"
              :size="28"
              class="bg-gray-200"
            >
              +{{ memberList.length - 4 }}
            </el-avatar>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="flex-bc">
            <div>
              <p class="text-gray-500 text-sm">风险等级</p>
              <p class="text-2xl font-bold mt-1 text-orange-500">
                {{ projectInfo.riskText }}
              </p>
              <p class="text-xs text-orange-400 mt-1">
                <component :is="useRenderIcon(AlertIcon)" class="inline" />
                {{ projectInfo.riskCount }}个潜在风险需要关注
              </p>
            </div>
            <div class="stat-icon bg-orange-100">
              <el-icon :size="24" color="#e6a23c">
                <component :is="useRenderIcon(AlertIcon)" />
              </el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 主要内容区 -->
    <el-row :gutter="16">
      <!-- 左侧：甘特图和物料清单 -->
      <el-col :xs="24" :lg="24">
        <!-- 甘特图 -->
        <el-card shadow="hover" class="mb-4">
          <template #header>
            <div class="flex-bc">
              <span class="font-medium">项目进度甘特图</span>
              <div class="flex gap-2">
                <el-button link @click="fetchGanttData">
                  <component :is="useRenderIcon(RefreshIcon)" />
                </el-button>
                <el-button link>
                  <component :is="useRenderIcon(FullscreenIcon)" />
                </el-button>
              </div>
            </div>
          </template>
          <div v-loading="ganttLoading" class="gantt-container">
            <!-- 图例 -->
            <div class="flex gap-4 mb-4 text-sm">
              <div class="flex items-center gap-1">
                <div class="w-4 h-3 bg-blue-400 rounded-sm" />
                <span>计划进度</span>
              </div>
              <div class="flex items-center gap-1">
                <div class="w-4 h-3 bg-green-400 rounded-sm" />
                <span>实际进度</span>
              </div>
            </div>

            <!-- 任务甘特图主体 - 使用 vue-ganttastic -->
            <div v-if="taskList.length > 0" class="gantt-chart-container mb-6">
              <g-gantt-chart
                :chart-start="ganttDateRange.start"
                :chart-end="ganttDateRange.end"
                :precision="ganttPrecision"
                date-format="YYYY-MM-DD"
                bar-start="startDate"
                bar-end="endDate"
                grid
                highlight-on-hover
              >
                <g-gantt-row
                  v-for="task in ganttTasks"
                  :key="task.id"
                  :bars="[task]"
                  :label="task.label"
                />
              </g-gantt-chart>
            </div>
            <el-empty v-else description="暂无任务数据" class="mb-6" />

            <!-- 里程碑时间线 -->
            <div v-if="milestoneList.length > 0" class="milestone-section">
              <div class="flex items-center gap-2 mb-4">
                <el-icon :size="18" color="#f56c6c">
                  <component :is="useRenderIcon('ri/flag-line')" />
                </el-icon>
                <span class="font-medium text-base">项目里程碑</span>
                <el-tag size="small" type="info"
                  >{{ milestoneList.length }} 个</el-tag
                >
              </div>
              <div class="milestone-timeline">
                <div
                  v-for="(milestone, index) in sortedMilestones"
                  :key="milestone.id"
                  class="milestone-item"
                  :class="{
                    'is-completed': milestone.status === 'completed',
                    'is-key': milestone.isKey === 1
                  }"
                >
                  <div class="milestone-marker">
                    <div
                      class="milestone-dot"
                      :style="{
                        backgroundColor: getMilestoneColor(
                          milestone.status,
                          milestone.isKey
                        )
                      }"
                    >
                      <el-icon
                        v-if="milestone.status === 'completed'"
                        :size="12"
                        color="#fff"
                      >
                        <component :is="useRenderIcon('ri/check-line')" />
                      </el-icon>
                      <el-icon
                        v-else-if="milestone.isKey === 1"
                        :size="12"
                        color="#fff"
                      >
                        <component :is="useRenderIcon('ri/star-fill')" />
                      </el-icon>
                    </div>
                    <div
                      v-if="index < sortedMilestones.length - 1"
                      class="milestone-line"
                    />
                  </div>
                  <div class="milestone-content">
                    <div class="milestone-header">
                      <span class="milestone-name">{{
                        milestone.milestoneName
                      }}</span>
                      <el-tag
                        size="small"
                        :type="
                          milestone.status === 'completed'
                            ? 'success'
                            : milestone.status === 'in_progress'
                              ? 'primary'
                              : 'info'
                        "
                      >
                        {{ getMilestoneStatusText(milestone.status) }}
                      </el-tag>
                      <el-tag
                        v-if="milestone.isKey === 1"
                        size="small"
                        type="danger"
                        effect="dark"
                        >关键</el-tag
                      >
                    </div>
                    <div class="milestone-date">
                      <el-icon :size="12"
                        ><component :is="useRenderIcon('ri/calendar-line')"
                      /></el-icon>
                      <span>计划日期: {{ milestone.planDate }}</span>
                      <span v-if="milestone.actualDate" class="actual-date">
                        (实际: {{ milestone.actualDate }})
                      </span>
                    </div>
                    <div v-if="milestone.description" class="milestone-desc">
                      {{ milestone.description }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 物料清单 -->
        <el-card shadow="hover">
          <template #header>
            <div class="flex-bc">
              <div class="flex items-center gap-2">
                <component :is="useRenderIcon(FileListIcon)" />
                <span class="font-medium">项目物料清单</span>
              </div>
              <el-button link type="primary">
                查看全部
                <component :is="useRenderIcon(ArrowRightIcon)" />
              </el-button>
            </div>
          </template>
          <el-table :data="resourceList" style="width: 100%">
            <el-table-column label="资源名称" min-width="200">
              <template #default="{ row }">
                <div class="flex items-center gap-2">
                  <el-avatar :size="32" shape="square" class="bg-gray-100">
                    <component :is="useRenderIcon('ri/box-line')" />
                  </el-avatar>
                  <div>
                    <div class="font-medium">{{ row.resourceName }}</div>
                    <div class="text-xs text-gray-400">
                      {{ getResourceTypeText(row.resourceType) }}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="规格" prop="specification" width="120" />
            <el-table-column label="数量" width="100">
              <template #default="{ row }">
                {{ row.planQuantity }} {{ row.unit }}
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getResourceStatusType(row.status)" size="small">
                  {{ getResourceStatusText(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="预计到货" width="120">
              <template #default="{ row }">
                <div class="flex items-center gap-1">
                  <span>{{ row.planArriveDate || "--" }}</span>
                  <el-icon
                    v-if="row.status === 'arrived' || row.status === 'actual'"
                    color="#67c23a"
                    class="ml-1"
                  >
                    <component :is="useRenderIcon(CheckIcon)" />
                  </el-icon>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" fixed="right">
              <template #default>
                <el-button link type="primary" size="small">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.project-detail {
  padding: 16px;
}

.stat-card {
  .stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
  }
}

// 甘特图样式
.gantt-container {
  min-height: 300px;
}

.gantt-chart-container {
  :deep(.g-gantt-chart) {
    background-color: #fafafa;
    border-radius: 8px;
  }

  :deep(.g-gantt-row) {
    &:hover {
      background-color: #f0f2f5;
    }
  }

  :deep(.g-gantt-bar) {
    border-radius: 4px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
  }
}

.quick-questions {
  padding: 8px 16px;
  border-top: 1px solid #e4e7ed;

  .el-button {
    font-size: 12px;
  }
}

.ai-input-area {
  padding: 12px 16px;
  border-top: 1px solid #e4e7ed;
}

// 里程碑区域样式
.milestone-section {
  padding-top: 16px;
  border-top: 1px dashed #e4e7ed;
}

// 里程碑时间线样式
.milestone-timeline {
  padding: 8px 0;
}

.milestone-item {
  display: flex;
  gap: 16px;
  padding: 12px 0;

  &.is-completed {
    .milestone-content {
      opacity: 0.8;
    }
  }
}

.milestone-marker {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
}

.milestone-dot {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
}

.milestone-line {
  flex: 1;
  width: 2px;
  min-height: 40px;
  margin-top: 4px;
  background: linear-gradient(to bottom, #dcdfe6, #e4e7ed);
}

.milestone-content {
  flex: 1;
  padding-bottom: 8px;
}

.milestone-header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.milestone-name {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.milestone-date {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 4px;
  font-size: 12px;
  color: #606266;

  .actual-date {
    font-weight: 500;
    color: #67c23a;
  }
}

.milestone-desc {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #909399;
}

// 边距设置按钮
.margin-setting-btn {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 100;
  width: 36px;
  height: 36px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgb(0 0 0 / 10%);

  &:hover {
    background-color: #f5f7fa;
  }
}

// 边距设置面板
.margin-setting-panel {
  padding: 8px;

  .setting-title {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #303133;
    text-align: center;
  }

  .setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;

    span {
      font-size: 13px;
      color: #606266;
    }
  }

  .el-button {
    width: 100%;
    margin-top: 8px;
  }
}
</style>
