<template>
  <ElCard shadow="never" class="search-card">
    <template #header>
      <div class="card-header">
        <span>资产查询</span>
      </div>
    </template>
    <div class="iccid-search">
      <div class="iccid-input-wrapper">
        <ElInput
          v-model="searchIccid"
          placeholder="请输入虚拟号、ICCID、IMEI、SN或MSISDN"
          clearable
          style="width: 500px"
          @focus="iccidInputFocused = true"
          @blur="iccidInputFocused = false"
          @keyup.enter="handleSearch"
        />
        <!-- 放大显示区域 -->
        <Transition name="zoom-fade">
          <div v-if="iccidInputFocused && searchIccid" class="iccid-magnifier">
            <div class="magnifier-arrow"></div>
            <div class="magnifier-content">
              {{ formatIccidWithDashes(searchIccid) }}
            </div>
          </div>
        </Transition>
      </div>
      <ElButton type="primary" @click="handleSearch" :icon="Search" style="margin-left: 16px">
        查询
      </ElButton>

      <!-- 操作按钮组 -->
      <div v-if="hasCardInfo" class="operation-button-group">
        <ElButton @click="handleRefresh" type="primary" :icon="Refresh"> 刷新 </ElButton>
      </div>
    </div>
  </ElCard>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { useRoute } from 'vue-router'
  import { ElCard, ElInput, ElButton } from 'element-plus'
  import { Search, Refresh } from '@element-plus/icons-vue'
  import { useAssetFormatters } from '../composables/useAssetFormatters'

  // Use formatters
  const { formatIccidWithDashes } = useAssetFormatters()

  const route = useRoute()

  // Props
  interface Props {
    hasCardInfo?: boolean
  }

  withDefaults(defineProps<Props>(), {
    hasCardInfo: false
  })

  // Emits
  const emit = defineEmits<{
    search: [payload: { identifier: string }]
    refresh: []
  }>()

  // State
  const searchIccid = ref('')
  const iccidInputFocused = ref(false)

  // 从URL参数中获取初始值
  const initializeFromQuery = () => {
    const iccid = route.query.iccid as string
    const virtualNo = route.query.virtual_no as string
    const deviceNo = route.query.device_no as string

    const identifier = iccid || virtualNo || deviceNo
    if (identifier) {
      searchIccid.value = identifier
    }
  }

  // 初始化时从URL参数加载
  initializeFromQuery()

  // 暴露方法供父组件调用，用于更新搜索框值
  const updateSearchValue = (value: string) => {
    searchIccid.value = value
  }

  // Methods
  const handleSearch = () => {
    if (!searchIccid.value.trim()) {
      return
    }
    emit('search', { identifier: searchIccid.value.trim() })
  }

  const handleRefresh = () => {
    emit('refresh')
  }

  // 暴露给父组件
  defineExpose({
    updateSearchValue
  })
</script>

<style scoped lang="scss">
  .search-card {
    margin-bottom: 20px;
    overflow: visible;
    background: var(--el-bg-color, #fff);

    :deep(.el-card__header) {
      padding: 16px 20px;
      background: var(--el-fill-color-light);
      border-bottom: 1px solid var(--el-border-color-lighter);
    }

    :deep(.el-card__body) {
      padding: 16px 20px;
      overflow: visible;
    }

    .iccid-search {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: flex-start;

      .iccid-input-wrapper {
        position: relative;

        .iccid-magnifier {
          position: absolute;
          top: calc(100% + 12px);
          left: 0;
          z-index: 1000;
          white-space: nowrap;

          // 三角箭头 - 上边框样式
          .magnifier-arrow {
            position: absolute;
            top: -9px;
            left: 80px;
            width: 16px;
            height: 16px;
            background-color: var(--el-bg-color, #fff);
            border-top: 2px solid var(--el-color-primary);
            border-left: 2px solid var(--el-color-primary);
            transform: rotate(45deg);
          }

          // 内容区域
          .magnifier-content {
            padding: 16px 24px;
            font-family: 'Courier New', Consolas, monospace;
            font-size: 28px;
            font-weight: 600;
            line-height: 1.4;
            color: var(--el-text-color-primary);
            letter-spacing: 3px;
            background-color: var(--el-bg-color, #fff);
            border: 2px solid var(--el-color-primary);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
          }
        }
      }

      .operation-button-group {
        display: flex;
        gap: 12px;
        margin-left: auto;
      }
    }
  }

  // 放大效果的过渡动画
  .zoom-fade-enter-active,
  .zoom-fade-leave-active {
    transition: all 0.2s ease;
  }

  .zoom-fade-enter-from {
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
  }

  .zoom-fade-leave-to {
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
  }

  .zoom-fade-enter-to,
  .zoom-fade-leave-from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  @media (width <= 768px) {
    .search-card {
      top: 16px;
      margin-bottom: 16px;

      :deep(.el-card__header) {
        padding: 12px 16px;
      }

      :deep(.el-card__body) {
        padding: 12px 16px;
      }
    }
  }
</style>
