<template>
  <div class="app-container" v-loading="loading" >
    <div v-if="deviceData">
      <el-card class="device-info-card">
        <!-- 设备基本信息展示区 -->
        <div class="device-info-container">
          <div class="device-header">
            <!-- 主要信息 -->
            <div class="device-title">
              <i class="el-icon-monitor"></i>
              <span class="device-name">{{deviceData.deviceName | defaultValue}}</span>
              <dot-status :active="deviceData.onlineStatus === DeviceOnlineStatus.ONLINE" show-text/>
              <dot-status :active="isOpen" show-text active-text="已开启" inactive-text="已关闭"/>
              <dot-status :active="deviceData.status === DeviceStatus.FREE" show-text active-text="空闲" inactive-text="使用中"/>
              <span class="last-online-time">
                <i class="el-icon-time"></i>
                最后在线:
                {{deviceData.lastOnlineTime | defaultValue}}
              </span>
            </div>
            
            <!-- 操作按钮组 -->
            <el-row class="device-actions">
              <el-button size="small" plain icon="el-icon-plus" @click="handleAddTime">增加时长</el-button>
              <el-button size="small" plain icon="el-icon-plus" @click="handleAddEle" v-if="deviceData.modelTags.includes(ModelTag.ELE)">增加电量</el-button>
              <el-button size="small" plain icon="el-icon-refresh" @click="handleReset">时长归零</el-button>
              <el-button size="small" plain icon="el-icon-refresh" @click="handleResetEle" v-if="deviceData.modelTags.includes(ModelTag.ELE)">电量归零</el-button>
              <el-button size="small" plain type="warning" icon="el-icon-switch-button" v-if="!isOpen" @click="handleSwitch(true)">强制开启</el-button>
              <el-button size="small" plain type="warning" icon="el-icon-switch-button" v-if="isOpen" @click="handleSwitch(false)">强制关闭</el-button>
              <el-button size="small" plain icon="el-icon-refresh" @click="refreshIot(deviceId, true, DeviceOnlineType.COMMAND)">刷新设备信息</el-button>
              <el-popover
                placement="left"
                width="180"
                trigger="click">
                <div class="qr-code-box">
                  <qr-code :text="qrCodeText(deviceData)" :width="150" :height="150" />
                  <div>{{deviceData.deviceNo | defaultValue}}</div>
                </div>
                <el-button size="small" slot="reference" type="primary" icon="el-icon-picture" style="margin-left: 0.5em">设备二维码</el-button>
              </el-popover>
            </el-row>
          </div>
          
          <!-- 次要信息 -->
          <div class="device-info">
            <div class="info-item">
              <i class="el-icon-document"></i>  
              <span class="label">SN:</span>
              <span>{{deviceData.deviceNo | defaultValue}}</span>
            </div>
            <div class="info-item">
              <i class="el-icon-connection"></i>
              <span class="label">MAC-1:</span>
              <span>{{deviceData.mac | defaultValue}}</span>
              <dot-status v-if="deviceData.mac" :active="deviceData.onlineStatus1 === DeviceOnlineStatus.ONLINE"/>
            </div>
            <div class="info-item" v-if="deviceData.mac2">
              <i class="el-icon-connection"></i>
              <span class="label">MAC-2:</span>
              <span>{{deviceData.mac2 | defaultValue}}</span>
              <dot-status :active="deviceData.onlineStatus2 === DeviceOnlineStatus.ONLINE"/>
            </div>
            <!-- <div class="info-item">
              <i class="el-icon-connection"></i>
              <span class="label">开关状态:</span>
              <span><dot-status :active="isOpen" show-text active-text="已开启" inactive-text="已关闭"/></span>
            </div> -->

            <div class="info-item">
              <i class="el-icon-cpu"></i>
              <span class="label">型号:</span>
              <span>{{deviceData.model | defaultValue}}</span>
            </div>
            <div class="info-item">
              <i class="el-icon-cpu"></i>
              <span class="label">产品ID:</span>
              <span>{{deviceData.productId | defaultValue}}</span>
            </div>
            <div class="info-item">
              <i class="el-icon-odometer"></i>
              <span class="label">版本号:</span>
              <span>{{deviceData.version | defaultValue}}</span>
            </div>
            <div class="info-item" v-if="deviceData.modelTags.includes(ModelTag.WIFI)">
              <i class="el-icon-wifi"></i>
              <span class="label">WIFI:</span>
              <span>{{deviceData.wifi | defaultValue}}</span>
            </div>
            <div class="info-item">
              <i class="el-icon-collection-tag"></i>
              <span class="label">功能:</span>
              <dict-tag :options="dict.type.sm_model_tag" :value="deviceData.modelTags" size="mini"/>
            </div>
          </div>
        </div>
      </el-card>

      <el-row :gutter="16">
        <el-col :lg="18" :xs="24">
          <el-card class="box-card">
            <template #header>
              <el-row type="flex" style="justify-content: space-between;align-items: center">
                <div class="card-title">
                  <i class="el-icon-data-line"></i>
                  实时信息
                </div>
                <div class="last-update-time">
                  <i class="el-icon-time"></i>
                  最后更新: {{deviceData.lastPullTime | defaultValue}}
                </div>
              </el-row>
            </template>
            
            <div class="realtime-info">
              <el-row :gutter="16">
                <!-- 时长信息 -->
                <el-col :span="12">
                  <div class="info-section">
                    <div class="section-title">
                      <span><i class="el-icon-timer"></i>时长信息</span>
                    </div>
                    <div class="data-grid">
                      <div class="data-item">
                        <div class="item-label">剩余时长（数据库）</div>
                        <div class="item-value">{{surplusTimeDesc(surplusTime).text}}</div>
                      </div>
                      <div class="data-item">
                        <div class="item-label">剩余时长（设备）</div>
                        <div class="item-value">{{surplusTimeDesc(deviceData.remainTime).text}}</div>
                      </div>
                    </div>
                  </div>
                </el-col>

                <!-- 电量信息 -->
                <el-col :span="12">
                  <div class="info-section">
                    <div class="section-title">
                      <span><i class="el-icon-lightning"></i>电量信息</span>
                    </div>
                    <div class="data-grid">
                      <div class="data-item">
                        <div class="item-label">剩余电量（数据库）</div>
                        <div class="item-value">{{deviceData.surplusEleDb | fix2}} 度</div>
                      </div>
                      <div class="data-item">
                        <div class="item-label">剩余电量（设备）</div>
                        <div class="item-value">{{deviceData.surplusEle | fix2}} 度</div>
                      </div>
                    </div>
                  </div>
                </el-col>

                <!-- 电力参数 -->
                <el-col :span="12">
                  <div class="info-section">
                    <div class="section-title">
                      <span><i class="el-icon-odometer"></i>电力参数</span>
                    </div>
                    <div class="data-grid">
                      <div class="data-item">
                        <div class="item-label">电压</div>
                        <div class="item-value">{{deviceData.voltage | fix2}} V</div>
                      </div>
                      <div class="data-item">
                        <div class="item-label">电流</div>
                        <div class="item-value">{{deviceData.electricity | fix2}} A</div>
                      </div>
                      <div class="data-item">
                        <div class="item-label">功率</div>
                        <div class="item-value">{{deviceData.realTimePower | fix2}} W</div>
                      </div>
                      <div class="data-item">
                        <div class="item-label">电压系数</div>
                        <div class="item-value">{{deviceData.vxs | fix3 | defaultValue}}</div>
                      </div>
                    </div>
                  </div>
                </el-col>

                <!-- 累计用电信息 -->
                <el-col :span="12">
                  <div class="info-section">
                    <div class="section-title">
                      <span><i class="el-icon-reading"></i>累计用电</span>
                      
                      <div class="reset-time">
                        最近重置: {{deviceData.lastInitReading | defaultValue}}
                      </div>
                    </div>
                    <div class="data-grid">
                      <div class="data-item">
                        <div class="item-label">累计用电量</div>
                        <div class="item-value">{{deviceData.totalElectriQuantity | money | defaultValue}} 度</div>
                      </div>
                      <div class="data-item">
                        <div class="item-label">
                          电量读数
                          <el-tooltip content="重置读数" placement="top">
                            <el-link @click="handleInitReading" type="primary" icon="el-icon-refresh" class="reset-btn"></el-link>
                          </el-tooltip>
                        </div>
                        <div class="item-value">{{deviceData.totalElectriQuantity - deviceData.initReading | money | defaultValue}} 度</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
          <el-card class="box-card" >              
            <el-descriptions title="系统信息" :column="4">
              <el-descriptions-item label="限制充值时间">
                {{deviceData.limitRechargeTime | defaultValue}}
                <boolean-tag v-if="deviceData.limitRechargeTime != null" :value="!isLimitRecharge" size="small" true-text="限制充值中" false-text="已解封"/>
              </el-descriptions-item>
              <el-descriptions-item label="限制充值原因">
                {{deviceData.limitRechargeReason | defaultValue}}
              </el-descriptions-item>
              <el-descriptions-item label="用户手动操作时间">
                {{deviceData.userOperaTime | defaultValue}}
              </el-descriptions-item>
              <el-descriptions-item label="用户手动操作电量">
                {{deviceData.userOpereEle | defaultValue}} 度
              </el-descriptions-item>
              <el-descriptions-item label="用户手动操作类型">
                <dict-tag :options="dict.type.device_user_opera_type" :value="deviceData.userOperaType" size="mini"/>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
        <el-col :lg="6" :xs="24">
          
          <el-card class="box-card">
            <el-descriptions title="归属信息" :column="1">
              <template #extra>
                <el-row type="flex">
                  <el-button size="small" plain icon="el-icon-link" type="danger" @click="handleUnbindAgent" v-if="deviceData.agentId != null">解绑代理商</el-button>
                  <bind-agent-button v-else :device-id="deviceData.deviceId" @success="getDevice" style="margin-right: 0.5em"/>
                  <el-button size="small" plain icon="el-icon-link" type="danger" @click="handleUnbind" v-if="deviceData.userId != null">解绑商户</el-button>
                  <bind-mch-button v-else :device-id="deviceData.deviceId" @success="getDevice" style="margin-left: 0.5em"/>
                </el-row>
              </template>
              <el-descriptions-item label="服务模式">
                <dict-tag :options="dict.type.device_service_mode" :value="deviceData.serviceMode" size="small"/>
              </el-descriptions-item>
              <el-descriptions-item label="所属代理" v-if="deviceData.serviceMode === DeviceServiceMode.AGENT">
                <user-link :name="deviceData.agentName" :id="deviceData.agentId"/>
              </el-descriptions-item>
              <el-descriptions-item label="所属商户">
                <user-link :name="deviceData.userName" :id="deviceData.userId"/>
              </el-descriptions-item>
              <el-descriptions-item label="店铺名称">
                <store-link :name="deviceData.storeName" :id="deviceData.storeId"/>
              </el-descriptions-item>
              <el-descriptions-item label="月费">
                {{deviceData.monthFee | money | defaultValue}} 元 / 月
                （到期时间：{{deviceData.rentTime | defaultValue}}）
              </el-descriptions-item>
              <el-descriptions-item label="平台服务费" v-if="deviceData.serviceMode === DeviceServiceMode.DIRECT">
                {{deviceData.realServiceRate | money | defaultValue}} %
              </el-descriptions-item>
              <el-descriptions-item label="代理服务费"  v-if="deviceData.serviceMode === DeviceServiceMode.AGENT">
                {{deviceData.agentServiceRate | money | defaultValue}} %
              </el-descriptions-item>
              <el-descriptions-item label="备注">{{deviceData.remark | defaultValue}}</el-descriptions-item>
            </el-descriptions>
          </el-card>
          <el-card class="box-card" header="分成信息">
            <line-field v-for="bonus of deviceData.bonusList" :label="bonus.arrivalName">
              <template #label>
                <el-row type="flex">
                  <dict-tag :options="dict.type.bonus_arrival_type" :value="bonus.arrivalType" size="mini"/>
                  {{bonus.arrivalName}}
                </el-row>
              </template>
              <template>{{bonus.point | money | defaultValue }} %</template>
            </line-field>
          </el-card>
        </el-col>
      </el-row>

      <el-card class="box-card">
        <el-tabs>
          <el-tab-pane label="套餐列表" :lazy="true">
            <suit
              v-if="deviceData.deviceId != null"
              :view="views.device"
              :query="{
                deviceId: deviceData.deviceId,
                userId: deviceData.userId
              }"
            />
          </el-tab-pane>
          <el-tab-pane label="订单列表" :lazy="true">
            <recharge :query="{deviceId: deviceData.deviceId}" :view="views.device"/>
          </el-tab-pane>
          <el-tab-pane label="命令日志" :lazy="true">
            <command-log :query="{macList: macList}" :views="views.device"/>
          </el-tab-pane>
          <el-tab-pane label="抄表记录" :lazy="true">
            <reading-record :device-id="deviceData.deviceId"/>
          </el-tab-pane>
          <el-tab-pane label="绑定/解绑记录" :lazy="true">
            <bind-record :query="{deviceId: deviceData.deviceId}" :view="views.device"/>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <el-empty v-else description="设备不存在或已被删除"/>

    <!--添加时长-->
    <el-dialog title="增加时长" :visible.sync="showAddElectricity" center width="400px">
      <el-form :model="addElectricityForm" :rules="addRules">
        <el-form-item label="时长" prop="amount">
          <el-input v-model="addElectricityForm.amount" :min="0" type="number">
            <template #append>
              <el-select v-model="addElectricityForm.timeUnit" style="width: 6em">
                <el-option v-for="item in dict.type.time_unit" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" plain @click="submitAddElectricity">确认</el-button>
        <el-button plain @click="showAddElectricity = false">取消</el-button>
      </template>
    </el-dialog>

    <device-set-wifi-dialog :show.sync="showSetWifi" :device-id="deviceData.deviceId" @success="onSetWifiSuccess"/>
  </div>
</template>

<script>

import {
  addEle,
  addTime, deviceInitTotalEle,
  getDevice,
  refreshIot,
  resetDevice,
  resetEleDevice,
  switchDevice,
  unbind, unbindAgent
} from '@/api/system/device'
import LineChart from "@/views/dashboard/LineChart.vue";
import RechargeRecord from "@/views/system/device/components/rechargeRecord.vue";
import QrCode from "@/components/QrCode/index.vue";
import MeterRecordReport from "@/views/system/device/components/meterRecordReport.vue";
import ReadingRecord from "@/views/system/device/components/readingRecord.vue";
import {getWxIndexUrl} from "@/utils/wx";
import BindRecord from "@/views/system/bindRecord/index.vue";
import ResetRecord from "@/views/system/device/components/resetRecord.vue";
import Suit from '@/views/ss/suit/index.vue'
import RecordTime from '@/views/ss/time/index.vue'
import { toDescriptionFromSecond } from '@/utils/date'
import StoreLink from '@/components/Business/Store/StoreLink.vue'
import UserLink from '@/components/Business/SmUser/UserLink.vue'
import { $serviceType, $view } from '@/utils/mixins'
import Recharge from '@/views/system/recharge/index.vue'
import BooleanTag from '@/components/BooleanTag/index.vue'
import { DeviceOnlineStatus, DeviceServiceMode, ModelTag, DeviceOnlineType, DeviceStatus } from '@/utils/constants'
import { isEmpty } from '@/utils'
import BindMchButton from '@/views/system/device/components/BindMchButton.vue'
import BindAgentButton from '@/views/system/device/components/BindAgentButton.vue'
import LineField from '@/components/LineField/index.vue'
import DeviceSetWifiDialog from '@/views/system/device/components/DeviceSetWifiDialog.vue'
import CommandLog from "@/views/ss/commandLog/index.vue";
import DotStatus from '@/components/DotStatus/index.vue'

export default {
  name: 'Device/:deviceId',
  mixins: [$serviceType, $view],
  dicts: ['sm_device_status', 'sm_device_outage_way', 'sm_device_notice_way', 'sm_model_tag', 'sm_device_online_status', 'service_type', 'device_service_mode', 'time_unit', 'bonus_arrival_type', 'device_user_opera_type'],
  components: {
    CommandLog,
    DeviceSetWifiDialog,
    LineField,
    BindAgentButton,
    BindMchButton,
    BooleanTag,
    Recharge,
    UserLink,
    StoreLink,
    RecordTime,
    Suit, ResetRecord, BindRecord, ReadingRecord, MeterRecordReport, QrCode, RechargeRecord, LineChart, DotStatus},
  data() {
    return {
      showSetWifi: false,
      loading: false,
      deviceData: {
        modelTags: [],
        bonusList: []
      },
      timer: null,
      surplusTime: 0, // 剩余时长
      addElectricityForm: {
        amount: 0,
        timeUnit: '3'
      },
      showAddElectricity: false,
      addRules: {
        amount: [
          { required: true, message: '请输入电量', trigger: 'blur' }
        ]
      },
      // 设备ID
      deviceId: null,
      DeviceOnlineStatus,
      DeviceStatus,
      ModelTag,
      DeviceServiceMode,
      DeviceOnlineType
    }
  },
  computed: {
    // 计算数据库电量
    calcDbEle() {
      return (device) => {
        return device.expireEle - device.totalElectriQuantity;
      }
    },
    // MAC 列表
    macList() {
      let list = [];
      if (!isEmpty(this.deviceData.mac)) {
        list.push(this.deviceData.mac)
      }
      if (!isEmpty(this.deviceData.mac2)) {
        list.push(this.deviceData.mac2);
      }
      return list;
    },
    // 二维码文本
    qrCodeText() {
      return (device) => {
        return getWxIndexUrl({ s: device.deviceNo});
      }
    },
    // 剩余时长描述
    surplusTimeDesc() {
      return (second) => {
        return toDescriptionFromSecond(second);
      }
    },
    // 是否开启
    isOpen() {
      return this.deviceData != null && this.deviceData.powerStatus === '1';
    },
    // 是否限制充值
    isLimitRecharge() {
      if (this.deviceData == null || this.deviceData.limitRechargeTime == null) {
        return false;
      }
      return new Date(this.deviceData.limitRechargeTime).getTime() < new Date();
    }
  },
  created() {
    this.deviceId = this.$route.params.deviceId;
    this.refreshIot(this.deviceId, false, DeviceOnlineType.GET);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    handleInitReading() {
      this.$confirm(`是否初始化电量读数？`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deviceInitTotalEle(this.deviceData.deviceId).then(res => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.getDevice();
          }
        })
      })
    },
    onSetWifiSuccess(data) {
      this.deviceData.wifi = data.wifiName;
    },
    handleSetWifi() {
      this.showSetWifi = true;
    },
    isEmpty,
    handleUnbind() {
      this.$confirm('是否强制解绑该商户？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        unbind(this.deviceData.deviceId).then(res => {
          if (res.code === 200) {
            this.$message.success("操作成功");
          }
        }).finally(() => {
          this.getDevice();
        })
      })
    },
    handleUnbindAgent() {
      this.$confirm('是否强制解绑该代理商？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        unbindAgent(this.deviceData.deviceId).then(res => {
          if (res.code === 200) {
            this.$message.success("操作成功");
          }
        }).finally(() => {
          this.getDevice();
        })
      })
    },
    handleSwitch(open) {
      this.$confirm(`是否确认强制${open ? '开启' : '关闭'}设备？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        switchDevice(this.deviceData.deviceId, open).then(res => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.deviceData.powerStatus = open ? '1' : '0';
          }
        }).finally(() => {
          this.loading = false;
        })
      })
    },
    // 计算剩余时长
    computeSurplusTime() {
      if (this.deviceData.expireTime == null) {
        return 0;
      }
      let expireTime = new Date(this.deviceData.expireTime).getTime();
      let now = new Date().getTime();
      if (expireTime < now) {
        return 0;
      }
      return ((expireTime - now) / 1000).toFixed(2);
    },
    handleReset() {
      this.$confirm('是否确认归零设备时长？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetDevice(this.deviceData.deviceId).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功');
            this.getDevice();
          }
        })
      })
    },
    handleResetEle() {
      this.$confirm('是否确认归零设备电量？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetEleDevice(this.deviceData.deviceId).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功');
            this.getDevice();
          }
        })
      })
    },
    handleAddTime() {
      this.resetAddElectricityForm();
      this.showAddElectricity = true;
    },
    handleAddEle() {
      this.$prompt('请输入增加的电量（度）', '增加电量', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: (val) => {
          if (val < 0) {
            return "输入的电量不允许小于0";
          }
          return true;
        }
      }).then(({ value }) => {
        addEle(this.deviceData.deviceId, value).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功');
            this.getDevice();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    submitAddElectricity() {
      addTime(this.deviceData.deviceId, this.addElectricityForm.amount, this.addElectricityForm.timeUnit).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功');
          this.showAddElectricity = false;
          this.getDevice();
        }
      })
    },
    resetAddElectricityForm() {
      this.addElectricityForm = {
        amount: 0,
        timeUnit: '3'
      }
    },
    // 刷新设备信息
    refreshIot(deviceId, notice = false, onlineType = DeviceOnlineType.GET) {
      this.loading = true;
      refreshIot(deviceId, onlineType).then(res => {
        if (res.code !== 200) {
          return this.$message.error(res.msg);
        }
        if (notice) {
          this.$message.success('操作成功');
        }
      }).finally(() => {
        this.getDevice();
      })
    },
    getDevice() {
      this.loading = true;
      getDevice(this.deviceId).then(response => {
        this.deviceData = response.data;
        this.surplusTime = this.computeSurplusTime();
        if (this.timer == null) {
          this.timer = setInterval(() => {
            this.surplusTime = this.computeSurplusTime();
          }, 1000)
        }
      }).finally(() => {
        this.loading = false;
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.device-info-card {
  margin-bottom: 12px;
  
  .device-info-container {
    
    .device-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      
      .device-title {
        display: flex;
        align-items: center;
        
        i {
          font-size: 20px;
          color: #409EFF;
          margin-right: 8px;
        }
        
        .device-name {
          font-size: 18px;
          font-weight: bold;
          margin-right: 6px;
        }

        .last-online-time {
          color: #909399;
          font-size: 12px;
          font-weight: normal;
          margin-left: 8px;
          
          i {
            font-size: 13px;
            margin-right: 0;
            color: #909399;
          }
        }
      }
      
      .device-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
      }
    }
    
    .device-info {
      display: flex;
      flex-wrap: wrap;
      padding: 12px;
      background: #f5f7fa;
      border-radius: 4px;
      
      &.model-tags {
        margin-top: 8px;
      }
      
      .info-item {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #606266;
        margin-right: 16px;
        
        
        i {
          font-size: 14px;
          color: #909399;
          margin-right: 4px;
        }
        
        .label {
          color: #909399;
          margin-right: 4px;
        }

        :deep(.el-tag) {
          margin-right: 4px;
        }
      }
    }
  }
}

.box-card {
  margin-bottom: 12px;
  
  :deep(.el-card__body) {
    padding: 12px;
  }

  .card-title {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    
    i {
      margin-right: 8px;
      color: #409EFF;
    }
  }

  .last-update-time {
    color: #909399;
    font-size: 13px;
    
    i {
      margin-right: 4px;
    }
  }

  .realtime-info {
    .info-section {
      background: #f8f9fa;
      border-radius: 6px;
      padding: 12px;
      margin-bottom: 12px;
      height: calc(100% - 12px);
      
      .section-title {
        width: 100%;
        font-size: 13px;
        font-weight: 500;
        color: #606266;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        i {
          margin-right: 4px;
          color: #409EFF;
        }
        .reset-time {
          font-size: 12px;
          color: #909399;
          text-align: right;
        }
      }

      .data-grid {
        display: flex;
        flex-wrap: nowrap;

        .data-item {
          flex: 1;
          border-radius: 4px;

          .item-label {
            color: #909399;
            font-size: 12px;
            display: flex;
            align-items: center;
            white-space: nowrap;

            .reset-btn {
              font-size: 12px;
              padding: 0 2px;
              margin-left: 4px;
            }
          }

          .item-value {
            margin-top: 8px;
            font-size: 14px;
            font-weight: 500;
            color: #303133;
          }
        }
      } 
    }
  }
}
.qr-code-box {
  text-align: center;
}
</style>
