<template>
  <ElCard shadow="never" class="search-card">
    <template #header>
      <div class="card-header">
        <span>资产查询</span>
        <ElButton type="danger" @click="handleGoBack">返回上次搜索</ElButton>
      </div>
    </template>
    <div class="iccid-search">
      <div class="iccid-input-wrapper">
        <ElInput
          v-model="searchIccid"
          placeholder="请输入虚拟号、ICCID、IMEI、SN或MSISDN"
          clearable
          class="asset-search-input"
          @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 class="search-action-button" type="primary" @click="handleSearch" :icon="Search">
        查询
      </ElButton>

      <!-- 操作按钮组 -->
      <div v-if="hasCardInfo" class="operation-button-group">
        <ElButton
          v-permission="'asset_info:sync'"
          @click="handleRefresh"
          type="primary"
          :icon="Refresh"
          :disabled="refreshDisabled"
        >
          同步
        </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
    refreshDisabled?: boolean
  }

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

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

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

  // 从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) => {
    if (value && value !== searchIccid.value) {
      previousSearchValue.value = searchIccid.value
    }
    searchIccid.value = value
  }

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

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

  const handleGoBack = () => {
    if (previousSearchValue.value) {
      const temp = searchIccid.value
      searchIccid.value = previousSearchValue.value
      previousSearchValue.value = temp
      emit('search', { identifier: searchIccid.value.trim() })
    }
  }

  // 暴露给父组件
  defineExpose({
    updateSearchValue,
    handleGoBack
  })
</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);

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

    :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;
        flex: 1 1 360px;
        min-width: 240px;

        .asset-search-input {
          width: 100%;
        }

        .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 {
            max-width: min(720px, calc(100vw - 48px));
            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;
            overflow-wrap: anywhere;
            white-space: normal;
            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;
      }

      :deep(.el-card__header) .card-header {
        flex-direction: column;
        align-items: stretch;

        .el-button {
          width: 100%;
          margin-left: 0;
        }
      }

      .iccid-search {
        flex-direction: column;
        align-items: stretch;

        .iccid-input-wrapper {
          flex-basis: auto;
          width: 100%;
          min-width: 0;

          .iccid-magnifier {
            right: 0;
            left: 0;
            white-space: normal;

            .magnifier-arrow {
              left: 24px;
            }

            .magnifier-content {
              display: block;
              width: 100%;
              padding: 12px 14px;
              font-size: 18px;
              letter-spacing: 1px;
            }
          }
        }

        .search-action-button,
        .operation-button-group,
        .operation-button-group .el-button {
          width: 100%;
          margin-left: 0;
        }

        .operation-button-group {
          margin-left: 0;
        }
      }
    }
  }
</style>
