<template>
  <div class="performance-score">
    <!-- 顶部周期切换 -->
    <div class="period-bar">
      <div class="period-tabs">
        <el-button v-for="t in periodTabs" :key="t.value"
          :class="['period-tab', { active: period === t.value && !isCustom }]" plain @click="onPickPeriod(t.value)">
          {{ t.label }}
        </el-button>
        <el-button :class="['period-tab', { active: isCustom }]" plain @click="onPickCustom">自定义</el-button>
      </div>
      <div v-if="isCustom" class="custom-range">
        <el-date-picker v-model="customRange" type="daterange" range-separator="-" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="YYYY-MM-DD" style="width: 240px" />
        <el-button type="primary" class="search-btn" plain @click="onSearch">查询</el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stat-grid">
      <div class="stat-card">
        <img src="@/assets/image/admin/score/total.svg" class="stat-icon">
        <div class="stat-body">
          <div class="stat-label">本期总积分</div>
          <div class="stat-value">{{ stats.totalPoints || 0 }}</div>
        </div>
      </div>
      <div class="stat-card">
        <img src="@/assets/image/admin/score/manager-count.svg" class="stat-icon">
        <div class="stat-body">
          <div class="stat-label">客户经理人数</div>
          <div class="stat-value">{{ stats.managerCount || 0 }}</div>
        </div>
      </div>
      <div class="stat-card">
        <img src="@/assets/image/admin/score/success-count.svg" class="stat-icon">
        <div class="stat-body">
          <div class="stat-label">本期完成工单</div>
          <div class="stat-value">{{ stats.completedOrders || 0 }}</div>
        </div>
      </div>
      <div class="stat-card">
        <img src="@/assets/image/admin/score/success-ratio.svg" class="stat-icon">
        <div class="stat-body">
          <div class="stat-label">本期完成率</div>
          <div class="stat-value">{{ stats.completionRate || 0 }}%</div>
        </div>
      </div>
    </div>

    <!-- 双栏：排行榜 + 规则 -->
    <div class="content-grid">
      <div class="leaderboard-card jifen-card">
        <div class="border-title">
          积分排行榜
        </div>
        <div v-loading="leaderboardLoading" class="leaderboard">
          <el-empty v-if="!leaderboardLoading && leaderboard.length === 0" description="暂无排行数据" :image-size="80" />
          <div v-for="(item, idx) in leaderboard" :key="item.managerId" class="lb-row">
            <div class="lb-rank" :class="rankClass(item.rank || idx + 1)">
              {{ item.rank || idx + 1 }}
            </div>
            <div class="lb-info">
              <div class="lb-name">{{ item.managerName || "—" }}</div>
              <div class="lb-meta">
                负责 <span class="num">{{ item.hospitalCount || 0 }}</span> 家医院
                <span class="sep">|</span>
                本期完成 <span class="num">{{ item.completedOrders || 0 }}</span> 单
              </div>
            </div>
            <div class="lb-points">{{ item.points || 0 }}</div>
          </div>
        </div>
      </div>

      <div class="rules-card jifen-card">
        <div class="border-title">
          积分规则
        </div>
        <div v-loading="rulesLoading" class="rules">
          <div v-for="(r, idx) in rules" :key="r.event" class="rule-row">
            <div class="rule-left">
              <img class="rule-icon" :src="ruleIcon(r.event)" alt="">
              <span class="rule-event">{{ r.event }}</span>
            </div>
            <div class="rule-points" :class="Number(r.points) >= 0 ? 'pos' : 'neg'">
              {{ Number(r.points) >= 0 ? "+" : "" }}{{ r.points }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 客户经理积分明细弹窗 -->
    <el-dialog v-model="detailsVisible" class="manager-details-dialog" top="6vh" width="900px"
      :close-on-click-modal="false" destroy-on-close @update:model-value="(v) => !v && (detailsVisible = false)"
      @open="onDetailsOpen">
      <div class="body-wrap">
        <div class="body-header">
          <span class="body-title">积分明细 - {{ currentManagerName }}</span>
          <img src="@/assets/image/close-btn.svg" alt="" class="close-btn" @click="detailsVisible = false" />
        </div>

        <el-table class="details-table" :data="detailsList" v-loading="detailsLoading" stripe>
          <el-table-column prop="createdAt" label="时间" width="170" />
          <el-table-column prop="source" label="来源" width="140" />
          <el-table-column label="积分变动" width="120">
            <template #default="{ row }">
              <span class="change-amount" :class="Number(row.changeAmount) >= 0 ? 'pos' : 'neg'">
                {{ Number(row.changeAmount) >= 0 ? "+" : "" }}{{ row.changeAmount }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="说明" min-width="200" show-overflow-tooltip />
        </el-table>

        <div class="admin-pagination">
          <el-pagination v-model:current-page="detailsPage" v-model:page-size="detailsPageSize"
            :page-sizes="[10, 20, 50]" :total="detailsTotal" layout="total, sizes, prev, pager, next, jumper"
            @size-change="loadDetails" @current-change="loadDetails" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Coin, User, Document, CircleCheck } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import serviceIcon from "@/assets/image/admin/score/service.svg";
import inspectorIcon from "@/assets/image/admin/score/inspector.svg";
import trainIcon from "@/assets/image/admin/score/train.svg";
import huifangIcon from "@/assets/image/admin/score/huifang.svg";
import complaintIcon from "@/assets/image/admin/score/complaint.svg";
import {
  getManagerPointsDetails,
  getManagerPointsLeaderboard,
  getManagerPointsRules,
  getManagerPointsStats,
} from "@/service/modular/admin";

const periodTabs = [
  { label: "本周", value: "week" },
  { label: "本月", value: "month" },
  { label: "本季", value: "quarter" },
  { label: "本年", value: "year" },
];

const period = ref("month"); // month | quarter | year | weekly
const isCustom = ref(false);
const customRange = ref([]);

const stats = ref({});
const leaderboard = ref([]);
const rules = ref([]);
const leaderboardLoading = ref(false);
const rulesLoading = ref(false);

const statsLoading = ref(false);

const rankClass = (rank) => {
  if (rank === 1) return "rank-1";
  if (rank === 2) return "rank-2";
  if (rank === 3) return "rank-3";
  return "rank-other";
};

const ruleIconMap = {
  '服务': "service",
  '巡检': "inspector",
  '表扬': "train",
  '回访': "huifang",
  '投诉': "complaint",
};
const iconUrls = {
  service: serviceIcon,
  inspector: inspectorIcon,
  train: trainIcon,
  huifang: huifangIcon,
  complaint: complaintIcon,
};
const ruleIcon = (event) => {
  for (const [keyword, name] of Object.entries(ruleIconMap)) {
    if (event?.includes(keyword)) {
      return iconUrls[name];
    }
  }
  return "";
};

const getStatsParams = () => {
  if (isCustom.value && customRange.value?.length === 2) {
    return { start: customRange.value[0], end: customRange.value[1] };
  }
  return { period: period.value };
};

const paramsMap = {
  week: 'weekly',
  month: 'monthly',
  quarter: 'quarterly',
  year: 'annual'
}

const getLeaderboardParams = () => {
  if (isCustom.value && customRange.value?.length === 2) {
    return { start: customRange.value[0], end: customRange.value[1] };
  }
  return { period: paramsMap[period.value] };
};

const loadStats = async () => {
  statsLoading.value = true;
  try {
    stats.value = (await getManagerPointsStats(getStatsParams())) || {};
  } finally {
    statsLoading.value = false;
  }
};

const loadLeaderboard = async () => {
  leaderboardLoading.value = true;
  try {
    const res = await getManagerPointsLeaderboard(getLeaderboardParams());
    leaderboard.value = Array.isArray(res) ? res : res?.list || [];
  } finally {
    leaderboardLoading.value = false;
  }
};

const loadRules = async () => {
  rulesLoading.value = true;
  try {
    const res = await getManagerPointsRules();
    rules.value = Array.isArray(res) ? res : res?.list || [];
  } finally {
    rulesLoading.value = false;
  }
};

const onPickPeriod = (val) => {
  isCustom.value = false;
  customRange.value = [];
  period.value = val;
  onSearch();
};

const onPickCustom = () => {
  isCustom.value = true;
};

const onSearch = () => {
  loadStats();
  loadLeaderboard();
};

const onReset = () => {
  period.value = "month";
  isCustom.value = false;
  customRange.value = [];
  loadStats();
  loadLeaderboard();
};

// 客户经理积分明细
const detailsVisible = ref(false);
const detailsLoading = ref(false);
const detailsList = ref([]);
const detailsTotal = ref(0);
const detailsPage = ref(1);
const detailsPageSize = ref(10);
const currentManagerId = ref("");
const currentManagerName = ref("");

const loadDetails = async () => {
  if (!currentManagerId.value) return;
  detailsLoading.value = true;
  try {
    const res = await getManagerPointsDetails(currentManagerId.value, {
      page: detailsPage.value,
      pageSize: detailsPageSize.value,
    });
    detailsList.value = (res?.list || []).map((item) => ({
      ...item,
      createdAt: item.createdAt ? dayjs(item.createdAt).format("YYYY-MM-DD HH:mm:ss") : "—",
    }));
    detailsTotal.value = res?.total || detailsList.value.length;
  } finally {
    detailsLoading.value = false;
  }
};

const onPickManager = (item) => {
  currentManagerId.value = item.managerId;
  currentManagerName.value = item.managerName || "—";
  detailsPage.value = 1;
  detailsVisible.value = true;
};

const onDetailsOpen = () => {
  loadDetails();
};

onMounted(() => {
  loadStats();
  loadLeaderboard();
  loadRules();
});
</script>

<style lang="scss">
@use "@/assets/style/admin-common.scss" as *;

.performance-score {
  padding: 0;

  .period-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;

    .period-tabs {
      display: flex;
      gap: 10px;
    }

    .period-tab {
      background: #FFFFFF !important;
      border-radius: 8px 8px 8px 8px !important;
      border: 1px solid #E0E0E0 !important;
      font-weight: normal !important;
      font-size: 16px !important;
      color: #1D2129 !important;
      line-height: 22px !important;
      width: auto !important;
      height: auto !important;
      padding: 10px 24px !important;

      &:hover,
      &.active {
        background: #3289FB !important;
        border-color: #3289FB !important;
        color: #fff !important;
      }
    }

    .search-btn {
      font-size: 16px !important;
      color: #1D2129 !important;
      line-height: 22px !important;
      width: auto !important;
      height: auto !important;
      padding: 10px 24px !important;
      color: #3289FB !important;

      &:hover,
      &.active {
        background: #3289FB !important;
        border-color: #3289FB !important;
        color: #fff !important;
      }
    }



    .custom-range {
      display: flex;
      align-items: center;
      gap: 10px;

      .el-date-editor {
        background: #FFFFFF !important;
        border-radius: 8px 8px 8px 8px !important;
        border: 1px solid #E0E0E0 !important;
        overflow: hidden;
        height: 44px !important;
      }
    }
  }

  .stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;

    .stat-card {
      background: #FFFFFF;
      border-radius: 16px 16px 16px 16px;
      border: 1px solid #E0E0E0;
      padding: 18px 24px;
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .stat-icon {
      width: 48px;
      height: 48px;
      object-fit: contain;
    }

    .stat-body {
      .stat-label {
        font-weight: normal;
        font-size: 14px;
        color: #666666;
        line-height: 20px;
      }

      .stat-value {
        font-weight: bold;
        font-size: 24px;
        color: #1D2129;
        line-height: 32px;
      }
    }
  }

  .content-grid {
    display: flex;
    gap: 24px;

    .jifen-card {
      padding: 28px 24px 22px;
      background: #FFFFFF;
      border-radius: 16px 16px 16px 16px;
      border: 1px solid #E0E0E0;
    }

    .leaderboard-card {
      flex: 1;

      .border-title {
        margin-bottom: 26px;
      }
    }

    .rules-card {
      width: 560px;

      .border-title {
        margin-bottom: 16px;
      }
    }


    .leaderboard {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .lb-row {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 14px;
        justify-content: space-between;
        padding: 12px 16px;
        background: #F9FAFF;
        border-radius: 12px 12px 12px 12px;
        cursor: pointer;
        transition: all 0.2s;

        // &:hover {
        //   background: #f0f7ff;
        //   border-color: #c0d8ff;
        // }
      }

      .lb-rank {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 14px;
        color: #3289FB;

        flex-shrink: 0;

        &.rank-1 {
          background: linear-gradient(180deg, #B57000 0%, #EEC685 100%);
          color: #fff;
        }

        &.rank-2 {
          background: linear-gradient(180deg, #6F818E 0%, #BED8EA 100%);
          color: #fff;
        }

        &.rank-3 {
          background: linear-gradient(180deg, #AC6C55 0%, #C79888 100%);
          color: #fff;
        }

        &.rank-other {
          background: #EDF5FF;
          color: #606266;
        }
      }

      .lb-info {
        flex: 1;
        min-width: 0;

        .lb-name {
          font-weight: 600;
          font-size: 16px;
          color: #1D2129;
        }

        .lb-meta {
          font-weight: normal;
          font-size: 14px;
          color: #666666;

          .num {
            color: #3289FB;
          }

          .sep {
            margin: 0 4px;
          }
        }
      }

      .lb-points {
        flex-shrink: 0;
        font-weight: bold;
        font-size: 24px;
        color: #6F818E;
      }
    }

    .rules {
      display: flex;
      flex-direction: column;
      gap: 12px;

      .rule-row {
        width: 100%;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        background: #FFFFFF;
        border-radius: 16px 16px 16px 16px;
        border: 1px solid #E0E0E0;
      }

      .rule-left {
        display: flex;
        align-items: center;
        gap: 1px;

        .rule-icon {
          width: 16px;
          height: 16px;
        }

        .rule-event {
          font-weight: 400;
          font-size: 14px;
          color: #1D2129;
          line-height: 18px;
        }
      }



      .rule-points {
        font-weight: 400;
        font-size: 14px;

        &.pos {
          color: #34c759;
        }

        &.neg {
          color: #ff383c;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.manager-details-dialog {
  .body-wrap {
    padding: 4px 24px 16px;
  }

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

    .body-title {
      font-size: 16px;
      font-weight: 600;
      color: #1d2129;
    }

    .close-btn {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }

  .details-table {
    border-radius: 8px;
    overflow: hidden;
  }

  .change-amount {
    font-weight: 600;

    &.pos {
      color: #34c759;
    }

    &.neg {
      color: #ff383c;
    }
  }

  .admin-pagination {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
