<template>
  <ArtTableFullScreen>
    <div class="single-card-page" id="table-full-screen">
      <!-- 标识符查询区域 -->
      <ElCard shadow="never" class="search-card" style="margin-bottom: 16px">
        <template #header>
          <span>资产查询</span>
        </template>
        <div class="search-box">
          <ElInput
            v-model="searchIdentifier"
            placeholder="请输入虚拟号、ICCID、IMEI、SN或MSISDN"
            clearable
            style="width: 500px; margin-right: 16px"
            @keyup.enter="handleSearchAsset"
          >
            <template #prepend>标识符</template>
          </ElInput>
          <ElButton type="primary" @click="handleSearchAsset" :loading="loading">查询</ElButton>
          <ElButton
            @click="handleRefreshAsset"
            :loading="refreshing"
            :disabled="!assetInfo.asset_id"
          >
            <ElIcon><Refresh /></ElIcon>
            刷新数据
          </ElButton>
        </div>
        <!-- 格式化显示的标识符 -->
        <div v-if="formattedIdentifier" class="formatted-identifier">
          {{ formattedIdentifier }}
        </div>
      </ElCard>

      <!-- 资产信息卡片 -->
      <ElCard shadow="never" class="asset-info-card" style="margin-bottom: 16px">
        <template #header>
          <div class="card-header">
            <span>资产信息</span>
            <ElTag
              v-if="assetInfo.asset_type"
              :type="assetInfo.asset_type === 'card' ? 'success' : 'primary'"
            >
              {{ assetInfo.asset_type === 'card' ? 'IoT卡' : '设备' }}
            </ElTag>
          </div>
        </template>
        <div v-if="!hasSearched" class="empty-state">
          <p style="text-align: center; color: var(--el-text-color-secondary); padding: 40px">
            请在上方输入标识符进行查询
          </p>
        </div>
        <ElForm v-else :model="assetInfo" label-width="140px" :inline="false">
          <!-- 通用信息 -->
          <ElRow :gutter="24">
            <ElCol :span="8">
              <ElFormItem label="资产ID:">
                <span>{{ assetInfo.asset_id || '-' }}</span>
              </ElFormItem>
            </ElCol>
            <ElCol :span="8">
              <ElFormItem label="虚拟号:">
                <span>{{ assetInfo.virtual_no || '-' }}</span>
              </ElFormItem>
            </ElCol>
            <ElCol :span="8">
              <ElFormItem label="状态:">
                <ElTag v-if="assetInfo.status" :type="getStatusTagType(assetInfo.status)">
                  {{ getStatusName(assetInfo.status) }}
                </ElTag>
                <span v-else>-</span>
              </ElFormItem>
            </ElCol>
          </ElRow>
          <ElRow :gutter="24">
            <ElCol :span="8">
              <ElFormItem label="所属店铺:">
                <span>{{ assetInfo.shop_name || '-' }}</span>
              </ElFormItem>
            </ElCol>
            <ElCol :span="8">
              <ElFormItem label="套餐系列:">
                <span>{{ assetInfo.series_name || '-' }}</span>
              </ElFormItem>
            </ElCol>
            <ElCol :span="8">
              <ElFormItem label="批次号:">
                <span>{{ assetInfo.batch_no || '-' }}</span>
              </ElFormItem>
            </ElCol>
          </ElRow>
          <ElRow :gutter="24">
            <ElCol :span="8">
              <ElFormItem label="实名状态:">
                <ElTag :type="getRealNameStatusTagType(assetInfo.real_name_status)">
                  {{ getRealNameStatusName(assetInfo.real_name_status) }}
                </ElTag>
              </ElFormItem>
            </ElCol>
            <ElCol :span="8" v-if="assetInfo.asset_type === 'card'">
              <ElFormItem label="网络状态:">
                <ElTag :type="assetInfo.network_status === 1 ? 'success' : 'danger'">
                  {{ assetInfo.network_status === 1 ? '开机' : '停机' }}
                </ElTag>
              </ElFormItem>
            </ElCol>
            <ElCol :span="8" v-if="assetInfo.asset_type === 'device'">
              <ElFormItem label="保护期状态:">
                <ElTag :type="getProtectStatusTagType(assetInfo.device_protect_status)">
                  {{ getProtectStatusName(assetInfo.device_protect_status) }}
                </ElTag>
              </ElFormItem>
            </ElCol>
            <ElCol :span="8">
              <ElFormItem label="激活时间:">
                <span>{{ assetInfo.activated_at || '-' }}</span>
              </ElFormItem>
            </ElCol>
          </ElRow>

          <!-- 卡专属字段 -->
          <template v-if="assetInfo.asset_type === 'card'">
            <ElDivider content-position="left">卡信息</ElDivider>
            <ElRow :gutter="24">
              <ElCol :span="8">
                <ElFormItem label="ICCID:">
                  <span>{{ assetInfo.iccid || '-' }}</span>
                </ElFormItem>
              </ElCol>
              <ElCol :span="8">
                <ElFormItem label="IMSI:">
                  <span>{{ assetInfo.imsi || '-' }}</span>
                </ElFormItem>
              </ElCol>
              <ElCol :span="8">
                <ElFormItem label="手机号:">
                  <span>{{ assetInfo.msisdn || '-' }}</span>
                </ElFormItem>
              </ElCol>
            </ElRow>
            <ElRow :gutter="24">
              <ElCol :span="8">
                <ElFormItem label="运营商:">
                  <span>{{ assetInfo.carrier_name || '-' }}</span>
                </ElFormItem>
              </ElCol>
              <ElCol :span="8">
                <ElFormItem label="供应商:">
                  <span>{{ assetInfo.supplier || '-' }}</span>
                </ElFormItem>
              </ElCol>
              <ElCol :span="8">
                <ElFormItem label="绑定设备:">
                  <span>{{ assetInfo.bound_device_name || '-' }}</span>
                </ElFormItem>
              </ElCol>
            </ElRow>
          </template>

          <!-- 设备专属字段 -->
          <template v-if="assetInfo.asset_type === 'device'">
            <ElDivider content-position="left">设备信息</ElDivider>
            <ElRow :gutter="24">
              <ElCol :span="8">
                <ElFormItem label="设备名称:">
                  <span>{{ assetInfo.device_name || '-' }}</span>
                </ElFormItem>
              </ElCol>
              <ElCol :span="8">
                <ElFormItem label="设备型号:">
                  <span>{{ assetInfo.device_model || '-' }}</span>
                </ElFormItem>
              </ElCol>
              <ElCol :span="8">
                <ElFormItem label="设备类型:">
                  <span>{{ assetInfo.device_type || '-' }}</span>
                </ElFormItem>
              </ElCol>
            </ElRow>
            <ElRow :gutter="24">
              <ElCol :span="8">
                <ElFormItem label="制造商:">
                  <span>{{ assetInfo.manufacturer || '-' }}</span>
                </ElFormItem>
              </ElCol>
              <ElCol :span="8">
                <ElFormItem label="IMEI:">
                  <span>{{ assetInfo.imei || '-' }}</span>
                </ElFormItem>
              </ElCol>
              <ElCol :span="8">
                <ElFormItem label="序列号:">
                  <span>{{ assetInfo.sn || '-' }}</span>
                </ElFormItem>
              </ElCol>
            </ElRow>
            <ElRow :gutter="24">
              <ElCol :span="8">
                <ElFormItem label="最大插槽数:">
                  <span>{{ assetInfo.max_sim_slots || '-' }}</span>
                </ElFormItem>
              </ElCol>
              <ElCol :span="8">
                <ElFormItem label="已绑定卡数:">
                  <span>{{ assetInfo.bound_card_count || 0 }}</span>
                </ElFormItem>
              </ElCol>
            </ElRow>
          </template>
        </ElForm>
      </ElCard>

      <!-- 操作区域 -->
      <ElCard
        v-if="hasSearched && assetInfo.asset_id"
        shadow="never"
        class="operation-card"
        style="margin-bottom: 16px"
      >
        <template #header>
          <span>操作区域</span>
        </template>
        <div class="operation-buttons">
          <!-- 卡操作 -->
          <template v-if="assetInfo.asset_type === 'card'">
            <ElButton
              type="success"
              @click="handleStartCard"
              :disabled="assetInfo.network_status === 1"
            >
              复机
            </ElButton>
            <ElButton
              type="warning"
              @click="handleStopCard"
              :disabled="assetInfo.network_status === 0"
            >
              停机
            </ElButton>
          </template>
          <!-- 设备操作 -->
          <template v-if="assetInfo.asset_type === 'device'">
            <ElButton
              type="success"
              @click="handleStartDevice"
              :disabled="assetInfo.device_protect_status === 'stop'"
            >
              批量复机
            </ElButton>
            <ElButton
              type="warning"
              @click="handleStopDevice"
              :disabled="assetInfo.device_protect_status === 'start'"
            >
              批量停机
            </ElButton>
          </template>
          <ElButton type="primary" @click="loadPackages">查看套餐</ElButton>
        </div>
      </ElCard>

      <!-- 流量/套餐信息 -->
      <ElCard
        v-if="hasSearched && currentPackage"
        shadow="never"
        class="traffic-card"
        style="margin-bottom: 16px"
      >
        <template #header>
          <span>当前套餐信息</span>
        </template>
        <ElRow :gutter="24">
          <ElCol :span="6">
            <div class="info-item">
              <div class="info-label">套餐名称</div>
              <div class="info-value">{{ assetInfo.current_package || '-' }}</div>
            </div>
          </ElCol>
          <ElCol :span="6">
            <div class="info-item">
              <div class="info-label">总流量</div>
              <div class="info-value">{{ formatMB(assetInfo.package_total_mb) }}</div>
            </div>
          </ElCol>
          <ElCol :span="6">
            <div class="info-item">
              <div class="info-label">已用流量</div>
              <div class="info-value used">{{ formatMB(assetInfo.package_used_mb) }}</div>
            </div>
          </ElCol>
          <ElCol :span="6">
            <div class="info-item">
              <div class="info-label">剩余流量</div>
              <div class="info-value remaining">{{ formatMB(assetInfo.package_remain_mb) }}</div>
            </div>
          </ElCol>
        </ElRow>
        <ElProgress
          :percentage="getUsagePercentage()"
          :color="getProgressColor()"
          style="margin-top: 16px"
        />
      </ElCard>

      <!-- 绑定卡列表（仅设备） -->
      <ElCard
        v-if="
          hasSearched &&
          assetInfo.asset_type === 'device' &&
          assetInfo.cards &&
          assetInfo.cards.length
        "
        shadow="never"
        style="margin-bottom: 16px"
      >
        <template #header>
          <span>绑定卡列表</span>
        </template>
        <ElTable :data="assetInfo.cards" border stripe>
          <ElTableColumn prop="iccid" label="ICCID" min-width="180" />
          <ElTableColumn prop="msisdn" label="手机号" width="120" />
          <ElTableColumn prop="slot_position" label="插槽位置" width="100" align="center" />
          <ElTableColumn prop="network_status" label="网络状态" width="100" align="center">
            <template #default="{ row }">
              <ElTag :type="row.network_status === 1 ? 'success' : 'danger'">
                {{ row.network_status === 1 ? '开机' : '停机' }}
              </ElTag>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="real_name_status" label="实名状态" width="100" align="center">
            <template #default="{ row }">
              <ElTag :type="getRealNameStatusTagType(row.real_name_status)">
                {{ getRealNameStatusName(row.real_name_status) }}
              </ElTag>
            </template>
          </ElTableColumn>
        </ElTable>
      </ElCard>

      <!-- 套餐列表对话框 -->
      <ElDialog v-model="packagesDialogVisible" title="套餐列表" width="90%" align-center>
        <ElTable :data="packages" border stripe v-loading="packagesLoading">
          <ElTableColumn prop="package_usage_id" label="使用记录ID" width="110" align="center" />
          <ElTableColumn prop="package_id" label="套餐ID" width="90" align="center" />
          <ElTableColumn
            prop="package_name"
            label="套餐名称"
            min-width="150"
            show-overflow-tooltip
          />
          <ElTableColumn prop="package_type" label="套餐类型" width="100" align="center">
            <template #default="{ row }">
              <ElTag :type="row.package_type === 'formal' ? 'primary' : 'warning'" size="small">
                {{ row.package_type === 'formal' ? '正式套餐' : '加油包' }}
              </ElTag>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="usage_type" label="使用类型" width="110" align="center">
            <template #default="{ row }">
              <ElTag :type="row.usage_type === 'single_card' ? 'success' : 'info'" size="small">
                {{ row.usage_type === 'single_card' ? '单卡' : '设备' }}
              </ElTag>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="status_name" label="状态" width="100" align="center">
            <template #default="{ row }">
              <ElTag :type="getPackageStatusTagType(row.status)" size="small">
                {{ row.status_name }}
              </ElTag>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="data_limit_mb" label="真流量总量" width="120" align="right">
            <template #default="{ row }">
              {{ formatMB(row.data_limit_mb) }}
            </template>
          </ElTableColumn>
          <ElTableColumn prop="data_usage_mb" label="真流量已用" width="120" align="right">
            <template #default="{ row }">
              {{ formatMB(row.data_usage_mb) }}
            </template>
          </ElTableColumn>
          <ElTableColumn prop="virtual_limit_mb" label="虚流量总量" width="120" align="right">
            <template #default="{ row }">
              {{ formatMB(row.virtual_limit_mb) }}
            </template>
          </ElTableColumn>
          <ElTableColumn prop="virtual_used_mb" label="虚流量已用" width="120" align="right">
            <template #default="{ row }">
              {{ formatMB(row.virtual_used_mb) }}
            </template>
          </ElTableColumn>
          <ElTableColumn prop="virtual_remain_mb" label="虚流量剩余" width="120" align="right">
            <template #default="{ row }">
              {{ formatMB(row.virtual_remain_mb) }}
            </template>
          </ElTableColumn>
          <ElTableColumn prop="virtual_ratio" label="虚流量比例" width="100" align="center">
            <template #default="{ row }">
              {{ row.virtual_ratio?.toFixed(2) || '1.00' }}
            </template>
          </ElTableColumn>
          <ElTableColumn prop="priority" label="优先级" width="80" align="center" />
          <ElTableColumn prop="master_usage_id" label="主套餐ID" width="100" align="center">
            <template #default="{ row }">
              {{ row.master_usage_id || '-' }}
            </template>
          </ElTableColumn>
          <ElTableColumn prop="activated_at" label="激活时间" width="170" show-overflow-tooltip>
            <template #default="{ row }">
              {{ formatDateTime(row.activated_at) }}
            </template>
          </ElTableColumn>
          <ElTableColumn prop="expires_at" label="到期时间" width="170" show-overflow-tooltip>
            <template #default="{ row }">
              {{ formatDateTime(row.expires_at) }}
            </template>
          </ElTableColumn>
          <ElTableColumn prop="created_at" label="创建时间" width="170" show-overflow-tooltip>
            <template #default="{ row }">
              {{ formatDateTime(row.created_at) }}
            </template>
          </ElTableColumn>
        </ElTable>
      </ElDialog>
    </div>
  </ArtTableFullScreen>
</template>

<script setup lang="ts">
  import { Refresh } from '@element-plus/icons-vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { useRoute } from 'vue-router'
  import { AssetService } from '@/api/modules'
  import { formatDateTime } from '@/utils/business/format'
  import type {
    AssetResolveResponse,
    AssetPackageUsageRecord,
    AssetCurrentPackageResponse
  } from '@/types/api'

  defineOptions({ name: 'SingleCard' })

  const loading = ref(false)
  const refreshing = ref(false)
  const packagesDialogVisible = ref(false)
  const packagesLoading = ref(false)
  const route = useRoute()

  // 标识符搜索相关
  const searchIdentifier = ref('')
  const hasSearched = ref(false)

  // 资产信息
  const assetInfo = ref<Partial<AssetResolveResponse>>({})

  // 当前套餐
  const currentPackage = ref<AssetCurrentPackageResponse | null>(null)

  // 套餐列表
  const packages = ref<AssetPackageUsageRecord[]>([])

  // 格式化显示的标识符
  const formattedIdentifier = computed(() => {
    const identifier = assetInfo.value.virtual_no || assetInfo.value.iccid || searchIdentifier.value
    if (!identifier) return ''
    // 如果是ICCID（19-20位数字），进行格式化
    if (/^\d{19,20}$/.test(identifier)) {
      return identifier.replace(/(\d{4})(?=\d)/g, '$1-')
    }
    return identifier
  })

  // 获取状态标签类型
  const getStatusTagType = (status: number) => {
    const map: Record<number, any> = {
      1: 'info',
      2: 'success',
      3: 'success',
      4: 'danger'
    }
    return map[status] || 'info'
  }

  // 获取状态名称
  const getStatusName = (status: number) => {
    const map: Record<number, string> = {
      1: '在库',
      2: '已分销',
      3: '已激活',
      4: '已停用'
    }
    return map[status] || '未知'
  }

  // 获取实名状态标签类型
  const getRealNameStatusTagType = (status: number) => {
    const map: Record<number, any> = {
      0: 'info',
      1: 'warning',
      2: 'success'
    }
    return map[status] || 'info'
  }

  // 获取实名状态名称
  const getRealNameStatusName = (status: number) => {
    const map: Record<number, string> = {
      0: '未实名',
      1: '实名中',
      2: '已实名'
    }
    return map[status] || '未知'
  }

  // 获取保护期状态标签类型
  const getProtectStatusTagType = (status?: string) => {
    const map: Record<string, any> = {
      none: 'info',
      stop: 'warning',
      start: 'success'
    }
    return map[status || 'none'] || 'info'
  }

  // 获取保护期状态名称
  const getProtectStatusName = (status?: string) => {
    const map: Record<string, string> = {
      none: '无保护期',
      stop: '停机保护期',
      start: '复机保护期'
    }
    return map[status || 'none'] || '无'
  }

  // 获取套餐状态标签类型
  const getPackageStatusTagType = (status: number) => {
    const map: Record<number, any> = {
      0: 'info',
      1: 'success',
      2: 'warning',
      3: 'danger',
      4: 'info'
    }
    return map[status] || 'info'
  }

  // 格式化MB
  const formatMB = (mb: number | undefined) => {
    if (mb === undefined || mb === null) return '0MB'
    if (mb >= 1024) {
      return `${(mb / 1024).toFixed(2)}GB`
    }
    return `${mb.toFixed(2)}MB`
  }

  // 获取使用百分比
  const getUsagePercentage = () => {
    const total = assetInfo.value.package_total_mb || 0
    const used = assetInfo.value.package_used_mb || 0
    if (total === 0) return 0
    return Math.min(Math.round((used / total) * 100), 100)
  }

  // 获取进度条颜色
  const getProgressColor = () => {
    const percentage = getUsagePercentage()
    if (percentage >= 90) return '#F56C6C'
    if (percentage >= 70) return '#E6A23C'
    return '#67C23A'
  }

  // 处理资产搜索
  const handleSearchAsset = async () => {
    if (!searchIdentifier.value.trim()) {
      ElMessage.warning('请输入资产标识符')
      return
    }
    await loadAssetInfo(searchIdentifier.value.trim())
  }

  // 加载资产信息
  const loadAssetInfo = async (identifier: string) => {
    loading.value = true
    hasSearched.value = false
    currentPackage.value = null
    try {
      const response = await AssetService.resolveAsset(identifier)
      if (response.code === 200 && response.data) {
        assetInfo.value = response.data
        hasSearched.value = true

        // 如果有当前套餐，尝试加载套餐详情
        if (response.data.current_package) {
          await loadCurrentPackage()
        }

        ElMessage.success('查询成功')
      } else {
        ElMessage.error(response.message || '查询失败')
      }
    } catch (error: any) {
      console.error('获取资产信息失败:', error)
      if (error?.response?.status === 404) {
        ElMessage.error('未找到该资产')
      } else if (error?.response?.status === 403) {
        ElMessage.error('无权限访问该资产')
      } else {
        ElMessage.error(error?.message || '获取资产信息失败')
      }
    } finally {
      loading.value = false
    }
  }

  // 刷新资产数据
  const handleRefreshAsset = async () => {
    if (!assetInfo.value.asset_type || !assetInfo.value.asset_id) {
      ElMessage.warning('请先查询资产')
      return
    }

    refreshing.value = true
    try {
      const response = await AssetService.refreshAsset(
        assetInfo.value.asset_type,
        assetInfo.value.asset_id
      )
      if (response.code === 200) {
        ElMessage.success('数据刷新成功')
        // 刷新完成后重新加载资产信息
        if (assetInfo.value.virtual_no) {
          await loadAssetInfo(assetInfo.value.virtual_no)
        }
      } else {
        ElMessage.error(response.message || '刷新失败')
      }
    } catch (error: any) {
      console.error('刷新数据失败:', error)
      if (error?.response?.status === 429) {
        ElMessage.warning('刷新太频繁，请稍后再试（30秒冷却）')
      } else {
        ElMessage.error(error?.message || '刷新数据失败')
      }
    } finally {
      refreshing.value = false
    }
  }

  // 加载当前套餐
  const loadCurrentPackage = async () => {
    if (!assetInfo.value.asset_type || !assetInfo.value.asset_id) return

    try {
      const response = await AssetService.getCurrentPackage(
        assetInfo.value.asset_type,
        assetInfo.value.asset_id
      )
      if (response.code === 200 && response.data) {
        currentPackage.value = response.data
      }
    } catch (error: any) {
      // 404表示无生效套餐，不显示错误
      if (error?.response?.status !== 404) {
        console.error('获取当前套餐失败:', error)
      }
    }
  }

  // 加载套餐列表
  const loadPackages = async () => {
    if (!assetInfo.value.asset_type || !assetInfo.value.asset_id) {
      ElMessage.warning('请先查询资产')
      return
    }

    packagesDialogVisible.value = true
    packagesLoading.value = true
    try {
      const response = await AssetService.getAssetPackages(
        assetInfo.value.asset_type,
        assetInfo.value.asset_id
      )
      if (response.code === 200 && response.data) {
        packages.value = response.data
      } else {
        ElMessage.error(response.message || '获取套餐列表失败')
      }
    } catch (error: any) {
      console.error('获取套餐列表失败:', error)
      ElMessage.error(error?.message || '获取套餐列表失败')
    } finally {
      packagesLoading.value = false
    }
  }

  // 单卡复机
  const handleStartCard = async () => {
    if (!assetInfo.value.iccid) return

    try {
      await ElMessageBox.confirm('确定要复机该卡吗？', '复机确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })

      await AssetService.startCard(assetInfo.value.iccid)
      ElMessage.success('复机成功')

      // 重新加载资产信息
      if (assetInfo.value.virtual_no) {
        await loadAssetInfo(assetInfo.value.virtual_no)
      }
    } catch (error: any) {
      if (error !== 'cancel') {
        if (error?.response?.status === 403) {
          ElMessage.error('该卡绑定的设备在保护期内，无法复机')
        } else {
          ElMessage.error(error?.message || '复机失败')
        }
      }
    }
  }

  // 单卡停机
  const handleStopCard = async () => {
    if (!assetInfo.value.iccid) return

    try {
      await ElMessageBox.confirm('确定要停机该卡吗？', '停机确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })

      await AssetService.stopCard(assetInfo.value.iccid)
      ElMessage.success('停机成功')

      // 重新加载资产信息
      if (assetInfo.value.virtual_no) {
        await loadAssetInfo(assetInfo.value.virtual_no)
      }
    } catch (error: any) {
      if (error !== 'cancel') {
        if (error?.response?.status === 403) {
          ElMessage.error('该卡绑定的设备在保护期内，无法停机')
        } else {
          ElMessage.error(error?.message || '停机失败')
        }
      }
    }
  }

  // 设备批量复机
  const handleStartDevice = async () => {
    if (!assetInfo.value.asset_id) return

    try {
      await ElMessageBox.confirm(
        '确定要批量复机设备下所有已实名卡吗？复机成功后将设置1小时复机保护期。',
        '批量复机确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )

      await AssetService.startDevice(assetInfo.value.asset_id)
      ElMessage.success('批量复机成功')

      // 重新加载资产信息
      if (assetInfo.value.virtual_no) {
        await loadAssetInfo(assetInfo.value.virtual_no)
      }
    } catch (error: any) {
      if (error !== 'cancel') {
        ElMessage.error(error?.message || '批量复机失败')
      }
    }
  }

  // 设备批量停机
  const handleStopDevice = async () => {
    if (!assetInfo.value.asset_id) return

    try {
      await ElMessageBox.confirm(
        '确定要批量停机设备下所有已实名卡吗？停机成功后将设置1小时停机保护期。',
        '批量停机确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )

      const response = await AssetService.stopDevice(assetInfo.value.asset_id)
      if (response.code === 200 && response.data) {
        const { success_count, failed_cards } = response.data
        if (failed_cards && failed_cards.length > 0) {
          ElMessage.warning(`停机部分成功，成功${success_count}张，失败${failed_cards.length}张`)
        } else {
          ElMessage.success(`批量停机成功，共停机${success_count}张卡`)
        }
      }

      // 重新加载资产信息
      if (assetInfo.value.virtual_no) {
        await loadAssetInfo(assetInfo.value.virtual_no)
      }
    } catch (error: any) {
      if (error !== 'cancel') {
        ElMessage.error(error?.message || '批量停机失败')
      }
    }
  }

  onMounted(() => {
    // 检查是否有传递的标识符参数
    const identifierFromQuery = (route.query.iccid || route.query.identifier) as string
    if (identifierFromQuery) {
      searchIdentifier.value = identifierFromQuery
      loadAssetInfo(identifierFromQuery)
    }
  })
</script>

<style lang="scss" scoped>
  .single-card-page {
    .search-card {
      .search-box {
        display: flex;
        align-items: center;
      }

      .formatted-identifier {
        margin-top: 16px;
        padding: 16px;
        background-color: var(--el-fill-color-light);
        border-radius: 4px;
        font-size: 28px;
        font-weight: 600;
        letter-spacing: 2px;
        text-align: center;
        color: var(--el-color-primary);
        font-family: 'Courier New', Courier, monospace;
      }
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .operation-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .traffic-card,
    .asset-info-card {
      .info-item {
        padding: 16px;
        text-align: center;
        border-radius: 4px;
        background-color: var(--el-fill-color-light);

        .info-label {
          font-size: 14px;
          color: var(--el-text-color-regular);
          margin-bottom: 8px;
        }

        .info-value {
          font-size: 20px;
          font-weight: bold;
          color: var(--el-color-primary);

          &.used {
            color: var(--el-color-warning);
          }

          &.remaining {
            color: var(--el-color-success);
          }
        }
      }
    }
  }
</style>
