<template>
  <!-- 手机端布局 -->
  <div v-if="isMobile" class="mobile-plan-list">
    <!-- 顶部操作栏 -->
    <div class="mobile-header">
      <div class="mobile-header__search">
        <el-input
          v-model="queryParams.planCode"
          placeholder="搜索计划编号"
          clearable
          @keyup.enter="handleQuery"
          :prefix-icon="Search"
        />
      </div>
      <div class="mobile-header__actions">
        <el-button :icon="Filter" circle @click="filterVisible = true" />
        <el-button type="primary" :icon="Plus" circle @click="openForm('create')" v-hasPermi="['mes:production-plan:create']" />
      </div>
    </div>

    <!-- 快捷筛选 -->
    <div class="mobile-header__quick-filter">
      <div
        class="quick-filter-item"
        :class="{ active: quickFilterStatus === undefined }"
        @click="handleQuickFilter(undefined)"
      >全部</div>
      <div
        class="quick-filter-item"
        :class="{ active: quickFilterStatus === 0 }"
        @click="handleQuickFilter(0)"
      >草稿</div>
      <div
        class="quick-filter-item"
        :class="{ active: quickFilterStatus === 1 }"
        @click="handleQuickFilter(1)"
      >已发布</div>
      <div
        class="quick-filter-item"
        :class="{ active: quickFilterStatus === 2 }"
        @click="handleQuickFilter(2)"
      >执行中</div>
    </div>

    <!-- 卡片列表 -->
    <div class="mobile-list" v-loading="loading">
      <div v-if="treeList.length === 0 && !loading" class="mobile-empty">
        <el-empty description="暂无计划数据" />
      </div>
      <div
        v-for="row in treeList"
        :key="row.id"
        class="mobile-card"
        @click="openDetail(row.id)"
      >
        <div class="mobile-card__header">
          <span class="mobile-card__no">{{ row.planCode }}</span>
          <el-tag :type="getStatusType(row.status)" size="small">{{ getStatusText(row.status) }}</el-tag>
        </div>
        <div class="mobile-card__body">
          <div class="mobile-card__row">
            <span class="mobile-card__label">计划名称</span>
            <span class="mobile-card__value">{{ row.planName }}</span>
          </div>
          <div class="mobile-card__row">
            <span class="mobile-card__label">计划类型</span>
            <span class="mobile-card__value">
              <el-tag :type="getPlanTypeTagType(row.planType)" size="small">{{ getPlanTypeText(row.planType) }}</el-tag>
            </span>
          </div>
          <div class="mobile-card__row">
            <span class="mobile-card__label">计划周期</span>
            <span class="mobile-card__value">{{ row.planPeriod }}</span>
          </div>
          <div class="mobile-card__row">
            <span class="mobile-card__label">计划时间</span>
            <span class="mobile-card__value">{{ row.startDate }} ~ {{ row.endDate }}</span>
          </div>
          <div class="mobile-card__nums">
            <div class="mobile-card__num-item">
              <div class="mobile-card__num-val" style="color:#409eff">{{ row.totalPlanQuantity || 0 }}</div>
              <div class="mobile-card__num-label">计划数量</div>
            </div>
            <div class="mobile-card__num-item">
              <div class="mobile-card__num-val" style="color:#67c23a">{{ row.totalCompletedQuantity || 0 }}</div>
              <div class="mobile-card__num-label">已完成</div>
            </div>
            <div class="mobile-card__num-item">
              <div class="mobile-card__num-val" style="color:#e6a23c">{{ row.totalInProgressQuantity || 0 }}</div>
              <div class="mobile-card__num-label">进行中</div>
            </div>
            <div class="mobile-card__num-item">
              <div class="mobile-card__num-val" :style="{ color: getProgressColor(row.overallCompletionRate) }">{{ row.overallCompletionRate || 0 }}%</div>
              <div class="mobile-card__num-label">完成率</div>
            </div>
          </div>
        </div>
        <div class="mobile-card__footer" @click.stop>
          <el-button size="small" @click="openDetail(row.id)">详情</el-button>
          <el-button size="small" @click="handleAnalyze(row.id)">分析</el-button>
          <el-button size="small" type="primary" @click="openForm('update', row.id)" v-if="row.status === 0" v-hasPermi="['mes:production-plan:update']">编辑</el-button>
          <el-button size="small" type="success" @click="handlePublish(row.id)" v-if="row.status === 0" v-hasPermi="['mes:production-plan:publish']">发布</el-button>
          <el-button size="small" type="warning" @click="handleGenerateOrders(row)" v-if="row.status >= 1 && row.status <= 2 && !row.hasChildPlans && !row.hasGeneratedOrders" v-hasPermi="['mes:production-plan:generate-orders']">生成工单</el-button>
          <el-button size="small" type="danger" @click="handleDelete(row.id)" v-if="row.status === 0" v-hasPermi="['mes:production-plan:delete']">删除</el-button>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="mobile-pagination" v-if="total > 0">
      <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" :page-sizes="[10, 20]" layout="total, prev, pager, next" :pager-count="5" @pagination="getList" />
    </div>

    <!-- 筛选抽屉 -->
    <el-drawer v-model="filterVisible" title="筛选条件" direction="btt" size="60%">
      <el-form :model="queryParams" ref="queryFormRef" label-position="top">
        <el-form-item label="计划名称" prop="planName">
          <el-input v-model="queryParams.planName" placeholder="请输入计划名称" clearable style="width:100%" />
        </el-form-item>
        <el-form-item label="计划类型" prop="planType">
          <el-select v-model="queryParams.planType" placeholder="请选择计划类型" clearable style="width:100%">
            <el-option label="年度计划" :value="1" />
            <el-option label="月度计划" :value="2" />
            <el-option label="周度计划" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="计划周期" prop="planPeriod">
          <el-input v-model="queryParams.planPeriod" placeholder="如:2024-01" clearable style="width:100%" />
        </el-form-item>
        <el-form-item label="计划状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable multiple style="width:100%">
            <el-option label="草稿" :value="0" />
            <el-option label="已发布" :value="1" />
            <el-option label="执行中" :value="2" />
            <el-option label="已完成" :value="3" />
            <el-option label="已关闭" :value="4" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="resetQuery">重置</el-button>
        <el-button type="primary" @click="handleFilterConfirm">确认筛选</el-button>
      </template>
    </el-drawer>
  </div>

  <!-- PC端布局 -->
  <template v-else>
    <doc-alert title="【MES】生产计划管理" url="https://doc.iocoder.cn/mes/production-plan/" />

    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="84px"
      >
        <el-form-item label="计划编号" prop="planCode">
          <el-input
            v-model="queryParams.planCode"
            placeholder="请输入计划编号"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="计划名称" prop="planName">
          <el-input
            v-model="queryParams.planName"
            placeholder="请输入计划名称"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="计划类型" prop="planType">
          <el-select
            v-model="queryParams.planType"
            placeholder="请选择计划类型"
            clearable
            class="!w-240px"
          >
            <el-option label="年度计划" :value="1" />
            <el-option label="月度计划" :value="2" />
            <el-option label="周度计划" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="计划周期" prop="planPeriod">
          <el-input
            v-model="queryParams.planPeriod"
            placeholder="如:2024-01"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="计划状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择状态"
            clearable
            multiple
            class="!w-240px"
          >
            <el-option label="草稿" :value="0" />
            <el-option label="已发布" :value="1" />
            <el-option label="执行中" :value="2" />
            <el-option label="已完成" :value="3" />
            <el-option label="已关闭" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
          <el-button
            type="primary"
            plain
            @click="openForm('create')"
            v-hasPermi="['mes:production-plan:create']"
          >
            <Icon icon="ep:plus" class="mr-5px" /> 新增计划
          </el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
      <el-table
      v-loading="loading"
      :data="treeList"
      :stripe="true"
      :show-overflow-tooltip="true"
      row-key="id"
      :tree-props="{ children: 'children' }"
      :default-expand-all="true"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column label="计划信息" align="left" min-width="200">
        <template #default="{ row }">
          <div class="font-bold">{{ row.planCode }}</div>
          <div class="mt-5px text-gray-500">{{ row.planName }}</div>
        </template>
      </el-table-column>
      <el-table-column label="计划类型" align="center" width="100">
        <template #default="{ row }">
          <el-tag :type="getPlanTypeTagType(row.planType)">
            {{ getPlanTypeText(row.planType) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="计划周期" align="center" prop="planPeriod" width="120" />
      <el-table-column label="计划时间" align="center" min-width="200">
        <template #default="{ row }">
          <div>开始：{{ row.startDate }}</div>
          <div class="mt-5px">结束：{{ row.endDate }}</div>
        </template>
      </el-table-column>
      <el-table-column label="计划数量" align="center" width="120">
        <template #default="{ row }">
          <div class="font-bold text-blue-600">{{ row.totalPlanQuantity || 0 }}</div>
        </template>
      </el-table-column>
      <el-table-column label="完成情况" align="center" min-width="180">
        <template #default="{ row }">
          <div class="mb-5px">
            <span class="text-sm text-gray-500">完成：</span>
            <span class="font-bold text-green-600">{{ row.totalCompletedQuantity || 0 }}</span>
            <span class="text-sm text-gray-500 ml-10px">进行中：</span>
            <span class="font-bold text-orange-600">{{ row.totalInProgressQuantity || 0 }}</span>
          </div>
          <el-progress
            :percentage="row.overallCompletionRate || 0"
            :color="getProgressColor(row.overallCompletionRate)"
          />
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="480">
        <template #default="scope">
          <el-button link type="primary" @click="openDetail(scope.row.id)">
            <Icon icon="ep:view" class="mr-5px" /> 详情
          </el-button>
          <el-button link type="success" @click="handleAnalyze(scope.row.id)">
            <Icon icon="ep:data-analysis" class="mr-5px" /> 分析
          </el-button>
          <el-button
            link
            type="primary"
            @click="openForm('update', scope.row.id)"
            v-hasPermi="['mes:production-plan:update']"
            :disabled="scope.row.status === 0 || scope.row.hasApprovalRecords"
          >
            <Icon icon="ep:edit" class="mr-5px" /> 编辑
          </el-button>
          <el-button
            link
            type="success"
            @click="handlePublish(scope.row.id)"
            v-if="scope.row.status === 0"
            v-hasPermi="['mes:production-plan:publish']"
          >
            <Icon icon="ep:upload" class="mr-5px" /> 发布
          </el-button>

          <el-button
            link
            type="success"
            @click="handleSubmitApproval(scope.row.id)"
            v-hasPermi="['mes:production-plan:submit-approval']"
            v-if="scope.row.status === 0 && !scope.row.hasApprovalRecords"
          >
            提交审批
          </el-button>
          <el-button
            link
            type="info"
            @click="handleViewApproval(scope.row.id)"
            v-hasPermi="['mes:production-plan:query-approval']"
            v-if="scope.row.hasApprovalRecords"
          >
            审批记录
          </el-button>
          <el-button
            link
            type="primary"
            @click="handleProcessApproval(scope.row.id)"
            v-hasPermi="['mes:approval-record:process']"
            v-if="scope.row.hasApprovalRecords && scope.row.status !== 1"
          >
            处理审批
          </el-button>
          <el-button
            link
            type="primary"
            @click="handleGenerateMonthlyPlans(scope.row)"
            v-if="scope.row.planType === 1 && scope.row.status >= 1"
            v-hasPermi="['mes:production-plan:generate-monthly-plans']"
          >
            <Icon icon="ep:calendar" class="mr-5px" /> 生成月度计划
          </el-button>
          <el-button
            link
            type="warning"
            @click="handleGenerateOrders(scope.row)"
            v-if="scope.row.status >= 1 && scope.row.status <= 2 && !scope.row.hasChildPlans && !scope.row.hasGeneratedOrders"
            v-hasPermi="['mes:production-plan:generate-orders']"
          >
            <Icon icon="ep:document-add" class="mr-5px" /> 生成工单
          </el-button>
          <el-tooltip
            content="该计划有下级计划，请在下级计划中生成工单"
            placement="top"
            v-if="scope.row.status >= 1 && scope.row.status <= 2 && scope.row.hasChildPlans"
          >
            <el-button
              link
              type="info"
              disabled
            >
              <Icon icon="ep:document-add" class="mr-5px" /> 生成工单
            </el-button>
          </el-tooltip>
          <el-button
            link
            type="info"
            @click="handleUpdateProgress(scope.row.id)"
            v-if="scope.row.status === 2"
            v-hasPermi="['mes:production-plan:update-progress']"
          >
            <Icon icon="ep:refresh" class="mr-5px" /> 更新进度
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleClose(scope.row.id)"
            v-if="scope.row.status === 2 || scope.row.status === 3"
            v-hasPermi="['mes:production-plan:close']"
          >
            <Icon icon="ep:close" class="mr-5px" /> 关闭
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
            v-if="scope.row.status === 0"
            v-hasPermi="['mes:production-plan:delete']"
            :disabled="scope.row.hasApprovalRecords"
          >
            <Icon icon="ep:delete" class="mr-5px" /> 删除
          </el-button>
        </template>
      </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
  </template>

  <!-- 表单弹窗：添加/修改 -->
  <ProductionPlanForm ref="formRef" @success="getList" />

  <!-- 生成工单弹窗 -->
  <GenerateOrderDialog ref="generateOrderRef" @success="getList" />

  <!-- 生成月度计划弹窗 -->
  <GenerateMonthlyPlanDialog ref="generateMonthlyPlanRef" @success="getList" />

  <!-- 计划分析弹窗 -->
  <PlanAnalysisDialog ref="planAnalysisRef" />

  <!-- 提交审批对话框 -->
  <SubmitApprovalDialog ref="submitApprovalDialogRef" @success="getList" />

  <!-- 审批记录对话框 -->
  <ApprovalRecordsDialog ref="approvalDialogRef" />

  <!-- 处理审批对话框 -->
  <ProcessApprovalDialog ref="processApprovalDialogRef" @success="getList" />
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Filter, Plus } from '@element-plus/icons-vue'
import { Icon } from '@/components/Icon'
import ProductionPlanForm from './ProductionPlanForm.vue'
import GenerateOrderDialog from './GenerateOrderDialog.vue'
import GenerateMonthlyPlanDialog from './GenerateMonthlyPlanDialog.vue'
import PlanAnalysisDialog from './PlanAnalysisDialog.vue'
import {
  getProductionPlanPage,
  deleteProductionPlan,
  publishProductionPlan,
  closeProductionPlan,
  updatePlanProgress
} from '@/api/mes/production/plan'
import { SubmitApprovalDialog, ApprovalRecordsDialog, ProcessApprovalDialog } from '@/components/Approval'
import { ApprovalRecordApi, ApprovalRecordVO } from '@/api/erp/approval/index'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)

// 手机端筛选相关
const filterVisible = ref(false)
const quickFilterStatus = ref<number | undefined>(undefined)

defineOptions({ name: 'MesProductionPlanList' })

const router = useRouter()
const loading = ref(true)
const total = ref(0)
const list = ref<any[]>([])
const treeList = ref<any[]>([])
const queryFormRef = ref()
const formRef = ref()
const generateOrderRef = ref()
const generateMonthlyPlanRef = ref()
const planAnalysisRef = ref()
const selectionList = ref<any[]>([])

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  planCode: undefined,
  planName: undefined,
  planType: undefined,
  planPeriod: undefined,
  status: [] as number[]
})

const getList = async () => {
  loading.value = true
  try {
    const res = await getProductionPlanPage(queryParams)
    
    // 递归处理树形结构，为每个节点（包括子节点）检查审批记录
    const processTreeNode = async (item: any): Promise<any> => {
      try {
        const records = await ApprovalRecordApi.getApprovalRecordListByBiz(item.id, 'mes_production_plan')
        const processedItem = {
          ...item,
          hasApprovalRecords: records && records.length > 0
        }
        
        // 如果有子节点，递归处理
        if (item.children && item.children.length > 0) {
          processedItem.children = await Promise.all(
            item.children.map(child => processTreeNode(child))
          )
        }
        
        return processedItem
      } catch (error) {
        console.error('获取审批记录失败', error)
        const processedItem = {
          ...item,
          hasApprovalRecords: false
        }
        
        // 如果有子节点，递归处理
        if (item.children && item.children.length > 0) {
          processedItem.children = await Promise.all(
            item.children.map(child => processTreeNode(child))
          )
        }
        
        return processedItem
      }
    }

    // 处理整个树形结构
    const listWithApprovalStatus = await Promise.all(
      res.list.map(item => processTreeNode(item))
    )

    list.value = listWithApprovalStatus
    total.value = res.total
    // 使用处理后的数据作为树形结构
    treeList.value = listWithApprovalStatus
  } finally {
    loading.value = false
  }
}

const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

const resetQuery = () => {
  queryFormRef.value?.resetFields()
  queryParams.planCode = undefined
  queryParams.planName = undefined
  queryParams.planType = undefined
  queryParams.planPeriod = undefined
  queryParams.status = []
  quickFilterStatus.value = undefined
  handleQuery()
}

/** 快捷筛选 */
const handleQuickFilter = (status: number | undefined) => {
  quickFilterStatus.value = status
  queryParams.status = status !== undefined ? [status] : []
  queryParams.pageNo = 1
  getList()
}

/** 筛选确认 */
const handleFilterConfirm = () => {
  filterVisible.value = false
  handleQuery()
}

/** 提交审批 */
const submitApprovalDialogRef = ref()
const handleSubmitApproval = (id: number) => {
  submitApprovalDialogRef.value.open(String(id), 'mes_production_plan')
}

/** 查看审批记录 */
const approvalDialogRef = ref()
const handleViewApproval = (id: number) => {
  approvalDialogRef.value.open(String(id), 'mes_production_plan')
}

/** 处理审批 */
const processApprovalDialogRef = ref()
const handleProcessApproval = (id: number) => {
  processApprovalDialogRef.value.open(String(id), 'mes_production_plan')
}

const openForm = (type: 'create' | 'update', id?: number) => {
  formRef.value.open(type, id)
}

const openDetail = (id: number) => {
  // 跳转到详情页面
  router.push({
    path: '/mes/production/plan/detail',
    query: { id: id.toString() }
  })
}

const handleDelete = async (id: number) => {
  try {
    await ElMessageBox.confirm('确定要删除该计划吗？', '提示', { type: 'warning' })
    await deleteProductionPlan(id)
    ElMessage.success('删除成功')
    getList()
  } catch {}
}

const handlePublish = async (id: number) => {
  try {
    await ElMessageBox.confirm('确定要发布该计划吗？发布后将不能修改。', '提示', {
      type: 'warning'
    })
    await publishProductionPlan(id)
    ElMessage.success('发布成功')
    getList()
  } catch {}
}

const handleClose = async (id: number) => {
  try {
    await ElMessageBox.confirm('确定要关闭该计划吗？', '提示', { type: 'warning' })
    await closeProductionPlan(id)
    ElMessage.success('关闭成功')
    getList()
  } catch {}
}

const handleGenerateOrders = (row: any) => {
  generateOrderRef.value.open(row)
}

const handleGenerateMonthlyPlans = (row: any) => {
  generateMonthlyPlanRef.value.open(row)
}

const handleAnalyze = (id: number) => {
  planAnalysisRef.value.open(id)
}

const handleUpdateProgress = async (id: number) => {
  try {
    await updatePlanProgress(id)
    ElMessage.success('进度更新成功')
    getList()
  } catch {}
}

const handleSelectionChange = (selection: any[]) => {
  selectionList.value = selection
}

const getPlanTypeText = (type: number) => {
  const map: Record<number, string> = {
    1: '年度',
    2: '月度',
    3: '周度'
  }
  return map[type] || '未知'
}

const getPlanTypeTagType = (type: number) => {
  const map: Record<number, string> = {
    1: 'danger',
    2: 'warning',
    3: 'info'
  }
  return map[type] || ''
}

const getStatusText = (status: number) => {
  const map: Record<number, string> = {
    0: '草稿',
    1: '已发布',
    2: '执行中',
    3: '已完成',
    4: '已关闭'
  }
  return map[status] || '未知'
}

const getStatusType = (status: number) => {
  const map: Record<number, string> = {
    0: 'info',
    1: 'primary',
    2: 'warning',
    3: 'success',
    4: 'danger'
  }
  return map[status] || ''
}

const getProgressColor = (percentage: number) => {
  if (percentage < 30) return '#f56c6c'
  if (percentage < 70) return '#e6a23c'
  return '#67c23a'
}

getList()
</script>

<style lang="scss" scoped>
.mobile-plan-list {
  padding: 12px;
  background: #f5f5f5;
  min-height: 100vh;
}

.mobile-header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  &__search { flex: 1; }
  &__actions { display: flex; gap: 4px; flex-shrink: 0; }
}

.mobile-header__quick-filter {
  display: flex;
  gap: 12px;
  margin: 8px 0;
  justify-content: flex-start;

  .quick-filter-item {
    padding: 4px 12px;
    font-size: 14px;
    border-radius: 20px;
    cursor: pointer;
    color: #909399;
    background: transparent;
    transition: all 0.2s;

    &.active {
      color: #fff;
      background: #409eff;
    }
  }
}

.mobile-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-empty { padding: 40px 0; }

.mobile-card {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  &__no { font-weight: 600; font-size: 15px; color: #303133; }
  &__body { font-size: 13px; }
  &__row { display: flex; justify-content: space-between; padding: 3px 0; }
  &__label { color: #909399; flex-shrink: 0; margin-right: 12px; }
  &__value {
    color: #606266;
    text-align: right;
    &--ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
  }
  &__nums {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    padding: 10px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
  }
  &__num-item { text-align: center; }
  &__num-val { font-size: 15px; font-weight: 600; color: #303133; }
  &__num-label { font-size: 11px; color: #909399; margin-top: 2px; }
  &__footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
}

.mobile-pagination {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  :deep(.el-pagination) { flex-wrap: wrap; justify-content: center; }
}
</style>
