<template>
  <ArtTableFullScreen>
    <div class="standalone-card-list-page" id="table-full-screen">
      <!-- 搜索栏 -->
      <ArtSearchBar
        v-model:filter="formFilters"
        :items="formItems"
        @reset="handleReset"
        @search="handleSearch"
      ></ArtSearchBar>

      <ElCard shadow="never" class="art-table-card">
        <!-- 表格头部 -->
        <ArtTableHeader
          :columnList="columnOptions"
          v-model:columns="columnChecks"
          @refresh="handleRefresh"
        >
          <template #left>
            <ElButton type="primary" @click="showImportDialog">导入ICCID</ElButton>
            <ElButton type="success" :disabled="selectedCards.length === 0" @click="showAllocateDialog">
              批量分配
            </ElButton>
            <ElButton type="warning" :disabled="selectedCards.length === 0" @click="showRecallDialog">
              批量回收
            </ElButton>
          </template>
        </ArtTableHeader>

        <!-- 表格 -->
        <ArtTable
          ref="tableRef"
          row-key="id"
          :loading="loading"
          :data="cardList"
          :currentPage="pagination.page"
          :pageSize="pagination.pageSize"
          :total="pagination.total"
          :marginTop="10"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @selection-change="handleSelectionChange"
        >
          <template #default>
            <ElTableColumn type="selection" width="55" />
            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
          </template>
        </ArtTable>

        <!-- 导入ICCID对话框 -->
        <ElDialog
          v-model="importDialogVisible"
          title="导入ICCID"
          width="500px"
          @close="handleImportDialogClose"
        >
          <ElForm ref="importFormRef" :model="importForm" :rules="importRules" label-width="100px">
            <ElFormItem label="运营商" prop="carrier_id">
              <ElSelect v-model="importForm.carrier_id" placeholder="请选择运营商" style="width: 100%">
                <ElOption label="中国移动" :value="1" />
                <ElOption label="中国联通" :value="2" />
                <ElOption label="中国电信" :value="3" />
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="批次号" prop="batch_no">
              <ElInput v-model="importForm.batch_no" placeholder="请输入批次号(可选)" />
            </ElFormItem>
            <ElFormItem label="上传文件" prop="file">
              <ElUpload
                ref="uploadRef"
                class="upload-demo"
                :auto-upload="false"
                :limit="1"
                :on-change="handleFileChange"
                :on-exceed="handleExceed"
                :file-list="fileList"
                accept=".xlsx,.xls"
              >
                <template #trigger>
                  <ElButton type="primary">选择文件</ElButton>
                </template>
                <template #tip>
                  <div class="el-upload__tip">只能上传xlsx/xls文件，且不超过10MB</div>
                </template>
              </ElUpload>
            </ElFormItem>
          </ElForm>
          <template #footer>
            <div class="dialog-footer">
              <ElButton @click="importDialogVisible = false">取消</ElButton>
              <ElButton type="primary" @click="handleImport" :loading="importLoading">
                开始导入
              </ElButton>
            </div>
          </template>
        </ElDialog>

        <!-- 批量分配对话框 -->
        <ElDialog
          v-model="allocateDialogVisible"
          title="批量分配"
          width="600px"
          @close="handleAllocateDialogClose"
        >
          <ElForm ref="allocateFormRef" :model="allocateForm" :rules="allocateRules" label-width="120px">
            <ElFormItem label="目标店铺" prop="to_shop_id">
              <ElSelect v-model="allocateForm.to_shop_id" placeholder="请选择目标店铺" style="width: 100%">
                <ElOption label="店铺A" :value="1" />
                <ElOption label="店铺B" :value="2" />
                <ElOption label="店铺C" :value="3" />
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="选卡方式" prop="selection_type">
              <ElRadioGroup v-model="allocateForm.selection_type">
                <ElRadio label="list">ICCID列表</ElRadio>
                <ElRadio label="range">号段范围</ElRadio>
                <ElRadio label="filter">筛选条件</ElRadio>
              </ElRadioGroup>
            </ElFormItem>

            <ElFormItem v-if="allocateForm.selection_type === 'list'" label="ICCID列表">
              <div>已选择 {{ selectedCards.length }} 张卡</div>
            </ElFormItem>

            <ElFormItem v-if="allocateForm.selection_type === 'range'" label="起始ICCID" prop="iccid_start">
              <ElInput v-model="allocateForm.iccid_start" placeholder="请输入起始ICCID" />
            </ElFormItem>
            <ElFormItem v-if="allocateForm.selection_type === 'range'" label="结束ICCID" prop="iccid_end">
              <ElInput v-model="allocateForm.iccid_end" placeholder="请输入结束ICCID" />
            </ElFormItem>

            <ElFormItem v-if="allocateForm.selection_type === 'filter'" label="运营商">
              <ElSelect v-model="allocateForm.carrier_id" placeholder="请选择运营商" clearable style="width: 100%">
                <ElOption label="中国移动" :value="1" />
                <ElOption label="中国联通" :value="2" />
                <ElOption label="中国电信" :value="3" />
              </ElSelect>
            </ElFormItem>
            <ElFormItem v-if="allocateForm.selection_type === 'filter'" label="卡状态">
              <ElSelect v-model="allocateForm.status" placeholder="请选择状态" clearable style="width: 100%">
                <ElOption label="在库" :value="1" />
                <ElOption label="已分销" :value="2" />
                <ElOption label="已激活" :value="3" />
                <ElOption label="已停用" :value="4" />
              </ElSelect>
            </ElFormItem>
            <ElFormItem v-if="allocateForm.selection_type === 'filter'" label="批次号">
              <ElInput v-model="allocateForm.batch_no" placeholder="请输入批次号" />
            </ElFormItem>

            <ElFormItem label="备注">
              <ElInput v-model="allocateForm.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
            </ElFormItem>
          </ElForm>
          <template #footer>
            <div class="dialog-footer">
              <ElButton @click="allocateDialogVisible = false">取消</ElButton>
              <ElButton type="primary" @click="handleAllocate" :loading="allocateLoading">
                确认分配
              </ElButton>
            </div>
          </template>
        </ElDialog>

        <!-- 批量回收对话框 -->
        <ElDialog
          v-model="recallDialogVisible"
          title="批量回收"
          width="600px"
          @close="handleRecallDialogClose"
        >
          <ElForm ref="recallFormRef" :model="recallForm" :rules="recallRules" label-width="120px">
            <ElFormItem label="来源店铺" prop="from_shop_id">
              <ElSelect v-model="recallForm.from_shop_id" placeholder="请选择来源店铺" style="width: 100%">
                <ElOption label="店铺A" :value="1" />
                <ElOption label="店铺B" :value="2" />
                <ElOption label="店铺C" :value="3" />
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="选卡方式" prop="selection_type">
              <ElRadioGroup v-model="recallForm.selection_type">
                <ElRadio label="list">ICCID列表</ElRadio>
                <ElRadio label="range">号段范围</ElRadio>
                <ElRadio label="filter">筛选条件</ElRadio>
              </ElRadioGroup>
            </ElFormItem>

            <ElFormItem v-if="recallForm.selection_type === 'list'" label="ICCID列表">
              <div>已选择 {{ selectedCards.length }} 张卡</div>
            </ElFormItem>

            <ElFormItem v-if="recallForm.selection_type === 'range'" label="起始ICCID" prop="iccid_start">
              <ElInput v-model="recallForm.iccid_start" placeholder="请输入起始ICCID" />
            </ElFormItem>
            <ElFormItem v-if="recallForm.selection_type === 'range'" label="结束ICCID" prop="iccid_end">
              <ElInput v-model="recallForm.iccid_end" placeholder="请输入结束ICCID" />
            </ElFormItem>

            <ElFormItem v-if="recallForm.selection_type === 'filter'" label="运营商">
              <ElSelect v-model="recallForm.carrier_id" placeholder="请选择运营商" clearable style="width: 100%">
                <ElOption label="中国移动" :value="1" />
                <ElOption label="中国联通" :value="2" />
                <ElOption label="中国电信" :value="3" />
              </ElSelect>
            </ElFormItem>
            <ElFormItem v-if="recallForm.selection_type === 'filter'" label="批次号">
              <ElInput v-model="recallForm.batch_no" placeholder="请输入批次号" />
            </ElFormItem>

            <ElFormItem label="备注">
              <ElInput v-model="recallForm.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
            </ElFormItem>
          </ElForm>
          <template #footer>
            <div class="dialog-footer">
              <ElButton @click="recallDialogVisible = false">取消</ElButton>
              <ElButton type="primary" @click="handleRecall" :loading="recallLoading">
                确认回收
              </ElButton>
            </div>
          </template>
        </ElDialog>

        <!-- 分配结果对话框 -->
        <ElDialog
          v-model="resultDialogVisible"
          :title="resultTitle"
          width="700px"
        >
          <ElDescriptions :column="2" border>
            <ElDescriptionsItem label="操作单号">{{ allocationResult.allocation_no }}</ElDescriptionsItem>
            <ElDescriptionsItem label="待处理总数">{{ allocationResult.total_count }}</ElDescriptionsItem>
            <ElDescriptionsItem label="成功数">
              <ElTag type="success">{{ allocationResult.success_count }}</ElTag>
            </ElDescriptionsItem>
            <ElDescriptionsItem label="失败数">
              <ElTag type="danger">{{ allocationResult.fail_count }}</ElTag>
            </ElDescriptionsItem>
          </ElDescriptions>

          <div v-if="allocationResult.failed_items && allocationResult.failed_items.length > 0" style="margin-top: 20px">
            <ElDivider content-position="left">失败项详情</ElDivider>
            <ElTable :data="allocationResult.failed_items" border max-height="300">
              <ElTableColumn prop="iccid" label="ICCID" width="180" />
              <ElTableColumn prop="reason" label="失败原因" />
            </ElTable>
          </div>

          <template #footer>
            <div class="dialog-footer">
              <ElButton type="primary" @click="resultDialogVisible = false">确定</ElButton>
            </div>
          </template>
        </ElDialog>
      </ElCard>
    </div>
  </ArtTableFullScreen>
</template>

<script setup lang="ts">
  import { h } from 'vue'
  import { CardService } from '@/api/modules'
  import { ElMessage, ElTag, ElUpload } from 'element-plus'
  import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
  import type { SearchFormItem } from '@/types'
  import { useCheckedColumns } from '@/composables/useCheckedColumns'
  import { formatDateTime } from '@/utils/business/format'
  import type {
    StandaloneIotCard,
    StandaloneCardStatus,
    AllocateStandaloneCardsRequest,
    RecallStandaloneCardsRequest,
    AllocateStandaloneCardsResponse
  } from '@/types/api/card'

  defineOptions({ name: 'StandaloneCardList' })

  const loading = ref(false)
  const importDialogVisible = ref(false)
  const importLoading = ref(false)
  const allocateDialogVisible = ref(false)
  const allocateLoading = ref(false)
  const recallDialogVisible = ref(false)
  const recallLoading = ref(false)
  const resultDialogVisible = ref(false)
  const resultTitle = ref('')
  const tableRef = ref()
  const importFormRef = ref<FormInstance>()
  const allocateFormRef = ref<FormInstance>()
  const recallFormRef = ref<FormInstance>()
  const uploadRef = ref()
  const fileList = ref<UploadUserFile[]>([])
  const selectedCards = ref<StandaloneIotCard[]>([])
  const allocationResult = ref<AllocateStandaloneCardsResponse>({
    allocation_no: '',
    total_count: 0,
    success_count: 0,
    fail_count: 0,
    failed_items: null
  })

  // 搜索表单初始值
  const initialSearchState = {
    status: undefined,
    carrier_id: undefined,
    shop_id: undefined,
    iccid: '',
    msisdn: '',
    batch_no: '',
    package_id: undefined,
    is_distributed: undefined,
    is_replaced: undefined,
    iccid_start: '',
    iccid_end: ''
  }

  // 搜索表单
  const formFilters = reactive({ ...initialSearchState })

  // 导入表单
  const importForm = reactive({
    carrier_id: undefined as number | undefined,
    batch_no: '',
    file: null as File | null
  })

  // 导入表单验证规则
  const importRules = reactive<FormRules>({
    carrier_id: [{ required: true, message: '请选择运营商', trigger: 'change' }],
    file: [{ required: true, message: '请选择上传文件', trigger: 'change' }]
  })

  // 批量分配表单
  const allocateForm = reactive<Partial<AllocateStandaloneCardsRequest>>({
    selection_type: 'list',
    to_shop_id: undefined,
    iccids: [],
    iccid_start: '',
    iccid_end: '',
    carrier_id: undefined,
    status: undefined,
    batch_no: '',
    remark: ''
  })

  // 批量分配表单验证规则
  const allocateRules = reactive<FormRules>({
    to_shop_id: [{ required: true, message: '请选择目标店铺', trigger: 'change' }],
    selection_type: [{ required: true, message: '请选择选卡方式', trigger: 'change' }],
    iccid_start: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (allocateForm.selection_type === 'range' && !value) {
            callback(new Error('请输入起始ICCID'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ],
    iccid_end: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (allocateForm.selection_type === 'range' && !value) {
            callback(new Error('请输入结束ICCID'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ]
  })

  // 批量回收表单
  const recallForm = reactive<Partial<RecallStandaloneCardsRequest>>({
    selection_type: 'list',
    from_shop_id: undefined,
    iccids: [],
    iccid_start: '',
    iccid_end: '',
    carrier_id: undefined,
    batch_no: '',
    remark: ''
  })

  // 批量回收表单验证规则
  const recallRules = reactive<FormRules>({
    from_shop_id: [{ required: true, message: '请选择来源店铺', trigger: 'change' }],
    selection_type: [{ required: true, message: '请选择选卡方式', trigger: 'change' }],
    iccid_start: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (recallForm.selection_type === 'range' && !value) {
            callback(new Error('请输入起始ICCID'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ],
    iccid_end: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (recallForm.selection_type === 'range' && !value) {
            callback(new Error('请输入结束ICCID'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ]
  })

  // 分页
  const pagination = reactive({
    page: 1,
    pageSize: 20,
    total: 0
  })

  // 搜索表单配置
  const formItems: SearchFormItem[] = [
    {
      label: '状态',
      prop: 'status',
      type: 'select',
      config: {
        clearable: true,
        placeholder: '全部'
      },
      options: () => [
        { label: '在库', value: 1 },
        { label: '已分销', value: 2 },
        { label: '已激活', value: 3 },
        { label: '已停用', value: 4 }
      ]
    },
    {
      label: '运营商',
      prop: 'carrier_id',
      type: 'select',
      config: {
        clearable: true,
        placeholder: '全部'
      },
      options: () => [
        { label: '中国移动', value: 1 },
        { label: '中国联通', value: 2 },
        { label: '中国电信', value: 3 }
      ]
    },
    {
      label: 'ICCID',
      prop: 'iccid',
      type: 'input',
      config: {
        clearable: true,
        placeholder: '请输入ICCID'
      }
    },
    {
      label: '卡接入号',
      prop: 'msisdn',
      type: 'input',
      config: {
        clearable: true,
        placeholder: '请输入卡接入号'
      }
    },
    {
      label: '批次号',
      prop: 'batch_no',
      type: 'input',
      config: {
        clearable: true,
        placeholder: '请输入批次号'
      }
    },
    {
      label: '是否已分销',
      prop: 'is_distributed',
      type: 'select',
      config: {
        clearable: true,
        placeholder: '全部'
      },
      options: () => [
        { label: '是', value: true },
        { label: '否', value: false }
      ]
    }
  ]

  // 列配置
  const columnOptions = [
    { label: 'ICCID', prop: 'iccid' },
    { label: 'IMSI', prop: 'imsi' },
    { label: '卡接入号', prop: 'msisdn' },
    { label: '运营商', prop: 'carrier_name' },
    { label: '卡类型', prop: 'card_type' },
    { label: '状态', prop: 'status' },
    { label: '批次号', prop: 'batch_no' },
    { label: '店铺名称', prop: 'shop_name' },
    { label: '激活时间', prop: 'activated_at' },
    { label: '创建时间', prop: 'created_at' }
  ]

  const cardList = ref<StandaloneIotCard[]>([])

  // 获取状态标签类型
  const getStatusType = (status: StandaloneCardStatus) => {
    switch (status) {
      case 1:
        return 'info'
      case 2:
        return 'warning'
      case 3:
        return 'success'
      case 4:
        return 'danger'
      default:
        return 'info'
    }
  }

  // 获取状态文本
  const getStatusText = (status: StandaloneCardStatus) => {
    switch (status) {
      case 1:
        return '在库'
      case 2:
        return '已分销'
      case 3:
        return '已激活'
      case 4:
        return '已停用'
      default:
        return '未知'
    }
  }

  // 动态列配置
  const { columnChecks, columns } = useCheckedColumns(() => [
    {
      prop: 'iccid',
      label: 'ICCID',
      minWidth: 180
    },
    {
      prop: 'imsi',
      label: 'IMSI',
      width: 150
    },
    {
      prop: 'msisdn',
      label: '卡接入号',
      width: 120
    },
    {
      prop: 'carrier_name',
      label: '运营商',
      width: 100
    },
    {
      prop: 'card_type',
      label: '卡类型',
      width: 100
    },
    {
      prop: 'status',
      label: '状态',
      width: 100,
      formatter: (row: StandaloneIotCard) => {
        return h(ElTag, { type: getStatusType(row.status) }, () => getStatusText(row.status))
      }
    },
    {
      prop: 'batch_no',
      label: '批次号',
      width: 120
    },
    {
      prop: 'shop_name',
      label: '店铺名称',
      width: 150
    },
    {
      prop: 'activated_at',
      label: '激活时间',
      width: 160,
      formatter: (row: StandaloneIotCard) => (row.activated_at ? formatDateTime(row.activated_at) : '-')
    },
    {
      prop: 'created_at',
      label: '创建时间',
      width: 160,
      formatter: (row: StandaloneIotCard) => formatDateTime(row.created_at)
    }
  ])

  onMounted(() => {
    getTableData()
  })

  // 获取单卡列表
  const getTableData = async () => {
    loading.value = true
    try {
      const params = {
        page: pagination.page,
        page_size: pagination.pageSize,
        ...formFilters
      }
      // 清理空值
      Object.keys(params).forEach((key) => {
        if (params[key] === '' || params[key] === undefined) {
          delete params[key]
        }
      })

      const res = await CardService.getStandaloneIotCards(params)
      if (res.code === 0) {
        cardList.value = res.data.list || []
        pagination.total = res.data.total || 0
      }
    } catch (error) {
      console.error(error)
      ElMessage.error('获取单卡列表失败')
    } finally {
      loading.value = false
    }
  }

  // 重置搜索
  const handleReset = () => {
    Object.assign(formFilters, { ...initialSearchState })
    pagination.page = 1
    getTableData()
  }

  // 搜索
  const handleSearch = () => {
    pagination.page = 1
    getTableData()
  }

  // 刷新表格
  const handleRefresh = () => {
    getTableData()
  }

  // 处理表格分页变化
  const handleSizeChange = (newPageSize: number) => {
    pagination.pageSize = newPageSize
    getTableData()
  }

  const handleCurrentChange = (newCurrentPage: number) => {
    pagination.page = newCurrentPage
    getTableData()
  }

  // 显示导入对话框
  const showImportDialog = () => {
    importDialogVisible.value = true
    importForm.carrier_id = undefined
    importForm.batch_no = ''
    importForm.file = null
    fileList.value = []
    if (importFormRef.value) {
      importFormRef.value.resetFields()
    }
  }

  // 文件变化处理
  const handleFileChange: UploadProps['onChange'] = (file) => {
    importForm.file = file.raw as File
    if (importFormRef.value) {
      importFormRef.value.clearValidate('file')
    }
  }

  // 文件超出限制处理
  const handleExceed: UploadProps['onExceed'] = () => {
    ElMessage.warning('最多只能上传1个文件')
  }

  // 关闭导入对话框
  const handleImportDialogClose = () => {
    if (uploadRef.value) {
      uploadRef.value.clearFiles()
    }
    fileList.value = []
  }

  // 执行导入
  const handleImport = async () => {
    if (!importFormRef.value) return

    await importFormRef.value.validate(async (valid) => {
      if (valid) {
        if (!importForm.file) {
          ElMessage.warning('请选择上传文件')
          return
        }

        importLoading.value = true
        try {
          const res = await CardService.importIotCards(
            importForm.file,
            importForm.carrier_id!,
            importForm.batch_no || undefined
          )

          if (res.code === 0) {
            ElMessage.success('导入任务已创建，请到任务管理页面查看导入进度')
            importDialogVisible.value = false
            getTableData()
          }
        } catch (error) {
          console.error(error)
          ElMessage.error('导入失败，请重试')
        } finally {
          importLoading.value = false
        }
      }
    })
  }

  // 表格选择变化
  const handleSelectionChange = (selection: StandaloneIotCard[]) => {
    selectedCards.value = selection
  }

  // 显示批量分配对话框
  const showAllocateDialog = () => {
    if (selectedCards.value.length === 0) {
      ElMessage.warning('请先选择要分配的卡')
      return
    }
    allocateDialogVisible.value = true
    Object.assign(allocateForm, {
      selection_type: 'list',
      to_shop_id: undefined,
      iccids: selectedCards.value.map((card) => card.iccid),
      iccid_start: '',
      iccid_end: '',
      carrier_id: undefined,
      status: undefined,
      batch_no: '',
      remark: ''
    })
    if (allocateFormRef.value) {
      allocateFormRef.value.resetFields()
    }
  }

  // 显示批量回收对话框
  const showRecallDialog = () => {
    if (selectedCards.value.length === 0) {
      ElMessage.warning('请先选择要回收的卡')
      return
    }
    recallDialogVisible.value = true
    Object.assign(recallForm, {
      selection_type: 'list',
      from_shop_id: undefined,
      iccids: selectedCards.value.map((card) => card.iccid),
      iccid_start: '',
      iccid_end: '',
      carrier_id: undefined,
      batch_no: '',
      remark: ''
    })
    if (recallFormRef.value) {
      recallFormRef.value.resetFields()
    }
  }

  // 关闭批量分配对话框
  const handleAllocateDialogClose = () => {
    if (allocateFormRef.value) {
      allocateFormRef.value.resetFields()
    }
  }

  // 关闭批量回收对话框
  const handleRecallDialogClose = () => {
    if (recallFormRef.value) {
      recallFormRef.value.resetFields()
    }
  }

  // 执行批量分配
  const handleAllocate = async () => {
    if (!allocateFormRef.value) return

    await allocateFormRef.value.validate(async (valid) => {
      if (valid) {
        // 根据选卡方式构建请求参数
        const params: Partial<AllocateStandaloneCardsRequest> = {
          selection_type: allocateForm.selection_type!,
          to_shop_id: allocateForm.to_shop_id!,
          remark: allocateForm.remark
        }

        if (allocateForm.selection_type === 'list') {
          params.iccids = selectedCards.value.map((card) => card.iccid)
          if (params.iccids.length === 0) {
            ElMessage.warning('请先选择要分配的卡')
            return
          }
        } else if (allocateForm.selection_type === 'range') {
          params.iccid_start = allocateForm.iccid_start
          params.iccid_end = allocateForm.iccid_end
        } else if (allocateForm.selection_type === 'filter') {
          if (allocateForm.carrier_id) params.carrier_id = allocateForm.carrier_id
          if (allocateForm.status) params.status = allocateForm.status
          if (allocateForm.batch_no) params.batch_no = allocateForm.batch_no
        }

        allocateLoading.value = true
        try {
          const res = await CardService.allocateStandaloneCards(params)

          if (res.code === 0) {
            allocationResult.value = res.data
            resultTitle.value = '批量分配结果'
            allocateDialogVisible.value = false
            resultDialogVisible.value = true
            // 清空选择
            if (tableRef.value) {
              tableRef.value.clearSelection()
            }
            selectedCards.value = []
            // 刷新列表
            getTableData()
          }
        } catch (error) {
          console.error(error)
          ElMessage.error('批量分配失败，请重试')
        } finally {
          allocateLoading.value = false
        }
      }
    })
  }

  // 执行批量回收
  const handleRecall = async () => {
    if (!recallFormRef.value) return

    await recallFormRef.value.validate(async (valid) => {
      if (valid) {
        // 根据选卡方式构建请求参数
        const params: Partial<RecallStandaloneCardsRequest> = {
          selection_type: recallForm.selection_type!,
          from_shop_id: recallForm.from_shop_id!,
          remark: recallForm.remark
        }

        if (recallForm.selection_type === 'list') {
          params.iccids = selectedCards.value.map((card) => card.iccid)
          if (params.iccids.length === 0) {
            ElMessage.warning('请先选择要回收的卡')
            return
          }
        } else if (recallForm.selection_type === 'range') {
          params.iccid_start = recallForm.iccid_start
          params.iccid_end = recallForm.iccid_end
        } else if (recallForm.selection_type === 'filter') {
          if (recallForm.carrier_id) params.carrier_id = recallForm.carrier_id
          if (recallForm.batch_no) params.batch_no = recallForm.batch_no
        }

        recallLoading.value = true
        try {
          const res = await CardService.recallStandaloneCards(params)

          if (res.code === 0) {
            allocationResult.value = res.data
            resultTitle.value = '批量回收结果'
            recallDialogVisible.value = false
            resultDialogVisible.value = true
            // 清空选择
            if (tableRef.value) {
              tableRef.value.clearSelection()
            }
            selectedCards.value = []
            // 刷新列表
            getTableData()
          }
        } catch (error) {
          console.error(error)
          ElMessage.error('批量回收失败，请重试')
        } finally {
          recallLoading.value = false
        }
      }
    })
  }
</script>

<style lang="scss" scoped>
  .standalone-card-list-page {
    // Card list page styles
  }
</style>
