<template>
  <view class="page">
    <view class="header-card">
      <view class="header-top">
        <view>
          <view class="page-title">日报汇总</view>
          <view class="page-subtitle">多维度查看与管理日报</view>
        </view>
      </view>
      <view class="search-row">
        <uni-easyinput
          v-model="orderName"
          prefix-icon="search"
          :styles="inputStyles"
          :placeholder-style="placeholderStyle"
          placeholder="搜索日报名称、项目或任务"
          @confirm="searchList" />
        <button
          class="search-btn"
          type="primary"
          size="mini"
          @click="searchList"
          >搜索</button
        >
      </view>
    </view>

    <view class="view-switch">
      <uv-subsection
        :list="viewOptions"
        :current="currentView"
        mode="button"
        active-color="#356fea"
        inactive-color="#66758c"
        bg-color="#e8edf5"
        :font-size="14"
        @change="handleViewChange" />
    </view>

    <view v-if="currentView === 0 && pageLoading" class="page-loading">
      <uni-load-more status="loading" :content-text="loadingText" />
    </view>

    <view v-if="currentView === 0 && !pageLoading" class="archive-list">
      <view v-for="year in visibleYears" :key="year.id" class="tree-item">
        <view class="level-title year-title" @click="toggleYear(year)">
          <view class="year-icon"
            ><uni-icons type="calendar" size="20" color="#ffffff"
          /></view>
          <view class="level-main">
            <text class="level-name">{{ year.label }}</text>
            <text class="level-desc">{{ year.reportCount }} 份日报</text>
          </view>
          <view class="count-pill">{{ year.monthCount }}个月</view>
          <view class="arrow-box" :class="{ opened: year.open }"
            ><uni-icons type="down" size="15" color="#9aa6b6"
          /></view>
        </view>

        <view v-if="year.open" class="year-content">
          <uni-load-more
            v-if="year.loading"
            status="loading"
            :content-text="monthLoadingText" />
          <view v-else class="month-list">
            <view
              v-for="month in year.months"
              :key="month.id"
              class="tree-item">
              <view
                class="level-title month-title"
                @click="toggleMonth(year, month)">
                <view class="month-dot"></view>
                <view class="level-main">
                  <text class="level-name">{{ month.label }}</text>
                  <text class="level-desc">共 {{ month.reportCount }} 份</text>
                </view>
                <text class="date-count">{{ month.dayCount }}天</text>
                <view class="arrow-box" :class="{ opened: month.open }"
                  ><uni-icons type="down" size="14" color="#9aa6b6"
                /></view>
              </view>

              <view v-if="month.open" class="month-content">
                <uni-load-more
                  v-if="month.loading"
                  status="loading"
                  :content-text="dayLoadingText" />
                <view v-else class="day-list">
                  <view
                    v-for="day in month.days"
                    :key="day.id"
                    class="tree-item">
                    <view
                      class="level-title day-title"
                      @click="toggleDay(year, month, day)">
                      <view class="day-number">
                        <text class="day-num">{{ day.day }}</text>
                        <text class="day-week">{{ day.week }}</text>
                      </view>
                      <view class="level-main">
                        <text class="day-report-name">{{ day.title }}</text>
                        <text class="level-desc">{{ day.reportCount }}份日报</text>
                      </view>
                      <view class="arrow-box" :class="{ opened: day.open }"
                        ><uni-icons type="down" size="14" color="#9aa6b6"
                      /></view>
                    </view>

                    <view v-if="day.open" class="day-content">
                      <uni-load-more
                        v-if="day.loading"
                        status="loading"
                        :content-text="reportLoadingText" />
                      <view
                        v-else-if="day.reports && day.reports.length"
                        class="report-list">
                        <view
                          v-for="item in day.reports"
                          :key="item.id"
                          class="report-card">
                          <view class="simple-card-content">
                            <text class="card-title">{{ item.reportName }}</text>
                          </view>
                          <view class="card-actions">
                            <button
                              class="action-btn view-btn"
                              size="mini"
                              @click.stop="navigatorDetail(item)"
                              >查看详情</button
                            >
                          </view>
                        </view>
                      </view>
                      <view v-else class="empty-text">当日暂无日报</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="currentView === 1 && teamLoading" class="page-loading">
      <uni-load-more status="loading" :content-text="teamLoadingText" />
    </view>

    <view
      v-if="currentView === 1 && !teamLoading"
      class="archive-list team-archive">
      <view v-for="team in teams" :key="team.id" class="tree-item">
        <view class="level-title team-title" @click="toggleTeam(team)">
          <view class="team-icon"
            ><uni-icons type="staff-filled" size="20" color="#ffffff"
          /></view>
          <view class="level-main">
            <text class="level-name">{{ team.name }}</text>
            <text class="level-desc">{{ team.reportCount }} 份日报</text>
          </view>
          <view class="count-pill">{{ team.wellCount }}口井</view>
          <view class="arrow-box" :class="{ opened: team.open }"
            ><uni-icons type="down" size="15" color="#9aa6b6"
          /></view>
        </view>

        <view v-if="team.open" class="team-content">
          <uni-load-more
            v-if="team.loading"
            status="loading"
            :content-text="wellLoadingText" />
          <view v-else>
            <view v-for="well in team.wells" :key="well.id" class="tree-item">
              <view
                class="level-title well-title"
                @click="toggleWell(well)">
                <view class="well-icon"
                  ><uni-icons type="location-filled" size="17" color="#356fea"
                /></view>
                <view class="level-main">
                  <text class="well-name">{{ well.name }}</text>
                  <text class="level-desc">共 {{ well.reportCount }} 份日报</text>
                </view>
                <text class="date-count">{{ well.reportCount }}份</text>
                <view class="arrow-box" :class="{ opened: well.open }"
                  ><uni-icons type="down" size="14" color="#9aa6b6"
                /></view>
              </view>

              <view v-if="well.open" class="well-content">
                <uni-load-more
                  v-if="well.loading"
                  status="loading"
                  :content-text="reportLoadingText" />
                <view v-else class="report-list">
                  <view
                    v-for="item in well.reports"
                    :key="item.id"
                    class="report-card">
                    <view class="simple-card-content">
                      <text class="card-title">{{ item.reportName }}</text>
                    </view>
                    <view class="card-actions">
                      <button
                        class="action-btn view-btn"
                        size="mini"
                        @click.stop="navigatorDetail(item)"
                        >查看详情</button
                      >
                    </view>
                  </view>
                  <view
                    v-if="well.reports && !well.reports.length"
                    class="empty-text"
                    >该井号暂无日报</view
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view
      v-if="currentView === 0 && !pageLoading && !visibleYears.length"
      class="empty-page">
      <uni-icons type="folder-add" size="42" color="#b7c1d1" />
      <text>暂无日报数据</text>
    </view>

    <view
      v-if="currentView === 1 && !teamLoading && !teams.length"
      class="empty-page">
      <uni-icons type="folder-add" size="42" color="#b7c1d1" />
      <text>暂无队伍日报数据</text>
    </view>

    <UniFab
      :pattern="fabPattern"
      horizontal="right"
      vertical="bottom"
      direction="horizontal"
      :popMenu="false"
      @fabClick="openFilterPopup" />

    <uni-popup
      ref="filterPopup"
      type="bottom"
      background-color="#fff"
      border-radius="10px 10px 0 0">
      <view class="filter-popup">
        <view class="filter-header">
          <text class="filter-action" @click="closeFilterPopup">{{ $t("operation.cancel") }}</text>
          <text class="filter-title">{{ $t("ruiDuReport.filterTitle") }}</text>
          <text class="filter-action primary" @click="applyFilter">{{ $t("operation.confirm") }}</text>
        </view>

        <view class="filter-body">
          <view class="filter-item">
            <view class="filter-label">{{ $t("ruiDuReport.project") }}</view>
            <uni-easyinput v-model="filterForm.contractName" :input-border="false" :styles="inputStyles" :placeholder="$t('ruiDuReport.projectPlaceholder')" />
          </view>
          <view class="filter-item">
            <view class="filter-label">{{ $t("ruiDuReport.task") }}</view>
            <uni-easyinput v-model="filterForm.taskName" :input-border="false" :styles="inputStyles" :placeholder="$t('ruiDuReport.taskPlaceholder')" />
          </view>
          <view class="filter-item">
            <view class="filter-label">{{ $t("ruiDuReport.createTime") }}</view>
            <uni-datetime-picker v-model="filterForm.createTime" type="datetimerange" return-type="string" :border="false" :placeholder="$t('operation.PleaseSelect')" />
          </view>
          <view class="filter-item dept-item">
            <view class="filter-label">{{ $t("ruiDuReport.dept") }}</view>
            <view class="dept-selected">{{ selectedDeptName || $t("operation.PleaseSelect") }}</view>
            <view class="tree">
              <DaTree
                :data="treeData"
                label-field="name"
                value-field="id"
                disabled-field="disabled"
                default-expand-all
                checked-disabled
                :default-checked-keys="filterForm.deptId"
                @change="handleTreeChange" />
            </view>
          </view>
        </view>

        <view class="filter-footer">
          <button class="filter-button reset" @click="resetFilter">{{ $t("inventory.search.reset") }}</button>
          <button class="filter-button" type="primary" @click="applyFilter">{{ $t("operation.search") }}</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { computed, onMounted, onUnmounted, reactive, ref } from "vue";
import DaTree from "@/components/da-tree/index.vue";
import UniFab from "@/uni_modules/uni-fab/components/uni-fab/uni-fab.vue";
import {
  getRuiduReportSummary,
  getRuiduReportTeamSummary,
} from "@/api/ruiduReport";
import { specifiedSimpleDepts } from "@/api";
import { getDeptId } from "@/utils/auth";

const orderName = ref("");
const searchKey = ref("");
const pageLoading = ref(true);
const currentView = ref(0);
const teams = ref([]);
const teamLoading = ref(false);
const years = ref([]);
const timers = [];
const filterPopup = ref(null);
const deptOptions = ref([]);
const treeData = ref([]);
const currentYear = new Date().getFullYear();
const getCurrentYearRange = () => [
  `${currentYear}-01-01 00:00:00`,
  `${currentYear}-12-31 23:59:59`,
];

const fabPattern = reactive({
  color: "#fff",
  backgroundColor: "#fff",
  selectedColor: "#fff",
  buttonColor: "#004098",
  iconColor: "#fff",
  icon: "search",
});

const filterForm = reactive({
  contractName: "",
  taskName: "",
  deptId: "",
  createTime: getCurrentYearRange(),
});

const viewOptions = ["按日期", "按队伍"];

const selectedDeptName = computed(() => {
  const current = deptOptions.value.find(
    (item) => String(item.value) === String(filterForm.deptId)
  );
  return current?.text || "";
});

const buildDeptTree = (data) => {
  if (!Array.isArray(data)) return [];
  const nodeMap = new Map(data.map((item) => [String(item.id), { ...item, children: [] }]));
  const roots = [];
  nodeMap.forEach((node) => {
    const parent = nodeMap.get(String(node.parentId));
    if (parent) parent.children.push(node);
    else roots.push(node);
  });
  const sortNodes = (nodes) =>
    nodes
      .sort((a, b) => (a.sort ?? 999999) - (b.sort ?? 999999))
      .map((node) => ({ ...node, children: sortNodes(node.children || []) }));
  return sortNodes(roots);
};

const placeholderStyle = "color:#9aa4b2;font-size:14px";
const inputStyles = reactive({ backgroundColor: "#f6f8fb", color: "#263244" });
const loadingText = {
  contentdown: "",
  contentrefresh: "正在加载归档数据...",
  contentnomore: "",
};
const monthLoadingText = {
  contentdown: "",
  contentrefresh: "正在加载月份...",
  contentnomore: "",
};
const dayLoadingText = {
  contentdown: "",
  contentrefresh: "正在加载日期...",
  contentnomore: "",
};
const reportLoadingText = {
  contentdown: "",
  contentrefresh: "正在加载日报详情...",
  contentnomore: "",
};
const teamLoadingText = {
  contentdown: "",
  contentrefresh: "正在加载队伍...",
  contentnomore: "",
};
const wellLoadingText = {
  contentdown: "",
  contentrefresh: "正在加载井号...",
  contentnomore: "",
};

const mockRequest = (data, delay = 650) =>
  new Promise((resolve) => {
    const timer = setTimeout(() => resolve(data), delay);
    timers.push(timer);
  });

const createYearList = () => [
  {
    id: "2026",
    label: "2026年",
    monthCount: 7,
    reportCount: 86,
    open: false,
    loading: false,
    months: null,
  },
  {
    id: "2025",
    label: "2025年",
    monthCount: 12,
    reportCount: 214,
    open: false,
    loading: false,
    months: null,
  },
  {
    id: "2024",
    label: "2024年",
    monthCount: 9,
    reportCount: 168,
    open: false,
    loading: false,
    months: null,
  },
];

const createMonths = (year) => {
  const sources = {
    2026: [
      ["07", 11, 18],
      ["06", 14, 16],
      ["05", 12, 14],
      ["04", 10, 12],
      ["03", 9, 10],
      ["02", 8, 9],
      ["01", 7, 7],
    ],
    2025: [
      ["12", 18, 20],
      ["11", 17, 19],
      ["10", 16, 18],
      ["09", 16, 18],
      ["08", 15, 18],
      ["07", 15, 18],
      ["06", 15, 18],
      ["05", 14, 17],
      ["04", 14, 17],
      ["03", 14, 17],
      ["02", 14, 17],
      ["01", 14, 17],
    ],
    2024: [
      ["12", 20, 24],
      ["11", 18, 21],
      ["10", 17, 20],
      ["09", 16, 19],
      ["08", 15, 18],
      ["07", 14, 17],
      ["06", 14, 17],
      ["05", 13, 16],
      ["04", 13, 16],
    ],
  };
  const source = sources[year] || [];
  return source.map(([month, dayCount, reportCount]) => ({
    id: `${year}-${month}`,
    month,
    label: `${Number(month)}月`,
    dayCount,
    reportCount,
    open: false,
    loading: false,
    days: null,
  }));
};

const createDays = (year, monthInfo) => {
  const month = monthInfo.month;
  const lastDay =
    year === "2026" && month === "07"
      ? 11
      : new Date(Number(year), Number(month), 0).getDate();
  const weekNames = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
  const baseReports = Math.floor(monthInfo.reportCount / monthInfo.dayCount);
  const extraReports = monthInfo.reportCount % monthInfo.dayCount;

  return Array.from({ length: monthInfo.dayCount }, (_, index) => {
    const day = String(lastDay - index).padStart(2, "0");
    const reportCount = baseReports + (index < extraReports ? 1 : 0);
    const finished = index !== 2;
    return {
      id: `${year}-${month}-${day}`,
      day,
      week: weekNames[
        new Date(Number(year), Number(month) - 1, Number(day)).getDay()
      ],
      title: `瑞都项目${year}年${Number(month)}月${Number(day)}日生产日报`,
      summary: `${reportCount}份日报 · ${finished ? "已全部填写" : "1份待填写"}`,
      reportCount,
      finished,
      open: false,
      loading: false,
      reports: null,
    };
  });
};

const createReports = (year, month, dayInfo) => {
  const day = dayInfo.day;
  const date = `${year}-${month}-${day}`;
  const reports = [
    {
      id: `${date}-01`,
      reportName: `掘进一队 ${year}年${Number(month)}月${Number(day)}日 日报详情`,
      responsiblePersonNames: "张建国、李明",
      contractName: "瑞都矿井建设工程",
      taskName: "主斜井掘进及支护",
      createTime: `${date} 08:30`,
      auditStatus: 20,
      nonProductFlag: true,
      status: 1,
      projectId: "P001",
      taskId: "T001",
    },
    {
      id: `${date}-02`,
      reportName: `机电队 ${year}年${Number(month)}月${Number(day)}日 日报详情`,
      responsiblePersonNames: "王海涛",
      contractName: "瑞都矿井建设工程",
      taskName: "井下设备检修维护",
      createTime: `${date} 09:15`,
      auditStatus: day === "09" ? 0 : 10,
      nonProductFlag: day !== "09",
      status: day === "09" ? 0 : 1,
      projectId: "P001",
      taskId: "T002",
    },
  ];
  return reports.slice(0, dayInfo.reportCount);
};

const normalizeSummaryData = (data) =>
  (Array.isArray(data) ? data : [])
    .map((yearItem) => {
      const year = String(yearItem.year || "");
      const months = (Array.isArray(yearItem.months) ? yearItem.months : [])
        .map((monthItem) => {
          const month = String(monthItem.month || "").padStart(2, "0");
          const days = (Array.isArray(monthItem.days) ? monthItem.days : [])
            .map((dayItem) => {
              const day = String(dayItem.day || "").padStart(2, "0");
              const reportDate = `${year}-${month}-${day}`;
              const reports = (Array.isArray(dayItem.reports)
                ? dayItem.reports
                : []
              ).map((report) => ({
                ...report,
                reportName: report.reportName || `${reportDate} 日报详情`,
                responsiblePersonNames:
                  report.responsiblePersonNames || report.deptName || "--",
                contractName: report.contractName || "--",
                taskName: report.taskName || "--",
                createTime: report.createTime || reportDate,
                auditStatus: report.auditStatus ?? report.rdStatus ?? 0,
                nonProductFlag: Boolean(report.nonProductFlag),
                status: report.status ?? 1,
              }));
              const unfilledCount = Number(dayItem.unfilledCount || 0);
              const filledCount = Number(dayItem.filledCount || 0);
              return {
                ...dayItem,
                id: `${year}-${month}-${day}`,
                day,
                week: dayItem.weekDay || "",
                title: `${year}年${Number(month)}月${Number(day)}日 日报`,
                summary: `${Number(dayItem.reportCount || reports.length)}份日报 · ${
                  unfilledCount > 0
                    ? `${unfilledCount}份待填写`
                    : `${filledCount}份已填写`
                }`,
                finished: unfilledCount === 0,
                reportCount: Number(dayItem.reportCount || reports.length),
                open: false,
                loading: false,
                reports,
              };
            })
            .sort((a, b) => Number(b.day) - Number(a.day));
          return {
            ...monthItem,
            id: `${year}-${month}`,
            month,
            label: `${Number(month)}月`,
            dayCount: Number(monthItem.dayCount || days.length),
            reportCount: Number(monthItem.reportCount || 0),
            open: false,
            loading: false,
            days,
          };
        })
        .sort((a, b) => Number(b.month) - Number(a.month));
      return {
        ...yearItem,
        id: year,
        label: `${year}年`,
        monthCount: Number(yearItem.monthCount || months.length),
        reportCount: Number(yearItem.reportCount || 0),
        open: false,
        loading: false,
        months,
      };
    })
    .sort((a, b) => Number(b.id) - Number(a.id));

const normalizeTeamSummaryData = (data) =>
  (Array.isArray(data) ? data : []).map((teamItem, teamIndex) => {
    const teamName = teamItem.teamName || "未分配队伍";
    const wells = (Array.isArray(teamItem.wells) ? teamItem.wells : []).map(
      (wellItem, wellIndex) => ({
        ...wellItem,
        id:
          wellItem.taskId ||
          `${teamName}-${wellItem.wellName || wellIndex}`,
        name: wellItem.wellName || "未命名井号",
        reportCount: Number(wellItem.reportCount || 0),
        filledCount: Number(wellItem.filledCount || 0),
        unfilledCount: Number(wellItem.unfilledCount || 0),
        open: false,
        loading: false,
        reports: (Array.isArray(wellItem.reports)
          ? wellItem.reports
          : []
        ).map((report) => ({
          ...report,
          reportName: report.reportName || "未命名日报",
        })),
      })
    );
    return {
      ...teamItem,
      id: `${teamName}-${teamIndex}`,
      name: teamName,
      wellCount: Number(teamItem.wellCount || wells.length),
      reportCount: Number(teamItem.reportCount || 0),
      open: false,
      loading: false,
      wells,
    };
  });

const visibleYears = computed(() => years.value);

const toggleYear = async (year) => {
  year.open = !year.open;
  if (year.open && !year.months && !year.loading) {
    year.loading = true;
    year.months = await mockRequest(createMonths(year.id));
    year.loading = false;
  }
};

const toggleMonth = async (year, month) => {
  month.open = !month.open;
  if (month.open && !month.days && !month.loading) {
    month.loading = true;
    month.days = await mockRequest(createDays(year.id, month));
    month.loading = false;
  }
};

const toggleDay = async (year, month, day) => {
  day.open = !day.open;
  if (day.open && !day.reports && !day.loading) {
    day.loading = true;
    day.reports = await mockRequest(
      createReports(year.id, month.month, day),
      750
    );
    day.loading = false;
  }
};

const handleViewChange = (index) => {
  currentView.value = index;
};

const toggleTeam = (team) => {
  team.open = !team.open;
};

const toggleWell = (well) => {
  well.open = !well.open;
};

const searchList = async () => {
  searchKey.value = orderName.value.trim();
  const params = {
    createTime: getCurrentYearRange(),
    searchKey: searchKey.value || undefined,
  };
  await Promise.all([
    queryReportSummary(params),
    queryReportTeamSummary(params),
  ]);
};

const navigatorDetail = (item) => {
  const url =
    item.projectId === null && item.taskId === null
      ? `/pages/ruiDu/create?id=${item.id}&isview=detail`
      : `/pages/ruiDu/detail?id=${item.id}`;
  uni.navigateTo({ url });
};
const navigatorEdit = (item) => {
  const url =
    item.projectId === null && item.taskId === null
      ? `/pages/ruiDu/create?id=${item.id}&isview=detail`
      : `/pages/ruiDu/edit?id=${item.id}&istime=false`;
  uni.navigateTo({ url });
};

const loadDeptOptions = async () => {
  try {
    const response = await specifiedSimpleDepts(getDeptId());
    const list = response?.data || [];
    deptOptions.value = list.map((item) => ({ text: item.name, value: item.id }));
    treeData.value = buildDeptTree(list);
  } catch (error) {
    deptOptions.value = [];
    treeData.value = [];
  }
};

const openFilterPopup = () => filterPopup.value?.open();
const closeFilterPopup = () => filterPopup.value?.close();

const handleTreeChange = (value) => {
  filterForm.deptId = value;
};

const resetFilter = () => {
  filterForm.contractName = "";
  filterForm.taskName = "";
  filterForm.deptId = "";
  filterForm.createTime = getCurrentYearRange();
};

const applyFilter = async () => {
  orderName.value = "";
  searchKey.value = "";
  closeFilterPopup();
  const params = {
    contractName: filterForm.contractName || undefined,
    taskName: filterForm.taskName || undefined,
    deptId: filterForm.deptId || undefined,
    createTime: filterForm.createTime?.length
      ? filterForm.createTime
      : getCurrentYearRange(),
  };
  await Promise.all([
    queryReportSummary(params),
    queryReportTeamSummary(params),
  ]);
};

async function queryReportSummary(params = {}) {
  pageLoading.value = true;
  try {
    const response = await getRuiduReportSummary(params);
    years.value =
      response?.code === 0 ? normalizeSummaryData(response.data) : [];
    console.log("[reportSummary] 返回结果:", response);
  } finally {
    pageLoading.value = false;
  }
};

const queryReportTeamSummary = async (params) => {
  teamLoading.value = true;
  try {
    const response = await getRuiduReportTeamSummary(params);
    teams.value =
      response?.code === 0 ? normalizeTeamSummaryData(response.data) : [];
    console.log("[reportTeamSummary] 返回结果:", response);
  } finally {
    teamLoading.value = false;
  }
};

queryReportSummary({ createTime: getCurrentYearRange() });
queryReportTeamSummary();
onMounted(loadDeptOptions);
onUnmounted(() => timers.forEach((timer) => clearTimeout(timer)));
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 24rpx;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  background: #f3f6fa;
  color: #263244;
}
.header-card {
  margin-bottom: 16rpx;
  padding: 28rpx 24rpx 24rpx;
  border-radius: 22rpx;
  background: linear-gradient(135deg, #ffffff 0%, #f6f9ff 100%);
  box-shadow: 0 8rpx 30rpx rgba(41, 72, 126, 0.08);
}
.view-switch {
  margin-bottom: 18rpx;
  padding: 0 2rpx;
}
.view-switch :deep(.uv-subsection--button) {
  height: 64rpx;
  padding: 6rpx;
  border-radius: 14rpx;
}
.view-switch :deep(.uv-subsection--button__bar) {
  border-radius: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(53, 111, 234, 0.12);
}
.header-top,
.search-row,
.level-title,
.card-head,
.card-actions {
  display: flex;
  align-items: center;
}
.header-top {
  justify-content: space-between;
  margin-bottom: 26rpx;
}
.page-title {
  font-size: 38rpx;
  line-height: 1.4;
  font-weight: 700;
  color: #17233d;
}
.page-subtitle {
  margin-top: 4rpx;
  font-size: 24rpx;
  color: #8a96a8;
}
.search-row {
  gap: 16rpx;
}
.search-btn {
  flex: 0 0 auto;
  margin: 0;
  border-radius: 12rpx;
  background: #356fea;
}
.archive-list {
  border-radius: 22rpx;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10rpx 34rpx rgba(31, 54, 91, 0.07);
}
.tree-item {
  width: 100%;
  box-sizing: border-box;
}
.arrow-box {
  flex: 0 0 auto;
  margin: 0 20rpx 0 10rpx;
  line-height: 1;
  transition: transform 0.18s ease;
}
.arrow-box.opened {
  transform: rotate(180deg);
}
.level-title {
  width: 100%;
  box-sizing: border-box;
}
.year-title {
  min-height: 124rpx;
  padding: 22rpx 12rpx 22rpx 26rpx;
  border-bottom: 1rpx solid #edf1f6;
}
.team-title {
  min-height: 124rpx;
  padding: 22rpx 12rpx 22rpx 26rpx;
  border-bottom: 1rpx solid #edf1f6;
}
.team-icon {
  width: 68rpx;
  height: 68rpx;
  margin-right: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18rpx;
  background: linear-gradient(145deg, #35b48a, #198a69);
  box-shadow: 0 8rpx 20rpx rgba(31, 157, 116, 0.22);
}
.team-content {
  padding: 0 20rpx 18rpx 38rpx;
  background: #f7fbfa;
}
.well-title {
  min-height: 104rpx;
  padding: 16rpx 8rpx 16rpx 8rpx;
  border-bottom: 1rpx solid #e7eeeb;
}
.well-icon {
  width: 54rpx;
  height: 54rpx;
  margin-right: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14rpx;
  background: #eaf1ff;
}
.well-name {
  font-size: 27rpx;
  font-weight: 600;
  color: #303b50;
}
.well-content {
  padding: 18rpx 8rpx 22rpx 8rpx;
  background: #f7fbfa;
}
.year-icon {
  width: 68rpx;
  height: 68rpx;
  margin-right: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18rpx;
  background: linear-gradient(145deg, #4c83f1, #2e64d3);
  box-shadow: 0 8rpx 20rpx rgba(53, 111, 234, 0.24);
}
.level-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.level-name {
  font-size: 32rpx;
  font-weight: 700;
  color: #202c42;
}
.level-desc {
  margin-top: 8rpx;
  font-size: 23rpx;
  color: #8a96a8;
}
.count-pill {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  background: #edf3ff;
  color: #356fea;
  font-size: 22rpx;
}
.year-content {
  padding: 0 20rpx 18rpx 38rpx;
  background: #f8faff;
}
.month-title {
  min-height: 100rpx;
  padding: 16rpx 8rpx 16rpx 14rpx;
  border-bottom: 1rpx solid #e9eef5;
}
.month-dot {
  width: 16rpx;
  height: 16rpx;
  margin-right: 22rpx;
  border: 6rpx solid #dce8ff;
  border-radius: 50%;
  background: #4d7fe5;
}
.month-title .level-name {
  font-size: 28rpx;
}
.date-count {
  padding: 6rpx 14rpx;
  color: #718096;
  font-size: 22rpx;
}
.month-content {
  margin-left: 16rpx;
  padding-left: 20rpx;
  border-left: 2rpx solid #dbe5f5;
}
.day-title {
  min-height: 116rpx;
  padding: 18rpx 8rpx 18rpx 4rpx;
  border-bottom: 1rpx solid #edf0f5;
}
.day-number {
  width: 76rpx;
  height: 76rpx;
  margin-right: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  background: #fff;
  box-shadow: 0 5rpx 18rpx rgba(38, 61, 99, 0.08);
}
.day-num {
  font-size: 29rpx;
  line-height: 34rpx;
  font-weight: 700;
  color: #315fae;
}
.day-week {
  font-size: 19rpx;
  color: #96a0ae;
}
.day-report-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 25rpx;
  font-weight: 600;
  color: #303b50;
}
.day-content {
  padding: 18rpx 8rpx 20rpx 0;
}
.report-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.report-card {
  padding: 24rpx;
  border: 1rpx solid #e6ebf3;
  border-radius: 18rpx;
  background: #fff;
  box-shadow: 0 7rpx 22rpx rgba(32, 54, 88, 0.06);
}
.card-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: 16rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #edf0f4;
}
.card-heading {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-title {
  font-size: 27rpx;
  line-height: 1.5;
  font-weight: 700;
  color: #243047;
}
.simple-card-content {
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #edf0f4;
}
.card-time {
  margin-top: 7rpx;
  font-size: 21rpx;
  color: #9aa4b2;
}
.status-tag {
  flex: 0 0 auto;
  padding: 7rpx 13rpx;
  border-radius: 18rpx;
  font-size: 20rpx;
}
.status-gray {
  color: #778292;
  background: #eef1f4;
}
.status-blue {
  color: #356fea;
  background: #eaf1ff;
}
.status-green {
  color: #179863;
  background: #e5f7ef;
}
.status-red {
  color: #d74b4b;
  background: #ffeded;
}
.card-body {
  padding: 18rpx 0 8rpx;
}
.info-row {
  display: flex;
  padding: 8rpx 0;
  font-size: 24rpx;
  line-height: 1.55;
}
.info-label {
  flex: 0 0 142rpx;
  color: #8a96a8;
}
.info-value {
  flex: 1;
  color: #354055;
}
.success-text {
  color: #179863;
}
.danger-text {
  color: #d74b4b;
}
.card-actions {
  justify-content: flex-end;
  gap: 16rpx;
  margin-top: 12rpx;
}
.action-btn {
  min-width: 150rpx;
  margin: 0;
  border-radius: 28rpx;
  font-size: 23rpx;
}
.view-btn {
  color: #356fea;
  border: 1rpx solid #adc5f5;
  background: #fff;
}
.fill-btn {
  background: #356fea;
}
.page-loading {
  padding: 100rpx 0;
}
.empty-text,
.empty-page {
  color: #9aa4b2;
  font-size: 24rpx;
  text-align: center;
}
.empty-text {
  padding: 36rpx 0;
}
.empty-page {
  padding: 120rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}
.filter-popup {
  height: 86vh;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
}
.filter-header {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
  box-sizing: border-box;
}
.filter-title {
  color: #333;
  font-size: 16px;
  font-weight: 600;
}
.filter-action {
  min-width: 48px;
  color: #666;
  font-size: 14px;
}
.filter-action.primary {
  color: #004098;
  text-align: right;
}
.filter-body {
  flex: 1;
  padding: 12px 16px;
  box-sizing: border-box;
  overflow-y: auto;
}
.filter-item {
  margin-bottom: 14px;
}
.filter-label {
  margin-bottom: 8px;
  color: #333;
  font-size: 14px;
  font-weight: 500;
}
.dept-selected {
  min-height: 36px;
  margin-bottom: 8px;
  padding: 0 10px;
  border-radius: 4px;
  background: #f7f8fa;
  color: #666;
  line-height: 36px;
  box-sizing: border-box;
}
.tree {
  height: 420px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}
.filter-footer {
  display: flex;
  gap: 10px;
  padding: 10px 16px 14px;
  border-top: 1px solid #f0f0f0;
  box-sizing: border-box;
}
.filter-button {
  flex: 1;
  height: 38px;
  margin: 0;
  font-size: 14px;
  line-height: 38px;
}
.filter-button.reset {
  border: 1px solid #004098;
  background: #fff;
  color: #004098;
}
</style>
