<script setup lang="ts">
import { computed, onActivated, ref, watch } from 'vue';
import { fetchGetMyOwnedProjectPage, fetchGetMyParticipatedProjectPage } from '@/service/api';
import { useRouterPush } from '@/hooks/common/router';
import {
  type WorkbenchOwnedProjectView,
  type WorkbenchParticipatedProjectView,
  buildWorkbenchOwnedProjects,
  buildWorkbenchParticipatedProjects
} from '../homepage';
import { useWorkbenchRefresh } from '../composables/use-workbench-refresh';
import WorkbenchModuleCard from './workbench-module-card.vue';

defineOptions({ name: 'WorkbenchProjectGrid' });

interface Props {
  editing?: boolean;
}

withDefaults(defineProps<Props>(), { editing: false });

defineEmits<{
  (e: 'hide'): void;
}>();

const { routerPushByKey } = useRouterPush();

type ProjectViewKey = 'participated' | 'owned';

const activeView = ref<ProjectViewKey>('participated');

const participatedItems = ref<WorkbenchParticipatedProjectView[]>([]);
const ownedItems = ref<WorkbenchOwnedProjectView[]>([]);

const { loading, refresh } = useWorkbenchRefresh(async () => {
  // pageSize=-1 一次拉全部；列表已由后端按"进行中 + 创建时间升序"过滤排序
  const [participated, owned] = await Promise.all([
    fetchGetMyParticipatedProjectPage({ pageNo: 1, pageSize: -1 }),
    fetchGetMyOwnedProjectPage({ pageNo: 1, pageSize: -1 })
  ]);
  if (!participated.error) {
    participatedItems.value = buildWorkbenchParticipatedProjects(participated.data?.list ?? []);
  }
  if (!owned.error) {
    ownedItems.value = buildWorkbenchOwnedProjects(owned.data?.list ?? []);
  }
});

// 工作台路由 keepAlive：切回不重挂，用 onActivated 替代 onMounted，每次激活重拉（首挂也会触发，不漏首屏）
onActivated(refresh);

const currentOwnedId = ref<string>('');
watch(ownedItems, list => {
  if (!list.find(item => item.id === currentOwnedId.value)) {
    currentOwnedId.value = list[0]?.id ?? '';
  }
});
const currentOwned = computed(() => ownedItems.value.find(item => item.id === currentOwnedId.value) ?? null);

// 成员负载：柱长按组内最高任务数归一（相对负载），颜色按绝对任务数分档（与团队负载 6/4 阈值一致）
function resolveMemberLoadLevel(activeTaskCount: number) {
  if (activeTaskCount >= 6) return 'over';
  if (activeTaskCount >= 4) return 'warn';
  return 'ok';
}
const ownedMembersView = computed(() => {
  const members = currentOwned.value?.members ?? [];
  const maxTaskCount = members.reduce((max, member) => Math.max(max, member.activeTaskCount), 0);
  return members.map(member => ({
    userId: member.userId,
    userName: member.userName,
    activeTaskCount: member.activeTaskCount,
    barPercent: maxTaskCount > 0 ? Math.round((member.activeTaskCount / maxTaskCount) * 100) : 0,
    level: resolveMemberLoadLevel(member.activeTaskCount)
  }));
});

function handleEnterProjectList() {
  routerPushByKey('project_list');
}
</script>

<template>
  <WorkbenchModuleCard
    v-loading="loading"
    title="我的项目"
    icon="mdi:briefcase-outline"
    :editing="editing"
    @hide="$emit('hide')"
    @refresh="refresh"
  >
    <div class="workbench-project__tabs">
      <ElRadioGroup v-model="activeView" size="small">
        <ElRadioButton value="participated">我参与的</ElRadioButton>
        <ElRadioButton value="owned">我负责的</ElRadioButton>
      </ElRadioGroup>
      <ElButton type="primary" link @click="handleEnterProjectList">
        <span>进入项目列表</span>
        <SvgIcon icon="mdi:arrow-right-thin" class="workbench-project__more-icon" />
      </ElButton>
    </div>
    <div class="workbench-project__scroll">
      <!-- 我参与的：网格视图 -->
      <template v-if="activeView === 'participated'">
        <p class="workbench-project__desc">直接看每个项目的当前进度、我的角色与未完成任务</p>

        <div v-if="participatedItems.length" class="workbench-project__grid">
          <article v-for="item in participatedItems" :key="item.id" class="workbench-project__card">
            <div class="workbench-project__card-header">
              <div class="workbench-project__card-title-group">
                <h4 class="workbench-project__card-title" :title="item.name">{{ item.name }}</h4>
                <span v-if="item.code" class="workbench-project__card-code">{{ item.code }}</span>
              </div>
              <span
                class="workbench-project__card-status"
                :class="`workbench-project__card-status--${item.statusTone}`"
              >
                {{ item.statusName || '进行中' }}
              </span>
            </div>

            <div class="workbench-project__card-role">
              <span class="workbench-project__card-role-label">我的角色</span>
              <strong class="workbench-project__card-role-value">{{ item.myRole || '—' }}</strong>
            </div>

            <div class="workbench-project__progress">
              <div class="workbench-project__progress-header">
                <span class="workbench-project__progress-label">进度</span>
                <strong class="workbench-project__progress-value">{{ item.progress }}%</strong>
              </div>
              <div class="workbench-project__progress-bar">
                <div
                  class="workbench-project__progress-bar-inner"
                  :class="`workbench-project__progress-bar-inner--${item.statusTone}`"
                  :style="{ width: `${item.progress}%` }"
                />
              </div>
            </div>

            <div class="workbench-project__footer">
              <div class="workbench-project__footer-block">
                <span class="workbench-project__footer-label">我负责的任务</span>
                <strong class="workbench-project__footer-value">
                  {{ item.myTaskCount }}
                  <span v-if="item.myPendingTaskCount > 0" class="workbench-project__footer-sub">
                    （待处理 {{ item.myPendingTaskCount }}）
                  </span>
                </strong>
              </div>
            </div>
          </article>
        </div>
        <ElEmpty v-else description="暂未参与任何项目" :image-size="72" />
      </template>

      <!-- 我负责的：单对象深度详情 -->
      <template v-else>
        <ElEmpty v-if="!currentOwned" description="您当前没有负责的项目" :image-size="72" />
        <template v-else>
          <div v-if="ownedItems.length > 1" class="ps-head">
            <span class="ps-pin-label">当前项目：</span>
            <ElSelect v-model="currentOwnedId" size="small" class="ps-pin">
              <ElOption v-for="p in ownedItems" :key="p.id" :label="p.name" :value="p.id" />
            </ElSelect>
          </div>
          <div v-else class="ps-head ps-head--single">
            <span class="ps-pin-label">当前项目：</span>
            <strong class="ps-single-name">{{ currentOwned.name }}</strong>
          </div>

          <div class="ps-overview">
            <div class="ps-ring" :style="{ '--p': currentOwned.progress } as any">
              <span>{{ currentOwned.progress }}%</span>
            </div>
            <div class="ps-kpis">
              <div class="ps-kpi">
                <b>{{ currentOwned.executionCount }}</b>
                <span>执行</span>
              </div>
              <div class="ps-kpi">
                <b>{{ currentOwned.taskCount }}</b>
                <span>任务</span>
              </div>
              <div class="ps-kpi">
                <b>{{ currentOwned.memberCount }}</b>
                <span>成员</span>
              </div>
              <div class="ps-kpi">
                <b :class="{ 'is-danger': currentOwned.overdueCount > 0 }">{{ currentOwned.overdueCount }}</b>
                <span>逾期</span>
              </div>
            </div>
          </div>
          <div v-if="currentOwned.plannedEndDate" class="ps-sub">
            计划结束 {{ currentOwned.plannedEndDate }}
            <template v-if="currentOwned.remainingDays !== null">
              ·
              {{
                currentOwned.remainingDays >= 0
                  ? `剩 ${currentOwned.remainingDays} 天`
                  : `已逾期 ${-currentOwned.remainingDays} 天`
              }}
            </template>
          </div>
          <div v-else class="ps-sub">未设置计划结束日期</div>

          <div class="ps-section-title">👥 成员负载</div>
          <ul class="ps-members">
            <li v-for="m in ownedMembersView" :key="m.userId">
              <span class="ps-member-name" :title="m.userName || ''">{{ m.userName || '—' }}</span>
              <div class="ps-bar">
                <div class="ps-bar-inner" :class="`is-${m.level}`" :style="{ width: `${m.barPercent}%` }" />
              </div>
              <span class="ps-member-tasks">{{ m.activeTaskCount }}</span>
            </li>
          </ul>
        </template>
      </template>
    </div>
  </WorkbenchModuleCard>
</template>

<style scoped>
.workbench-project__tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.workbench-project__scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.workbench-project__desc {
  margin: 0 0 14px;
  color: rgb(100 116 139 / 92%);
  font-size: 13px;
  line-height: 1.6;
}

.workbench-project__more-icon {
  margin-left: 4px;
  font-size: 16px;
}

.workbench-project__grid {
  display: grid;
  /* 按容器宽度自适应列数（而非视口）：minmax 180 让 w7≈588px 容器排 3 列，auto-fit 平分不留白 */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.workbench-project__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgb(226 232 240 / 92%);
  border-radius: 18px;
  background: linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(248 250 252 / 96%));
  transition:
    border-color 160ms ease,
    transform 160ms ease;
}

.workbench-project__card:hover {
  border-color: rgb(14 116 144 / 60%);
}

.workbench-project__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.workbench-project__card-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.workbench-project__card-title {
  margin: 0;
  /* 标题最长等效 10 个汉字宽度（10em≈160px），超出省略号，hover 看完整名 */
  max-width: 10em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgb(15 23 42 / 98%);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.workbench-project__card-code {
  color: rgb(100 116 139 / 92%);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.workbench-project__card-status {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.workbench-project__card-status--emerald {
  background-color: rgb(220 252 231 / 96%);
  color: rgb(5 150 105 / 96%);
}

.workbench-project__card-status--sky {
  background-color: rgb(224 242 254 / 96%);
  color: rgb(14 116 144 / 96%);
}

.workbench-project__card-status--amber {
  background-color: rgb(254 243 199 / 96%);
  color: rgb(180 83 9 / 96%);
}

.workbench-project__card-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background-color: rgb(241 245 249 / 80%);
}

.workbench-project__card-role-label {
  color: rgb(100 116 139 / 92%);
  font-size: 12px;
}

.workbench-project__card-role-value {
  color: rgb(15 23 42 / 98%);
  font-size: 13px;
  font-weight: 600;
}

.workbench-project__progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workbench-project__progress-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.workbench-project__progress-label {
  color: rgb(100 116 139 / 92%);
  font-size: 12px;
}

.workbench-project__progress-value {
  color: rgb(15 23 42 / 98%);
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.workbench-project__progress-bar {
  height: 6px;
  border-radius: 999px;
  background-color: rgb(226 232 240 / 88%);
  overflow: hidden;
}

.workbench-project__progress-bar-inner {
  height: 100%;
  border-radius: 999px;
  transition: width 240ms ease;
}

.workbench-project__progress-bar-inner--emerald {
  background: linear-gradient(90deg, rgb(5 150 105 / 92%), rgb(16 185 129 / 86%));
}

.workbench-project__progress-bar-inner--sky {
  background: linear-gradient(90deg, rgb(14 116 144 / 92%), rgb(14 165 233 / 86%));
}

.workbench-project__progress-bar-inner--amber {
  background: linear-gradient(90deg, rgb(217 119 6 / 92%), rgb(245 158 11 / 86%));
}

.workbench-project__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.workbench-project__footer-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workbench-project__footer-label {
  color: rgb(100 116 139 / 92%);
  font-size: 12px;
}

.workbench-project__footer-value {
  color: rgb(15 23 42 / 98%);
  font-size: 14px;
  font-weight: 600;
}

.workbench-project__footer-sub {
  color: rgb(190 18 60 / 94%);
  font-size: 12px;
  font-weight: 600;
}

/* ===== 我负责的：单对象深度详情样式 ===== */
.ps-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.ps-pin-label {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
.ps-pin {
  width: 220px;
}
.ps-head--single .ps-single-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--el-text-color-primary);
}
.ps-overview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}
.ps-ring {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(
    var(--el-color-success) 0 calc(var(--p) * 1%),
    var(--el-fill-color) calc(var(--p) * 1%) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ps-ring span {
  background: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.ps-kpis {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
}
.ps-kpi b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--el-text-color-primary);
}
.ps-kpi b.is-danger {
  color: var(--el-color-danger);
}
.ps-kpi span {
  font-size: 11px;
  color: var(--el-text-color-secondary);
}
.ps-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  text-align: center;
}
.ps-section-title {
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--el-text-color-secondary);
}
.ps-members {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ps-members li {
  display: grid;
  grid-template-columns: 60px 1fr 30px;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}
.ps-member-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--el-text-color-primary);
}
.ps-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--el-fill-color);
  overflow: hidden;
}
.ps-bar-inner {
  height: 100%;
  transition: width 240ms ease;
}
.ps-bar-inner.is-ok {
  background: var(--el-color-success);
}
.ps-bar-inner.is-warn {
  background: var(--el-color-warning);
}
.ps-bar-inner.is-over {
  background: var(--el-color-danger);
}
.ps-member-tasks {
  text-align: right;
  color: var(--el-text-color-secondary);
  font-size: 11px;
}
</style>
