<template>
  <div class="device-detail">
    <!-- 上半部分 -->
    <el-row :gutter="20" class="top-section">
      <!-- 左侧信息 -->
      <el-col class="left-section">
        <el-card class="info-card" shadow="always">
          <div slot="header" class="card-header">
            <span>设备信息</span>
            <div class="action-buttons">
              <el-button type="primary" plain icon="el-icon-edit" @click="toggleEdit" v-if="!isEditing">
                修改
              </el-button>
              <template v-else>
                <el-button type="success" plain icon="el-icon-check" @click="handleSave">
                  保存
                </el-button>
                <el-button type="info" plain icon="el-icon-close" @click="handleCancel">
                  取消
                </el-button>
              </template>
              <el-popover placement="top" width="180" trigger="hover">
                <div class="qr-code-box">
                  <qr-code :text="qrCodeText" :width="150" :height="150" />
                  <p>扫描二维码进行设备绑定</p>
                </div>
                <el-button slot="reference" type="primary" plain icon="el-icon-download"
                  @click="downloadQRCode">下载二维码</el-button>
              </el-popover>
            </div>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <span class="label">MAC-1:</span>
                <template v-if="isEditing">
                  <el-input v-model="editForm.mac" size="small" class="edit-input" disabled></el-input>
                </template>
                <span v-else class="value">{{ deviceData.mac || '--' }}</span>
              </div>
              <div class="info-item">
                <span class="label">型号:</span>
                <template v-if="isEditing">
                  <el-input v-model="editForm.model" size="small" class="edit-input" disabled></el-input>
                </template>
                <el-tag v-else size="small" type="primary">{{ deviceData.model || '--' }}</el-tag>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">MAC-2:</span>
                <template v-if="isEditing">
                  <el-input v-model="editForm.mac2" size="small" class="edit-input" disabled></el-input>
                </template>
                <span v-else class="value">{{ deviceData.mac2 || '--' }}</span>
              </div>
              <div class="info-item">
                <span class="label">产品ID:</span>
                <template v-if="isEditing">
                  <el-input v-model="editForm.productId" size="small" class="edit-input" disabled></el-input>
                </template>
                <span v-else class="value">{{ deviceData.productId || '--' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">SN:</span>
                <template v-if="isEditing">
                  <el-input v-model="editForm.sn" size="small" class="edit-input"></el-input>
                </template>
                <span v-else class="value">{{ deviceData.sn || '--' }}</span>
              </div>
              <div class="info-item">
                <span class="label">型号功能:</span>
                <template v-if="isEditing">
                  <el-select v-model="editForm.modelTags" multiple size="small" class="edit-input" disabled>
                    <el-option v-for="tag in modelTagOptions" :key="tag.dictValue" :label="tag.dictLabel"
                      :value="tag.dictValue">
                    </el-option>
                  </el-select>
                </template>
                <span v-else class="value">
                  <el-tag v-for="tag in modelTags" :key="tag" size="small" type="primary">{{ tag }}</el-tag>
                </span>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <el-card class="info-card" shadow="always">
          <div slot="header" class="card-header">
            <span>归属信息</span>
            <div class="header-buttons">
              <el-button type="success" icon="el-icon-connection" plain size="small"
                @click="openBindUserDialog">绑定商户</el-button>
              <el-button type="success" icon="el-icon-connection" plain size="small"
                @click="openBindFacilityDialog">绑定设施</el-button>
            </div>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <span class="label">设备名称:</span>
                <template v-if="isEditing">
                  <el-input v-model="editForm.deviceName" size="small" class="edit-input"></el-input>
                </template>
                <span v-else class="value">{{ deviceData.deviceName || '--' }}</span>
              </div>
              <div class="info-item">
                <span class="label">房间名称:</span>
                <template v-if="isEditing">
                  <el-input v-model="editForm.room.roomName" size="small" class="edit-input" disabled></el-input>
                </template>
                <router-link v-else :to="'/system/roomDetail/index/' + deviceData.room.roomId" class="link-type">
                    <span>{{ deviceData.room.roomName || '--' }}</span>
                  </router-link>  
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">所属店铺:</span>
                <template v-if="isEditing">
                  <el-input v-model="editForm.storeName" size="small" class="edit-input" disabled></el-input>
                </template>
                <router-link v-else :to="'/system/storeDetail/index/' + deviceData.storeId" class="link-type">
                    <span>{{ deviceData.storeName || '--' }}</span>
                  </router-link>
              </div>
              <div class="info-item">
                <span class="label">绑定设施:</span>
                <template v-if="isEditing">
                  <el-input v-model="editForm.equ.name" size="small" class="edit-input" disabled></el-input>
                </template>
                <router-link v-else :to="'/system/equipmentDetail/index/' + deviceData.equ.equipmentId" class="link-type">
                    <span>{{ deviceData.equ.name }}</span>
                  </router-link>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">所属商户:</span>
                <template v-if="isEditing">
                  <el-input v-model="editForm.userName" size="small" class="edit-input" disabled></el-input>
                </template>
                <router-link v-else :to="'/user/detail/' + deviceData.userId" class="link-type">
                    <span>{{ deviceData.userName || '--' }}</span>
                  </router-link>
              </div>
              <div class="info-item">
                <span class="label">备注:</span>
                <template v-if="isEditing">
                  <el-input v-model="editForm.remark" size="small" class="edit-input"> </el-input>
                </template>
                <span v-else class="value">{{ deviceData.remark || '--' }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>


        <el-card class="info-card" shadow="always">
          <div slot="header" class="card-header">
            <span>物联网信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <span class="label">在线状态:</span>
                <el-tag size="small" :type="deviceData.onlineStatus === '1' ? 'success' : 'danger'">
                  {{ deviceData.onlineStatus === '1' ? '在线' : '离线' }}
                </el-tag>
              </div>
              <div class="info-item">
                <span class="label">开关状态:</span>
                <el-tag size="small" :type="deviceData.powerStatus === '1' ? 'success' : 'danger'">
                  {{ deviceData.powerStatus === '1' ? '已开启' : '已关闭' }}
                </el-tag>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">最后在线时间:</span>
                <span class="value">{{ deviceData.lastOnlineTime || '--' }}</span>
              </div>
              <!-- <div class="info-item">
                <span class="label">总用电量:</span>
                <span class="value">{{ deviceData.totalElectriQuantity || '--' }} 度</span>
              </div> -->
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">版本号:</span>
                <span class="value">{{ deviceData.version || '--' }}</span>
              </div>
              <!-- <div class="info-item">
                <span class="label">电量读数:</span>
                <span class="value">{{ deviceData.electricity || '--' }} 度</span>
                <el-link type="primary" :underline="false">重置</el-link>
              </div> -->
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <!-- 右侧信息 -->
      <el-col class="right-section">
        <!-- <el-card class="info-card" shadow="always">
          <div slot="header" class="card-header">
            <span>分成信息</span>
          </div>
          <div class="info-item">
            <span class="label">平台:</span>
            <span class="value">{{ deviceData.agentName || '--' }}</span>
          </div>
          <div class="info-item">
            <span class="label">分成比例:</span>
            <span class="value">{{ deviceData.serviceFeeProportion || '--' }} %</span>
          </div>
        </el-card> -->

        <el-card class="info-card" shadow="always">
          <div slot="header" class="card-header">
            <span>实时信息</span>
          </div>
          <!-- <div class="info-item">
            <span class="label">时长(数据库):</span>
            <span class="value">{{ deviceData.remainTime || '--' }} 秒</span>
          </div>
          <div class="info-item">
            <span class="label">电量(数据库):</span>
            <span class="value">{{ deviceData.electricity || '--' }} 度</span>
          </div> -->
          <div class="info-item">
            <span class="label">电压:</span>
            <span class="value">{{ deviceData.voltage || '--' }} V</span>
          </div>
          <div class="info-item">
            <span class="label">电流:</span>
            <span class="value">{{ deviceData.electricity || '--' }} A</span>
          </div>
          <div class="info-item">
            <span class="label">功率:</span>
            <span class="value">{{ deviceData.realTimePower || '--' }} KW</span>
          </div>
          <!-- <div class="info-item">
            <span class="label">电压系数:</span>
            <span class="value">{{ deviceData.placementStatus || '--' }}</span>
          </div> -->
        </el-card>

        <!-- 操作台 -->
        <el-card class="info-card" shadow="always">
          <div slot="header" class="card-header">
            <span>操作台</span>
          </div>
          <div class="operation-buttons">
            <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(deviceData)">修改</el-button> -->
            <el-button v-if="deviceData.status != '3'" type="primary" plain   icon="el-icon-unlock"
              @click="handleUnlocking(deviceData)">打开</el-button>
            <el-button type="primary" plain  icon="el-icon-lock" @click="handleLock(deviceData)">关闭</el-button>
            <el-button v-if="deviceData.status != '0'"  icon="el-icon-check" type="primary" plain 
              @click="handleOnline(deviceData)">
              {{ deviceData.status === '8' ? '解禁' : '禁用' }}
            </el-button>
            <el-button type="primary" plain   icon="el-icon-refresh" @click="reboot(deviceData)">重启</el-button>
            <el-button type="primary" plain   icon="el-icon-refresh" @click="refresh(deviceData)">更新</el-button>
            <el-button  type="primary" plain icon="el-icon-delete" @click="handleDelete(deviceData)">删除</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 下半部分 -->
    <el-tabs v-model="activeTab" class="detail-tabs">
      <!-- <el-tab-pane label="套餐列表" name="packages">
        
        <Role :userId="deviceData.userId"></Role>
      </el-tab-pane> -->
      <el-tab-pane label="命令日志" name="logs">
        <!-- 套餐列表搜索表单 -->
        <Log :mac="deviceData.mac"></Log>
      </el-tab-pane>
      <!-- <el-tab-pane label="订单列表" name="orders">订单列表内容</el-tab-pane>
      <el-tab-pane label="命令日志" name="logs">命令日志内容</el-tab-pane> -->

    </el-tabs>
    <el-dialog title="绑定设施" :visible.sync="bindFacilityDialogVisible" width="900px" append-to-body>
      <el-table v-loading="facilityTableLoading" :data="facilityList" style="width: 100%" height="500">
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="设施id" prop="equipmentId" align="center" />
        <el-table-column label="设施名称" prop="name" align="center" />
        <el-table-column label="设施图片" align="center">
          <template slot-scope="scope">
            <image-preview :src="scope.row.picture" :width="50" :height="50" />
          </template>
        </el-table-column>
        <el-table-column label="设施类型" prop="type" align="center">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.ss_equipment_type" :value="scope.row.type" />
          </template>
        </el-table-column>
        <el-table-column label="套餐" prop="feeRuleVOS" align="center">
          <template slot-scope="scope">
            {{ formatFeeRules(scope.row.feeRuleVOS) }}
          </template>
        </el-table-column>
        <el-table-column label="店铺名" prop="storeName" align="center" />
        <el-table-column label="设施状态" prop="status" align="center">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.ss_equipment_status" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleBindFacility(scope.row)">绑定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="facilityTotal > 0" :total="facilityTotal" :page.sync="facilityQueryParams.pageNum"
        :limit.sync="facilityQueryParams.pageSize" @pagination="getFacilityList" />
    </el-dialog>
    <!-- 绑定商户对话框 -->
    <el-dialog title="绑定商户" :visible.sync="bindUserDialogVisible" width="900px" append-to-body>
      <el-form :model="userQueryParams" ref="queryForm" :inline="true" class="search-form">
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="userQueryParams.userName" placeholder="请输入用户名称" clearable size="small"
            @keyup.enter.native="handleUserQuery" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input v-model="userQueryParams.phonenumber" placeholder="请输入手机号码" clearable size="small"
            @keyup.enter.native="handleUserQuery" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="userQueryParams.status" placeholder="用户状态" clearable size="small">
            <el-option label="正常" value="0" />
            <el-option label="停用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleUserQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetUserQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="userTableLoading" :data="userList" style="width: 100%" height="500">
        <el-table-column label="用户编号" prop="userId" align="center" />
        <el-table-column label="用户名称" prop="userName" align="center" />
        <el-table-column label="手机号" prop="phonenumber" align="center" />
        <el-table-column label="类型" align="center">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.ss_user_type" :value="scope.row.userType" />
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
              {{ scope.row.status === '0' ? '正常' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleBindUser(scope.row)">绑定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="userTotal > 0" :total="userTotal" :page.sync="userQueryParams.pageNum"
        :limit.sync="userQueryParams.pageSize" @pagination="getUserList" />
    </el-dialog>
  </div>
</template>

<script>
import {
  getDevice,
  updateDevice,
  handleLock,
  handleUnlocking,
  reboot,
  refreshDevice,
  delDevice,
  bindDeviceFacility,
  bindDeviceUser
} from '@/api/system/device'
import { listUser } from "@/api/user/user"
import { listData } from '@/api/system/dict/data'
import { listEquipment } from "@/api/system/equipment"
import QrCode from '@/components/QrCode/index.vue'
import QRCode from 'qrcode'
import Role from '@/views/system/rule/index.vue'
import Log from '@/views/system/commandLog/index.vue'
export default {
  name: "DeviceDetail",
  components: {
    QrCode,Role,Log
  },    
  dicts: ['ss_equipment_type', 'ss_equipment_status', 'ss_user_type'],
  data() {
    return {
      // 设备数据
      deviceData: {
        modelTags: [] // 初始化为空数组
      },
      loading: false,
      isEditing: false,

      // 编辑表单数据
      editForm: {
        deviceId: undefined,
        mac: '',
        mac2: '',
        sn: '',
        model: '',
        productId: '',
        deviceName: '',
        roomName: '',
        storeName: '',
        userName: '',
        remark: '',
        modelTags: [],
        serviceRate: undefined
      },

      // 设施相关数据
      bindFacilityDialogVisible: false,
      facilityTableLoading: false,
      facilityList: [],
      facilityTotal: 0,
      facilityQueryParams: {
        pageNum: 1,
        pageSize: 10
      },
      facilityOptions: [],
      modelTagOptions: [],

      // 用户相关数据
      bindUserDialogVisible: false,
      userTableLoading: false,
      userList: [],
      userTotal: 0,
      userQueryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        userType: '01'
      },

      // 标签页相关
      activeTab: 'logs',
      searchForm: {
        userName: '',
        userPhone: '',
        packageName: '',
        chargeMode: '',
        chargeType: ''
      }
    }
  },
  computed: {
    qrCodeText() {
      return this.deviceData.sn || ''
    },
    modelTags() {
      return this.deviceData.modelTags ? this.deviceData.modelTags.map(tag => {
        const modelTag = this.modelTagOptions.find(option => option.dictValue === tag);


        return modelTag ? modelTag.dictLabel : tag;
      }) : [];
    },
    facilityTag() {
      return this.deviceData.facilityName || '--'
    }
  },
  created() {
    const deviceId = this.$route.params.deviceId

    this.fetchFacilityOptions()
    this.fetchModelTagOptions()
    if (deviceId) {
      this.fetchDeviceData(deviceId)
    }
  },
  methods: {
    toUserDetail(){
      if (this.deviceData.userId) {
        this.$router.push(`/user/detail/${this.deviceData.userId}`);
      }
    },
    fetchDeviceData(deviceId) {
      this.loading = true
      getDevice(deviceId).then(response => {
        if (response.data) {
          // 确保modelTags是数组
          this.deviceData = {
            ...response.data,
            modelTags: Array.isArray(response.data.modelTags)
              ? response.data.modelTags
              : (response.data.modelTags ? response.data.modelTags.split(',') : [])
          }
        }
        this.loading = false
      }).catch(error => {
        this.$message.error("获取设备详情失败")
        this.loading = false
      })
    },
    formatFeeRules(feeRuleVOS) {
      if (!feeRuleVOS || !feeRuleVOS.length) {
        return '-';
      }
      return feeRuleVOS.map(rule => rule.explain).join('，');
    },
    fetchFacilityOptions() {
      listData({ dictType: 'ss_equipment_type' }).then(response => {
        this.facilityOptions = response.rows || []
      }).catch(() => {
        this.$message.error("获取绑定设施数据失败")
      })
    },

    fetchModelTagOptions() {
      listData({ dictType: 'sm_model_tag' }).then(response => {
        this.modelTagOptions = response.rows || []
        console.log(this.modelTagOptions, 'this.modelTagOptions');
      }).catch(() => {
        this.$message.error("获取型号功能数据失败")
      })
    },
    getFacilityList() {
      this.facilityTableLoading = true;
      // 修改查询参数
      const queryParams = {
        pageNum: this.facilityQueryParams.pageNum,
        pageSize: this.facilityQueryParams.pageSize,
        name: undefined,
        type: undefined,
        status: undefined
      };

      listEquipment(queryParams).then(response => {
        this.facilityList = response.rows;
        this.facilityTotal = response.total;
        this.facilityTableLoading = false;
      }).catch(() => {
        this.$message.error("获取设施列表失败");
        this.facilityTableLoading = false;
      });
    },
    toggleEdit() {
      this.isEditing = true
      this.editForm = {
        ...this.deviceData,
        modelTags: Array.isArray(this.deviceData.modelTags)
          ? [...this.deviceData.modelTags]
          : []
      }
    },

    handleSave() {
      updateDevice(this.editForm).then(() => {
        this.$message.success("保存成功")
        this.isEditing = false
        this.fetchDeviceData(this.deviceData.deviceId)
      }).catch(() => {
        this.$message.error("保存失败")
      })
    },

    handleCancel() {
      this.isEditing = false
      this.editForm = {}
    },

    downloadQRCode() {
      const qrText = this.qrCodeText
      if (!qrText) {
        this.$message.warning("没有可用的设备SN码")
        return
      }
      QRCode.toDataURL(qrText, { width: 150, height: 150 }, (err, url) => {
        if (err) {
          this.$message.error("生成二维码失败")
          return
        }
        const link = document.createElement('a')
        link.href = url
        link.download = `${this.deviceData.sn || 'device'}.png`
        link.click()
      })
    },

    handleUnlocking(row) {
      handleUnlocking(row.deviceId).then(() => {
        this.$message.success("设备已解锁")
      })
    },

    handleLock(row) {
      handleLock(row.deviceId).then(() => {
        this.$message.success("设备已锁定")
      })
    },

    reboot(row) {
      reboot(row.deviceId).then(() => {
        this.$message.success("设备已重启")
      })
    },

    refresh(row) {
      refreshDevice(row.deviceId).then(() => {
        this.$message.success("设备已更新")
      })
    },

    handleDelete(row) {
      this.$modal.confirm('是否确认删除该设备？').then(() => {
        return delDevice(row.deviceId)
      }).then(() => {
        this.$message.success("设备已删除")
        this.$router.push('/system/device')
      }).catch(() => { })
    },

    openBindFacilityDialog() {
      this.bindFacilityDialogVisible = true
      this.getFacilityList()
    },

    getFacilityList() {
      this.facilityTableLoading = true
      listEquipment(this.facilityQueryParams).then(response => {
        this.facilityList = response.rows || []
        this.facilityTotal = response.total || 0
        this.facilityTableLoading = false
      })
    },

    handleBindFacility(row) {
      this.$modal.confirm('确认要将该设备绑定到设施"' + row.name + '"吗？').then(() => {
        return bindDeviceFacility({
          deviceId: this.deviceData.deviceId,
          equipmentId: row.equipmentId
        })
      }).then(() => {
        this.$modal.msgSuccess("绑定成功")
        this.bindFacilityDialogVisible = false
        this.fetchDeviceData(this.deviceData.deviceId)
      }).catch(() => { })
    },

    handleOnline(row) {
      const status = row.status === '8' ? '0' : '8'
      const statusText = status === '8' ? '禁用' : '启用'

      this.$modal.confirm('确认要' + statusText + '该设备吗？').then(() => {
        return updateDevice({
          deviceId: row.deviceId,
          status: status
        })
      }).then(() => {
        this.$modal.msgSuccess(statusText + "成功")
        this.fetchDeviceData(row.deviceId)
      }).catch(() => { })
    },

    openBindUserDialog() {
      this.bindUserDialogVisible = true
      this.getUserList()
    },

    getUserList() {
      this.userTableLoading = true
      listUser(this.userQueryParams).then(response => {
        this.userList = response.rows || []
        this.userTotal = response.total || 0
        this.userTableLoading = false
      })
    },
    // 搜索按钮操作
  handleUserQuery() {
    this.userQueryParams.pageNum = 1;
    this.getUserList();
  },

  // 重置按钮操作
  resetUserQuery() {
    this.$refs["queryForm"].resetFields();
    this.userQueryParams = {
      pageNum: 1,
      pageSize: 10,
      userName: undefined,
      phonenumber: undefined,
      status: undefined,
      userType: '01'
    };
      this.handleUserQuery();
    },
    handleBindUser(row) {
      this.$modal.confirm('确认要将该设备绑定到商户"' + row.userName + '"吗？').then(() => {
        return bindDeviceUser({
          deviceId: this.deviceData.deviceId,
          userId: row.userId
        })
      }).then(() => {
        this.$modal.msgSuccess("绑定成功")
        this.bindUserDialogVisible = false
        this.fetchDeviceData(this.deviceData.deviceId)
      }).catch(() => { })
    }
  }
}
</script>


<style lang="scss" scoped>
.device-detail {
  padding: 20px;
  .link-type {
  color: #11A983;
  text-decoration: underline;
}

.link-type:hover {
  color: #11A98330;
  text-decoration: underline;
}
  .top-section {
    display: flex;
    align-items: stretch;
  }

  .left-section {
    width: 70%;
    display: flex;
    flex-direction: column;
  }

  .right-section {
    width: 30%;
    display: flex;
    flex-direction: column;
  }

  .info-card {
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    flex: 1;

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

      .action-buttons {
        display: flex;
        gap: 10px;
        align-items: center;

        .el-button {
          margin-left: 0;

          &:first-child {
            margin-left: 0;
          }
        }
      }

      .header-buttons {
        .el-button {
          margin-left: 10px;
        }
      }
    }

    .info-item {
      margin-bottom: 15px;
      display: flex;
      align-items: center;

      .label {
        color: #606266;
        margin-right: 10px;
        min-width: 100px;
        font-weight: 500;
      }

      .value {
        color: #333;
        flex: 1;
      }

      .edit-input {
        width: 200px;
        margin-right: 10px;

        &.el-select {
          width: 200px;
        }
      }

      .el-tag {
        margin-right: 5px;
      }

      .el-link {
        margin-left: 10px;
      }
    }
  }

  .operation-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-top: 10px;

    .el-button {
      margin: 0;
      padding: 20 10px;
      flex: 1 1 45%;
    }
  }

  .detail-tabs {
    margin-top: 20px;

    .search-form {
      margin-bottom: 20px;

      .el-form-item {
        margin-bottom: 10px;
      }
    }
  }
}

// QR码样式
.qr-code-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  p {
    margin-top: 10px;
    color: #606266;
    font-size: 12px;
  }
}

// 编辑状态下的输入框样式
.editing {
  .info-item {

    .el-input,
    .el-select {
      .el-input__inner {
        height: 32px;
        line-height: 32px;
      }
    }
  }
}

// 多选标签的样式
.el-select-dropdown__item {
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
}

// 表格样式优化
.el-table {

  th,
  td {
    padding: 8px 0;
  }

  .cell {
    line-height: 20px;
  }
}

// 标签页样式
.el-tabs__item {
  height: 40px;
  line-height: 40px;
}

// 卡片内容区域padding调整
.el-card__body {
  padding: 20px;
}

// 输入框hover和focus状态
.el-input__inner:hover,
.el-select:hover .el-input__inner {
  border-color: #409EFF;
}

.el-input__inner:focus,
.el-select .el-input__inner:focus {
  border-color: #409EFF;
}

// 按钮组样式优化
.action-buttons {
  .el-button+.el-button {
    margin-left: 10px;
  }

  .el-button {
    padding: 7px 15px;
    font-size: 12px;

    &--mini {
      padding: 5px 10px;
    }
  }
}

// 表单项间距
.el-form-item {
  margin-bottom: 18px;

  &:last-child {
    margin-bottom: 0;
  }
}

// 下拉选择器宽度
.el-select {
  width: 100%;
}

// 标签样式
.el-tag {
  margin-right: 8px;
  margin-bottom: 5px;

  &:last-child {
    margin-right: 0;
  }
}

// 弹出框样式
.el-popover {
  min-width: 150px;
  padding: 12px;
}

// 加载状态
.loading {
  position: relative;
  min-height: 200px;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 1000;
  }
}
</style>
