<template>
  <div class="smart-collar-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <div class="search-group">
        <a-input
          :value="searchValue"
          @input="updateSearchValue"
          placeholder="请输入项圈编号"
          class="search-input"
          @pressEnter="handleSearch"
        />
        <a-button type="primary" class="search-button" @click="handleSearch">
          <template #icon>
            <SearchOutlined />
          </template>
          搜索
        </a-button>
        <a-button class="search-button" @click="handleClearSearch" v-if="searchValue.trim()">
          清除
        </a-button>
      </div>
      <a-button @click="exportData" class="export-button">
        <template #icon>
          <ExportOutlined />
        </template>
        导出数据
      </a-button>
    </div>

    <!-- 统计卡片 -->
    <!-- <a-row :gutter="16" class="stats-row">
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="总数量"
            :value="stats.total"
            :value-style="{ color: '#1890ff' }"
          />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="正常工作"
            :value="stats.normal"
            :value-style="{ color: '#52c41a' }"
          />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="低电量"
            :value="stats.lowBattery"
            :value-style="{ color: '#faad14' }"
          />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="需维护"
            :value="stats.maintenance"
            :value-style="{ color: '#f5222d' }"
          />
        </a-card>
      </a-col>
    </a-row> -->

    <!-- 数据表格 -->
    <a-card title="项圈设备列表" class="table-card">
      <a-table
        :columns="columns"
        :data-source="collars"
        :loading="loading"
        :pagination="pagination"
        :row-class-name="getRowClassName"
        row-key="id"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <!-- 项圈编号 -->
          <template v-if="column.dataIndex === 'sn'">
            <span style="color: #1890ff; font-weight: 500;">{{ record.sn || '无编号' }}</span>
          </template>
          
          <!-- 设备电量% -->
          <template v-else-if="column.dataIndex === 'battery'">
            <div style="text-align: center;">
              <div style="font-weight: bold; font-size: 16px;">{{ record.battery }}</div>
            </div>
          </template>
          
          <!-- 设备信号 -->
          <template v-else-if="column.dataIndex === 'rsrp'">
            <div style="text-align: center;">
              <span style="font-weight: bold;">{{ record.rsrp || '-' }}</span>
            </div>
          </template>
          
          <!-- 设备温度/°C -->
          <template v-else-if="column.dataIndex === 'temperature'">
            <div style="text-align: center;">
              <span style="font-weight: bold; font-size: 14px;" :style="{ color: getTemperatureColor(record.temperature) }">
                {{ record.temperature }}
              </span>
            </div>
          </template>
          
          <!-- 绑带状态 -->
          <template v-else-if="column.dataIndex === 'bandge_status'">
            <div style="text-align: center;">
              <a-tag :color="getBandgeStatusColor(record.bandge_status)">
                {{ getBandgeStatusText(record.bandge_status) }}
              </a-tag>
            </div>
          </template>
          
          <!-- 当日运动量 -->
          <template v-else-if="column.dataIndex === 'steps'">
            <div style="text-align: center;">
              <span style="font-weight: bold;">{{ record.steps || 0 }}</span>
            </div>
          </template>
          
          <!-- 定位信息 -->
          <template v-else-if="column.dataIndex === 'location'">
            <div style="text-align: center;">
              <a-button type="link" size="small" @click="viewLocation(record)">
                <template #icon>
                  <EnvironmentOutlined />
                </template>
              </a-button>
            </div>
          </template>
          
          <!-- 更新数据部分/分 -->
          <template v-else-if="column.dataIndex === 'updateInterval'">
            <div style="text-align: center;">
              <span>{{ record.updateInterval || 60 }}</span>
            </div>
          </template>
          
          <!-- 数据最后更新时间 -->
          <template v-else-if="column.dataIndex === 'lastUpdate'">
            <div style="text-align: center;">
              <span style="font-size: 12px;">{{ record.lastUpdate }}</span>
            </div>
          </template>
          
          <!-- 未定信息 -->
          <template v-else-if="column.dataIndex === 'undefinedInfo'">
            <div style="text-align: center;">
              <a-tag color="green">{{ record.undefinedInfo || '已完成' }}</a-tag>
            </div>
          </template>
          
          <!-- 设备状态 -->
          <template v-else-if="column.dataIndex === 'deviceStatus'">
            <div style="text-align: center;">
              <a-tag color="green">{{ record.deviceStatus || '使用中' }}</a-tag>
            </div>
          </template>
          
          <!-- 操作 -->
          <template v-else-if="column.dataIndex === 'action'">
            <div style="display: flex; flex-wrap: wrap; gap: 2px;">
              <!-- <a-button type="link" size="small" style="color: #1890ff; padding: 0 4px;" @click="editDevice(record)">
                修改绑定
              </a-button> -->
              <a-button type="link" size="small" style="color: #1890ff; padding: 0 4px;" @click="clearData(record)">
                溯源二维码
              </a-button>
              <a-button type="link" size="small" style="color: #1890ff; padding: 0 4px;" @click="bindDevice(record)">
                绑定信息
              </a-button>
              <!-- <a-button type="link" size="small" style="color: #1890ff; padding: 0 4px;" @click="setDefault(record)">
                设置频次
              </a-button> -->
              <!-- <a-button type="link" size="small" style="color: #1890ff; padding: 0 4px;" @click="viewTrack(record)">
                日志
              </a-button>
              <a-button type="link" size="small" style="color: #1890ff; padding: 0 4px;" @click="viewTrack(record)">
                查看轨迹
              </a-button> -->
            </div>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 搜索结果详情 -->
    <a-card v-if="searchResult" title="搜索结果详情" class="search-result-card">
      <template #extra>
        <a-button type="link" @click="clearSearchResult">关闭</a-button>
      </template>
      
      <a-row :gutter="16">
        <a-col :span="12">
          <div class="result-section">
            <h4>设备基本信息</h4>
            <a-descriptions :column="1" size="small">
              <a-descriptions-item label="项圈编号">{{ searchResult.sn }}</a-descriptions-item>
              <a-descriptions-item label="设备电量">{{ searchResult.battery }}%</a-descriptions-item>
              <a-descriptions-item label="设备信号">{{ searchResult.rsrp }}</a-descriptions-item>
              <a-descriptions-item label="设备温度">{{ searchResult.temperature }}°C</a-descriptions-item>
              <a-descriptions-item label="绑带状态">
                <a-tag :color="getBandgeStatusColor(searchResult.bandge_status)">
                  {{ getBandgeStatusText(searchResult.bandge_status) }}
                </a-tag>
              </a-descriptions-item>
              <a-descriptions-item label="设备状态">
                <a-tag :color="getStatusColor(searchResult.status)">
                  {{ searchResult.status }}
                </a-tag>
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </a-col>
        
        <a-col :span="12">
          <div class="result-section">
            <h4>绑定状态检查</h4>
            <div v-if="searchResult.bindingInfo">
              <div v-if="searchResult.bindingInfo.isBound" class="binding-info">
                <a-alert
                  message="已绑定动物"
                  :description="`动物耳号: ${searchResult.bindingInfo.earTag || '未知'} | 动物类型: ${searchResult.bindingInfo.animalType || '未知'} | 品种: ${searchResult.bindingInfo.breed || '未知'}`"
                  type="success"
                  show-icon
                />
                <div style="margin-top: 12px;">
                  <a-button type="primary" size="small" @click="viewBindingDetails(searchResult)">
                    查看详细绑定信息
                  </a-button>
                </div>
              </div>
              <div v-else class="binding-info">
                <a-alert
                  message="未绑定动物"
                  description="该项圈设备尚未绑定任何动物"
                  type="warning"
                  show-icon
                />
                <div style="margin-top: 12px;">
                  <a-button type="default" size="small" @click="showAddModal">
                    添加绑定
                  </a-button>
                </div>
              </div>
            </div>
            <div v-else>
              <a-alert
                message="无法检查绑定状态"
                description="系统暂时无法获取绑定信息"
                type="error"
                show-icon
              />
            </div>
          </div>
        </a-col>
      </a-row>
      
      <a-row :gutter="16" style="margin-top: 16px;">
        <a-col :span="24">
          <div class="result-section">
            <h4>设备运行数据</h4>
            <a-descriptions :column="3" size="small">
              <a-descriptions-item label="当日运动量">{{ searchResult.steps || 0 }}</a-descriptions-item>
              <a-descriptions-item label="定位信息">{{ searchResult.location }}</a-descriptions-item>
              <a-descriptions-item label="更新频次">{{ searchResult.updateInterval }}分钟</a-descriptions-item>
              <a-descriptions-item label="最后更新时间">{{ searchResult.lastUpdate }}</a-descriptions-item>
              <a-descriptions-item label="佩戴状态">{{ searchResult.undefinedInfo }}</a-descriptions-item>
              <a-descriptions-item label="连接状态">{{ searchResult.deviceStatus }}</a-descriptions-item>
            </a-descriptions>
          </div>
        </a-col>
      </a-row>
    </a-card>

    <!-- 定位信息模态框 -->
    <a-modal
      :open="locationVisible"
      title="查看定位"
      :footer="null"
      width="90%"
      :style="{ top: '20px' }"
      @cancel="handleLocationCancel"
    >
      <div class="location-modal">
        <!-- 地图容器 -->
        <div class="map-container">
          <div id="locationMap" class="baidu-map"></div>
          
          <!-- 地图样式切换按钮 -->
          <div class="map-style-controls">
            <div 
              :class="['style-btn', { active: mapStyle === 'normal' }]"
              @click="switchMapStyle('normal')"
            >
              地图
            </div>
            <div 
              :class="['style-btn', { active: mapStyle === 'hybrid' }]"
              @click="switchMapStyle('hybrid')"
            >
              混合
            </div>
          </div>
        </div>
        
        <!-- 底部取消按钮 -->
        <div class="location-footer">
          <a-button class="cancel-btn" @click="handleLocationCancel">取消</a-button>
        </div>
      </div>
    </a-modal>

    <!-- 绑定信息模态框 -->
    <a-modal
      :open="bindInfoVisible"
      title="绑定信息"
      :footer="null"
      width="800px"
      @cancel="handleBindInfoCancel"
    >
      <div class="bind-info-modal">
        <!-- 未绑定提示 -->
        <div v-if="!bindInfoData.basicInfo?.earTag || bindInfoData.basicInfo?.earTag === '-'" class="unbound-notice">
          <a-alert
            message="该项圈尚未绑定动物"
            description="当前项圈编号未与任何动物建立绑定关系，如需绑定请联系管理员。"
            type="info"
            show-icon
            style="margin-bottom: 20px;"
          />
        </div>
        <!-- 标签页导航 -->
        <div class="tab-nav">
          <div 
            v-for="tab in tabs" 
            :key="tab.key"
            :class="['tab-item', { active: activeTab === tab.key }]"
            @click="activeTab = tab.key"
          >
            {{ tab.label }}
          </div>
        </div>
        
        <!-- 标签页内容 -->
        <div class="tab-content">
          <!-- 身份信息 -->
          <div v-if="activeTab === 'identity'" class="tab-panel">
            <!-- 基础信息 -->
            <div class="info-section">
              <div class="section-header">
                <span class="section-title">基础信息</span>
                <RightOutlined class="arrow-icon" />
              </div>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">项圈编号</span>
                  <span class="value">{{ bindInfoData.basicInfo?.collarNumber || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">品类</span>
                  <span class="value">{{ bindInfoData.basicInfo?.category || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">历史已产胎次</span>
                  <span class="value">{{ bindInfoData.basicInfo?.calvingCount || 0 }}</span>
                </div>
                <div class="info-item">
                  <span class="label">绑定动物耳号</span>
                  <span class="value">{{ bindInfoData.basicInfo?.earTag || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">动物类型</span>
                  <span class="value">{{ bindInfoData.basicInfo?.animalType || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">品种</span>
                  <span class="value">{{ bindInfoData.basicInfo?.breed || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">来源类型</span>
                  <span class="value">{{ bindInfoData.basicInfo?.sourceType || '-' }}</span>
                </div>
              </div>
            </div>
            
            <!-- 出生信息 -->
            <div class="info-section">
              <div class="section-header">
                <span class="section-title">出生信息</span>
                <RightOutlined class="arrow-icon" />
              </div>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">出生日期</span>
                  <span class="value">{{ bindInfoData.birthInfo?.birthDate || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">出生体重</span>
                  <span class="value">{{ bindInfoData.birthInfo?.birthWeight || '0.00' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">断奶体重</span>
                  <span class="value">{{ bindInfoData.birthInfo?.weaningWeight || '0.00' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">乳头数(右)</span>
                  <span class="value">{{ bindInfoData.birthInfo?.rightTeatCount || '' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">入场日期</span>
                  <span class="value">{{ bindInfoData.birthInfo?.entryDate || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">断奶日龄</span>
                  <span class="value">{{ bindInfoData.birthInfo?.weaningAge || 0 }}</span>
                </div>
                <div class="info-item">
                  <span class="label">乳头数(左)</span>
                  <span class="value">{{ bindInfoData.birthInfo?.leftTeatCount || '' }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 族谱信息 -->
          <div v-if="activeTab === 'pedigree'" class="tab-panel">
            <div class="info-section">
              <div class="section-header">
                <span class="section-title">族谱信息</span>
                <RightOutlined class="arrow-icon" />
              </div>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">父本编号</span>
                  <span class="value">{{ bindInfoData.pedigreeInfo?.fatherId || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">母本编号</span>
                  <span class="value">{{ bindInfoData.pedigreeInfo?.motherId || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">祖父编号</span>
                  <span class="value">{{ bindInfoData.pedigreeInfo?.grandfatherId || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">祖母编号</span>
                  <span class="value">{{ bindInfoData.pedigreeInfo?.grandmotherId || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">血统</span>
                  <span class="value">{{ bindInfoData.pedigreeInfo?.bloodline || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">世代</span>
                  <span class="value">{{ bindInfoData.pedigreeInfo?.generation || '-' }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 保险信息 -->
          <div v-if="activeTab === 'insurance'" class="tab-panel">
            <div class="info-section">
              <div class="section-header">
                <span class="section-title">保险信息</span>
                <RightOutlined class="arrow-icon" />
              </div>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">保单号</span>
                  <span class="value">{{ bindInfoData.insuranceInfo?.policyNumber || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">保险公司</span>
                  <span class="value">{{ bindInfoData.insuranceInfo?.insuranceCompany || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">保额</span>
                  <span class="value">{{ bindInfoData.insuranceInfo?.coverageAmount || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">保费</span>
                  <span class="value">{{ bindInfoData.insuranceInfo?.premium || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">生效日期</span>
                  <span class="value">{{ bindInfoData.insuranceInfo?.startDate || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">到期日期</span>
                  <span class="value">{{ bindInfoData.insuranceInfo?.endDate || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">状态</span>
                  <span class="value">{{ bindInfoData.insuranceInfo?.status || '-' }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 贷款信息 -->
          <div v-if="activeTab === 'loan'" class="tab-panel">
            <div class="info-section">
              <div class="section-header">
                <span class="section-title">贷款信息</span>
                <RightOutlined class="arrow-icon" />
              </div>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">贷款编号</span>
                  <span class="value">{{ bindInfoData.loanInfo?.loanNumber || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">银行名称</span>
                  <span class="value">{{ bindInfoData.loanInfo?.bankName || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">贷款金额</span>
                  <span class="value">{{ bindInfoData.loanInfo?.loanAmount || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">利率</span>
                  <span class="value">{{ bindInfoData.loanInfo?.interestRate || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">放款日期</span>
                  <span class="value">{{ bindInfoData.loanInfo?.loanDate || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">到期日期</span>
                  <span class="value">{{ bindInfoData.loanInfo?.maturityDate || '-' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">状态</span>
                  <span class="value">{{ bindInfoData.loanInfo?.status || '-' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 底部按钮 -->
        <div class="modal-footer">
          <a-button @click="handleBindInfoCancel">取消</a-button>
        </div>
      </div>
    </a-modal>

    <!-- 溯源二维码模态框 -->
    <a-modal
      :open="qrcodeVisible"
      title="溯源二维码"
      :footer="null"
      width="450px"
      @cancel="handleQRCodeCancel"
    >
      <div class="qrcode-modal-content">
        <div class="qrcode-container">
          <img v-if="qrcodeUrl" :src="qrcodeUrl" alt="溯源二维码" class="qrcode-image" />
        </div>
        <div class="device-sn-display">
          {{ currentDeviceSn }}
        </div>
      </div>
    </a-modal>

    <!-- 添加/编辑模态框 -->
    <a-modal
      :open="modalVisible"
      :title="isEdit ? '编辑项圈' : '添加项圈'"
      @ok="handleSubmit"
      @cancel="handleCancel"
      :confirm-loading="submitLoading"
    >
      <a-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        layout="vertical"
      >
        <a-form-item label="设备编号" name="deviceId">
          <a-input v-model="formData.deviceId" placeholder="请输入设备编号" />
        </a-form-item>
        <a-form-item label="动物ID" name="animalId">
          <a-select v-model="formData.animalId" placeholder="请选择关联动物">
            <a-select-option value="1">动物001</a-select-option>
            <a-select-option value="2">动物002</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="设备型号" name="model">
          <a-input v-model="formData.model" placeholder="请输入设备型号" />
        </a-form-item>
        <a-form-item label="功能配置" name="features">
          <a-checkbox-group v-model="formData.features">
            <a-checkbox value="gps">GPS定位</a-checkbox>
            <a-checkbox value="health">健康监测</a-checkbox>
            <a-checkbox value="behavior">行为分析</a-checkbox>
            <a-checkbox value="alert">智能预警</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item label="数据上传频率" name="uploadFreq">
          <a-select v-model="formData.uploadFreq" placeholder="请选择上传频率">
            <a-select-option value="realtime">实时上传</a-select-option>
            <a-select-option value="1min">每分钟</a-select-option>
            <a-select-option value="5min">每5分钟</a-select-option>
            <a-select-option value="15min">每15分钟</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="安装日期" name="installDate">
          <a-date-picker v-model="formData.installDate" style="width: 100%" />
        </a-form-item>
        <a-form-item label="备注" name="notes">
          <a-textarea v-model="formData.notes" placeholder="请输入备注信息" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { message } from 'ant-design-vue'
import { PlusOutlined, ReloadOutlined, ExportOutlined, EnvironmentOutlined, CrownOutlined, RightOutlined, SearchOutlined } from '@ant-design/icons-vue'
import { api, directApi } from '../utils/api'
import { ExportUtils } from '../utils/exportUtils'
import { loadBMapScript, createMap } from '@/utils/mapService'
import QRCode from 'qrcode'

// 响应式数据
const collars = ref([])
const loading = ref(false)
const modalVisible = ref(false)
const submitLoading = ref(false)
const isEdit = ref(false)
const formRef = ref()
const autoRefresh = ref(true)
const refreshInterval = ref(null)

// 绑定信息相关数据
const bindInfoVisible = ref(false)
const activeTab = ref('identity')
const bindInfoData = ref({})
const currentCollarNumber = ref('')

// 搜索相关数据
const searchValue = ref('')
const searchResult = ref(null)
const searchLoading = ref(false)
const highlightedCollarId = ref(null) // 用于高亮显示搜索到的项圈

// 定位信息相关数据
const locationVisible = ref(false)
const mapStyle = ref('normal')
const currentLocation = ref(null)
const baiduMap = ref(null)
const locationMarker = ref(null)

// 二维码相关数据
const qrcodeVisible = ref(false)
const qrcodeUrl = ref('')
const currentDeviceSn = ref('')

// 标签页配置
const tabs = [
  { key: 'identity', label: '身份信息' },
  { key: 'pedigree', label: '族谱信息' },
  { key: 'insurance', label: '保险信息' },
  { key: 'loan', label: '贷款信息' }
]

// 统计数据
const stats = reactive({
  total: 0,
  normal: 0,
  lowBattery: 0,
  maintenance: 0
})

// 表格配置 - 优化布局适应屏幕宽度，去除横向滚动
const columns = [
  {
    title: '项圈编号',
    dataIndex: 'sn',
    key: 'sn',
    width: '8%',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '设备电量%',
    dataIndex: 'battery',
    key: 'battery',
    width: '6%',
    align: 'center',
  },
  {
    title: '设备信号',
    dataIndex: 'rsrp',
    key: 'rsrp',
    width: '6%',
    align: 'center',
  },
  {
    title: '设备温度/°C',
    dataIndex: 'temperature',
    key: 'temperature',
    width: '8%',
    align: 'center',
  },
  {
    title: '绑带状态',
    dataIndex: 'bandge_status',
    key: 'bandge_status',
    width: '7%',
    align: 'center',
  },
  {
    title: '当日运动量',
    dataIndex: 'steps',
    key: 'steps',
    width: '8%',
    align: 'center',
  },
  {
    title: '定位信息',
    dataIndex: 'location',
    key: 'location',
    width: '6%',
    align: 'center',
  },
  {
    title: '更新数据频次(分钟/分)',
    dataIndex: 'updateInterval',
    key: 'updateInterval',
    width: '9%',
    align: 'center',
  },
  {
    title: '数据最后更新时间',
    dataIndex: 'lastUpdate',
    key: 'lastUpdate',
    width: '12%',
    align: 'center',
  },
  {
    title: '绑定信息',
    dataIndex: 'undefinedInfo',
    key: 'undefinedInfo',
    width: '6%',
    align: 'center',
  },
  {
    title: '设备状态',
    dataIndex: 'deviceStatus',
    key: 'deviceStatus',
    width: '6%',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: '18%',
  }
]

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
})

// 表单数据
const formData = reactive({
  id: null,
  deviceId: '',
  animalId: '',
  model: '',
  features: [],
  uploadFreq: '',
  installDate: null,
  notes: ''
})

// 表单验证规则
const rules = {
  deviceId: [
    { required: true, message: '请输入设备编号', trigger: 'blur' }
  ],
  animalId: [
    { required: true, message: '请选择关联动物', trigger: 'change' }
  ],
  model: [
    { required: true, message: '请输入设备型号', trigger: 'blur' }
  ],
  uploadFreq: [
    { required: true, message: '请选择上传频率', trigger: 'change' }
  ]
}

// 获取状态颜色
const getStatusColor = (status) => {
  const colors = {
    '在线': 'green',
    '离线': 'red',
    '报警': 'orange',
    '维护': 'blue',
    'normal': 'green',
    'lowBattery': 'orange',
    'maintenance': 'red'
  }
  return colors[status] || 'default'
}

// 获取状态文本
const getStatusText = (status) => {
  // 数据库返回的状态已经是中文，直接返回
  return status || '未知'
}

// 获取电池颜色
const getBatteryColor = (battery) => {
  if (battery > 50) return '#52c41a'
  if (battery > 20) return '#faad14'
  return '#f5222d'
}

// 获取体温颜色
const getTemperatureColor = (temperature) => {
  if (temperature >= 38.0 && temperature <= 39.5) return '#52c41a'
  if (temperature > 39.5 || temperature < 38.0) return '#faad14'
  return '#f5222d'
}

// 获取绑带状态文本
const getBandgeStatusText = (status) => {
  const statusMap = {
    0: '断开',
    1: '连接',
    2: '松动',
    3: '脱落'
  }
  return statusMap[status] || '未知'
}

// 获取绑带状态颜色
const getBandgeStatusColor = (status) => {
  const colorMap = {
    0: 'red',      // 断开
    1: 'green',    // 连接
    2: 'orange',   // 松动
    3: 'red'       // 脱落
  }
  return colorMap[status] || 'default'
}

// 获取数据 - 从MySQL数据库iot_xq_client表获取真实数据
const fetchData = async (showMessage = false) => {
  try {
    loading.value = true
    // 清空现有数据，强制刷新
    collars.value = []
    
    // 构建查询参数
    const params = new URLSearchParams({
      page: pagination.current.toString(),
      limit: pagination.pageSize.toString(),
      _t: Date.now().toString(), // 防止缓存
      refresh: 'true'
    })
    
    // 如果有搜索条件，添加到参数中
    if (searchValue.value.trim()) {
      params.append('search', searchValue.value.trim())
      console.log('搜索条件:', searchValue.value.trim())
    }
    
    // 调用真实API获取智能项圈数据
    const response = await api.get(`/smart-devices/collars?${params}`)
    
    const result = response
    
    if (result.success) {
      // 更新设备列表数据
      collars.value = result.data || []
      pagination.total = result.total || 0
      
      // 调试信息 - 检查数据是否正确获取
      console.log('🔍 前端数据调试:')
      console.log('API返回数据条数:', result.data?.length)
      console.log('第一条数据:', result.data?.[0])
      console.log('第一条数据的sn字段:', result.data?.[0]?.sn)
      console.log('第一条数据的battery字段:', result.data?.[0]?.battery)
      
      // 更新统计数据
      if (result.stats) {
        stats.total = result.stats.total || 0
        stats.normal = result.stats.normal || 0
        stats.lowBattery = result.stats.lowBattery || 0
        stats.maintenance = result.stats.maintenance || 0
      } else {
        // 如果没有统计数据，则计算
        stats.total = collars.value.length
        stats.normal = collars.value.filter(item => item.status === '在线').length
        stats.lowBattery = collars.value.filter(item => item.battery < 20).length
        stats.maintenance = collars.value.filter(item => item.status === '维护' || item.status === '离线').length
      }
      
      if (showMessage) {
        if (searchValue.value.trim()) {
          message.success(`搜索完成，找到 ${result.data.length} 条记录`)
        } else {
          message.success(`数据已更新，共加载 ${collars.value.length} 条设备数据`)
        }
      }
      
      console.log(`数据更新完成: 总数=${stats.total}, 在线=${stats.normal}, 离线=${stats.total - stats.normal}`)
      
    } else {
      throw new Error(result.message || '获取数据失败')
    }
    
  } catch (error) {
    console.error('获取数据失败:', error)
    if (showMessage) {
      message.error('获取数据失败: ' + error.message)
    }
    
    // 如果API失败，显示空数据
    collars.value = []
    pagination.total = 0
    stats.total = 0
    stats.normal = 0
    stats.lowBattery = 0
    stats.maintenance = 0
  } finally {
    loading.value = false
  }
}

// 刷新数据
const refreshData = () => {
  fetchData(true)
}

// 自动刷新功能
const startAutoRefresh = () => {
  if (refreshInterval.value) {
    clearInterval(refreshInterval.value)
  }
  
  if (autoRefresh.value) {
    refreshInterval.value = setInterval(() => {
      fetchData(false) // 自动刷新时不显示成功消息
    }, 30000) // 每30秒自动刷新一次
    console.log('自动刷新已启动，每30秒更新一次数据')
  }
}

// 停止自动刷新
const stopAutoRefresh = () => {
  if (refreshInterval.value) {
    clearInterval(refreshInterval.value)
    refreshInterval.value = null
    console.log('自动刷新已停止')
  }
}

// 切换自动刷新状态
const toggleAutoRefresh = () => {
  autoRefresh.value = !autoRefresh.value
  if (autoRefresh.value) {
    startAutoRefresh()
    message.success('自动刷新已开启')
  } else {
    stopAutoRefresh()
    message.info('自动刷新已关闭')
  }
}

// 导出数据
const exportData = async () => {
  try {
    if (!collars.value || collars.value.length === 0) {
      message.warning('没有数据可导出')
      return
    }
    
    message.loading('正在导出数据...', 0)
    
    const result = ExportUtils.exportDeviceData(collars.value, 'collar')
    
    if (result.success) {
      message.destroy()
      message.success(`导出成功！文件：${result.filename}`)
    } else {
      message.destroy()
      message.error(result.message)
    }
  } catch (error) {
    message.destroy()
    console.error('导出失败:', error)
    message.error('导出失败，请重试')
  }
}

// 显示添加模态框
const showAddModal = () => {
  isEdit.value = false
  resetForm()
  modalVisible.value = true
}

// 编辑项圈
const editCollar = (record) => {
  isEdit.value = true
  Object.assign(formData, {
    ...record,
    features: ['gps', 'health'], // 模拟功能配置
    uploadFreq: 'realtime',
    installDate: null
  })
  modalVisible.value = true
}

// 操作函数 - 根据图片中的操作按钮
const editDevice = (record) => {
  message.info(`修改设备 ${record.deviceId}`)
}

// 显示溯源二维码
const clearData = async (record) => {
  try {
    const deviceSn = record.sn
    if (!deviceSn) {
      message.warning('设备编号不存在')
      return
    }
    
    currentDeviceSn.value = deviceSn
    const traceUrl = `https://farm.aiotagro.com/source/source-index.html?device_sn=${deviceSn}`
    
    // 生成二维码
    const qrCodeDataUrl = await QRCode.toDataURL(traceUrl, {
      width: 250,
      margin: 2
    })
    
    qrcodeUrl.value = qrCodeDataUrl
    qrcodeVisible.value = true
  } catch (error) {
    console.error('生成二维码失败:', error)
    message.error('生成二维码失败，请重试')
  }
}

// 搜索项圈
// 更新搜索值
const updateSearchValue = (e) => {
  searchValue.value = e.target.value
}

// 搜索功能
const handleSearch = () => {
  console.log('执行搜索，当前搜索值:', searchValue.value)
  pagination.current = 1
  fetchData(true)
}

// 清除搜索
const handleClearSearch = () => {
  searchValue.value = ''
  pagination.current = 1
  fetchData(true)
}

// 清除搜索结果
const clearSearchResult = () => {
  searchResult.value = null
  highlightedCollarId.value = null // 清除高亮状态
}

// 滚动到搜索结果
const scrollToSearchResult = (collarId) => {
  // 查找对应的表格行
  const tableRow = document.querySelector(`[data-row-key="${collarId}"]`)
  if (tableRow) {
    // 滚动到该行
    tableRow.scrollIntoView({ 
      behavior: 'smooth', 
      block: 'center' 
    })
    
    // 添加临时高亮效果
    tableRow.style.backgroundColor = '#fff7e6'
    tableRow.style.border = '2px solid #ffa940'
    
    // 3秒后移除高亮效果
    setTimeout(() => {
      tableRow.style.backgroundColor = ''
      tableRow.style.border = ''
    }, 3000)
  }
}

// 查看绑定详情
const viewBindingDetails = async (record) => {
  try {
    currentCollarNumber.value = record.sn
    bindInfoVisible.value = true
    
    // 获取绑定信息
    const bindInfo = await getBindInfo(record.sn)
    bindInfoData.value = bindInfo
    
    message.success('绑定信息加载成功')
  } catch (error) {
    console.error('获取绑定信息失败:', error)
    
    // 如果是未绑定动物的情况，显示友好提示并保持模态框打开
    if (error.message.includes('未绑定动物')) {
      message.warning('该项圈尚未绑定动物')
      // 设置空的绑定信息，让模态框显示"未绑定"状态
      bindInfoData.value = {
        basicInfo: {
          collarNumber: record.sn,
          category: '-',
          calvingCount: 0,
          earTag: '-',
          animalType: '-',
          breed: '-',
          sourceType: '-'
        },
        birthInfo: {
          birthDate: '-',
          birthWeight: '0.00',
          weaningWeight: '0.00',
          rightTeatCount: '',
          entryDate: '-',
          weaningAge: 0,
          leftTeatCount: ''
        },
        pedigreeInfo: {
          fatherId: '-',
          motherId: '-',
          grandfatherId: '-',
          grandmotherId: '-',
          bloodline: '-',
          generation: '-'
        },
        insuranceInfo: {
          policyNumber: '-',
          insuranceCompany: '-',
          coverageAmount: '-',
          premium: '-',
          startDate: '-',
          endDate: '-',
          status: '-'
        },
        loanInfo: {
          loanNumber: '-',
          bankName: '-',
          loanAmount: '-',
          interestRate: '-',
          loanDate: '-',
          maturityDate: '-',
          status: '-'
        }
      }
    } else {
      message.error('获取绑定信息失败: ' + error.message)
      bindInfoVisible.value = false
    }
  }
}

// 获取绑定信息
const getBindInfo = async (collarNumber) => {
  try {
    const response = await api.get(`/animals/binding-info/${collarNumber}`)
    
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error('该项圈未绑定动物，暂无绑定信息')
      }
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    
    const result = await response.json()
    
    if (result.success) {
      return result.data
    } else {
      // 如果是未找到绑定信息的情况，抛出特定的错误
      if (result.message && result.message.includes('未找到')) {
        throw new Error('该项圈未绑定动物，暂无绑定信息')
      }
      throw new Error(result.message || '获取绑定信息失败')
    }
  } catch (error) {
    console.error('获取绑定信息失败:', error)
    throw error
  }
}

const bindDevice = async (record) => {
  try {
    currentCollarNumber.value = record.sn
    bindInfoVisible.value = true
    
    // 获取绑定信息
    const bindInfo = await getBindInfo(record.sn)
    bindInfoData.value = bindInfo
    
    message.success('绑定信息加载成功')
  } catch (error) {
    console.error('获取绑定信息失败:', error)
    
    // 如果是未绑定动物的情况，显示友好提示并保持模态框打开
    if (error.message.includes('未绑定动物')) {
      message.warning('该项圈尚未绑定动物')
      // 设置空的绑定信息，让模态框显示"未绑定"状态
      bindInfoData.value = {
        basicInfo: {
          collarNumber: record.sn,
          category: '-',
          calvingCount: 0,
          earTag: '-',
          animalType: '-',
          breed: '-',
          sourceType: '-'
        },
        birthInfo: {
          birthDate: '-',
          birthWeight: '0.00',
          weaningWeight: '0.00',
          rightTeatCount: '',
          entryDate: '-',
          weaningAge: 0,
          leftTeatCount: ''
        },
        pedigreeInfo: {
          fatherId: '-',
          motherId: '-',
          grandfatherId: '-',
          grandmotherId: '-',
          bloodline: '-',
          generation: '-'
        },
        insuranceInfo: {
          policyNumber: '-',
          insuranceCompany: '-',
          coverageAmount: '-',
          premium: '-',
          startDate: '-',
          endDate: '-',
          status: '-'
        },
        loanInfo: {
          loanNumber: '-',
          bankName: '-',
          loanAmount: '-',
          interestRate: '-',
          loanDate: '-',
          maturityDate: '-',
          status: '-'
        }
      }
    } else {
      message.error('获取绑定信息失败: ' + error.message)
      bindInfoVisible.value = false
    }
  }
}

const setDefault = (record) => {
  message.info(`设置设备 ${record.deviceId} 为默认`)
}

const viewTrack = (record) => {
  message.info(`查看设备 ${record.deviceId} 的轨迹`)
}

const viewLocation = (record) => {
  if (record.longitude && record.latitude) {
    currentLocation.value = {
      longitude: record.longitude,
      latitude: record.latitude,
      lastUpdate: record.lastUpdate || new Date().toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }).replace(/\//g, '-')
    }
    locationVisible.value = true
    
    // 延迟初始化地图，确保DOM已渲染
    setTimeout(() => {
      initBaiduMap()
    }, 100)
  } else {
    message.warning('该设备暂无定位信息')
  }
}

// 保留原有函数
const viewDetail = (record) => {
  message.info(`查看 ${record.deviceId} 的详细信息`)
}

const viewMap = (record) => {
  message.info(`在地图上查看 ${record.deviceId} 的位置`)
}

// 删除项圈
const deleteCollar = async (id) => {
  try {
    message.success('删除成功')
    fetchData()
  } catch (error) {
    console.error('删除失败:', error)
    message.error('删除失败')
  }
}

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    submitLoading.value = true
    
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    message.success(isEdit.value ? '更新成功' : '创建成功')
    modalVisible.value = false
    fetchData()
  } catch (error) {
    console.error('提交失败:', error)
    message.error('操作失败')
  } finally {
    submitLoading.value = false
  }
}

// 取消操作
const handleCancel = () => {
  modalVisible.value = false
  resetForm()
}

// 取消绑定信息
const handleBindInfoCancel = () => {
  bindInfoVisible.value = false
  activeTab.value = 'identity'
  bindInfoData.value = {}
  currentCollarNumber.value = ''
}

// 取消定位信息
const handleLocationCancel = () => {
  locationVisible.value = false
  currentLocation.value = null
  if (baiduMap.value) {
    baiduMap.value = null
  }
  if (locationMarker.value) {
    locationMarker.value = null
  }
}

// 关闭二维码模态框
const handleQRCodeCancel = () => {
  qrcodeVisible.value = false
  qrcodeUrl.value = ''
  currentDeviceSn.value = ''
}

// 初始化百度地图
const initBaiduMap = async () => {
  if (!currentLocation.value) return
  
  try {
    // 确保百度地图API已加载
    await loadBMapScript()
    
    // 获取地图容器
    const mapContainer = document.getElementById('locationMap')
    if (!mapContainer) {
      message.error('地图容器不存在')
      return
    }
    
    // 创建地图实例
    const map = await createMap(mapContainer, {
      center: new window.BMap.Point(currentLocation.value.longitude, currentLocation.value.latitude),
      zoom: 15
    })
    
    baiduMap.value = map
    
    // 添加设备位置标记
    const point = new window.BMap.Point(currentLocation.value.longitude, currentLocation.value.latitude)
    const marker = new window.BMap.Marker(point)
    map.addOverlay(marker)
    locationMarker.value = marker
    
    // 创建信息窗口
    const infoWindow = new window.BMap.InfoWindow(`
      <div style="padding: 10px; font-size: 14px;">
        <div style="font-weight: bold; margin-bottom: 5px;">设备位置</div>
        <div>经度: ${currentLocation.value.longitude}</div>
        <div>纬度: ${currentLocation.value.latitude}</div>
        <div style="margin-top: 5px; color: #666;">
          最后定位时间: ${currentLocation.value.lastUpdate}
        </div>
      </div>
    `, {
      width: 200,
      height: 120
    })
    
    // 点击标记显示信息窗口
    marker.addEventListener('click', () => {
      map.openInfoWindow(infoWindow, point)
    })
    
    // 启用地图控件
    map.addControl(new window.BMap.NavigationControl())
    map.addControl(new window.BMap.ScaleControl())
    map.addControl(new window.BMap.OverviewMapControl())
    map.addControl(new window.BMap.MapTypeControl())
    
    // 启用滚轮缩放
    map.enableScrollWheelZoom(true)
    
    // 设置地图样式
    switchMapStyle(mapStyle.value)
    
    console.log('定位地图初始化成功')
    
  } catch (error) {
    console.error('初始化百度地图失败:', error)
    message.error('地图初始化失败: ' + error.message)
  }
}

// 切换地图样式
const switchMapStyle = (style) => {
  mapStyle.value = style
  
  if (!baiduMap.value) return
  
  try {
    if (style === 'normal') {
      // 普通地图
      baiduMap.value.setMapType(window.BMAP_NORMAL_MAP)
    } else if (style === 'hybrid') {
      // 混合地图（卫星图+路网）
      baiduMap.value.setMapType(window.BMAP_HYBRID_MAP)
    }
  } catch (error) {
    console.error('切换地图样式失败:', error)
  }
}

// 重置表单
const resetForm = () => {
  Object.assign(formData, {
    id: null,
    deviceId: '',
    animalId: '',
    model: '',
    features: [],
    uploadFreq: '',
    installDate: null,
    notes: ''
  })
  formRef.value?.resetFields()
}

// 获取表格行样式类名
const getRowClassName = (record) => {
  if (highlightedCollarId.value && record.id === highlightedCollarId.value) {
    return 'highlighted-row'
  }
  return ''
}

// 表格变化处理
const handleTableChange = (pag) => {
  pagination.current = pag.current
  pagination.pageSize = pag.pageSize
  fetchData()
}

// 组件挂载时获取数据并启动自动刷新
onMounted(() => {
  fetchData(true)
  startAutoRefresh()
})

// 组件卸载时清理定时器
onUnmounted(() => {
  stopAutoRefresh()
})
</script>

<style scoped>
.smart-collar-container {
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #1890ff;
  display: flex;
  align-items: center;
}

.page-header p {
  color: #666;
  margin: 0;
}

.action-bar {
  margin-bottom: 16px;
}

.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 16px;
  background: #fafafa;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
}

.search-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input {
  width: 300px;
}

.search-button {
  margin-left: 0;
}

.export-button {
  margin-left: 16px;
}

.search-result-card {
  margin-top: 16px;
}

.result-section {
  margin-bottom: 16px;
}

.result-section h4 {
  margin-bottom: 12px;
  color: #1890ff;
  font-size: 14px;
  font-weight: 600;
}

.binding-info {
  margin-bottom: 12px;
}

/* 高亮搜索结果行 */
:deep(.highlighted-row) {
  background-color: #fff7e6 !important;
  border: 2px solid #ffa940 !important;
  animation: highlight-pulse 2s ease-in-out;
}

@keyframes highlight-pulse {
  0% {
    background-color: #fff7e6;
    transform: scale(1);
  }
  50% {
    background-color: #fff2cc;
    transform: scale(1.01);
  }
  100% {
    background-color: #fff7e6;
    transform: scale(1);
  }
}

/* 搜索结果提示样式 */
.search-result-highlight {
  position: relative;
}

.search-result-highlight::before {
  content: "🔍 搜索结果";
  position: absolute;
  top: -8px;
  right: -8px;
  background: #52c41a;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 10;
}

.stats-row {
  margin-bottom: 24px;
}

.table-card {
  margin-top: 16px;
}

/* 表格样式优化 */
.table-card :deep(.ant-table) {
  font-size: 12px;
}

.table-card :deep(.ant-table-thead > tr > th) {
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.table-card :deep(.ant-table-tbody > tr > td) {
  padding: 6px 4px;
  font-size: 12px;
}

.table-card :deep(.ant-btn-link) {
  font-size: 11px;
  height: auto;
  line-height: 1.2;
}

/* 确保表格不会超出容器 */
.table-card :deep(.ant-table-wrapper) {
  overflow: hidden;
}

.table-card :deep(.ant-table-container) {
  overflow-x: hidden;
}

/* 定位信息模态框样式 */
.location-modal {
  height: 80vh;
  display: flex;
  flex-direction: column;
}

.map-container {
  flex: 1;
  position: relative;
  min-height: 500px;
}

.baidu-map {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.map-style-controls {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.style-btn {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  border: 1px solid #d9d9d9;
  background: white;
  transition: all 0.3s;
}

.style-btn:hover {
  color: #1890ff;
  border-color: #1890ff;
}

.style-btn.active {
  color: #fff;
  background-color: #1890ff;
  border-color: #1890ff;
}

.location-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
  margin-top: 16px;
}

.cancel-btn {
  background-color: #f5f5f5;
  border-color: #d9d9d9;
  color: #666;
}

.cancel-btn:hover {
  background-color: #e6e6e6;
  border-color: #bfbfbf;
  color: #333;
}

/* 绑定信息模态框样式 */
.bind-info-modal .tab-nav {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.bind-info-modal .tab-nav .tab-item {
  padding: 12px 24px;
  cursor: pointer;
  color: #666;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}

.bind-info-modal .tab-nav .tab-item:hover {
  color: #1890ff;
}

.bind-info-modal .tab-nav .tab-item.active {
  color: #fff;
  background-color: #52c41a;
  border-bottom-color: #52c41a;
}

.bind-info-modal .tab-content {
  min-height: 400px;
}

.bind-info-modal .tab-panel .info-section {
  margin-bottom: 24px;
}

.bind-info-modal .tab-panel .info-section .section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  cursor: pointer;
}

.bind-info-modal .tab-panel .info-section .section-header .section-title {
  font-weight: bold;
  font-size: 16px;
  color: #333;
  margin-right: 8px;
}

.bind-info-modal .tab-panel .info-section .section-header .arrow-icon {
  color: #666;
  font-size: 12px;
}

.bind-info-modal .tab-panel .info-section .info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

.bind-info-modal .tab-panel .info-section .info-grid .info-item {
  display: flex;
  align-items: center;
}

.bind-info-modal .tab-panel .info-section .info-grid .info-item .label {
  min-width: 120px;
  color: #666;
  font-size: 14px;
  margin-right: 12px;
}

.bind-info-modal .tab-panel .info-section .info-grid .info-item .value {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.bind-info-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
  margin-top: 20px;
}

/* 二维码模态框样式 */
.qrcode-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.qrcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.qrcode-image {
  width: 250px;
  height: 250px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.device-sn-display {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  text-align: center;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
  width: 100%;
}
</style>
