<template>
  <ContentWrap>
    <div v-loading="loading">
      <div class="new-top-box">
        <div class="new-top-box-left">
          <div class="new-top-box-left-title"> 车辆看板 </div>
          <div
            class="new-top-box-left-statistics"
            @click="changeRobotStatisticsType(undefined)"
            :style="{
              background: queryParams.robotStatisticsType == undefined ? '#ebf1ff' : 'none'
            }"
          >
            总数 {{ carStatistics.total || 0 }}
          </div>
          <div class="grey-line"> </div>
          <div style="display: flex; align-items: center" v-if="carStatistics">
            <div
              class="new-top-box-left-item"
              @click="changeRobotStatisticsType('inTask')"
              style="color: #00329f"
              :style="{ background: queryParams.robotStatisticsType == 'inTask' ? '#ebf1ff' : '' }"
            >
              <div class="new-top-box-left-item-name">工作</div>
              <div class="new-top-box-left-item-value">{{ carStatistics.inTask || 0 }}</div>
            </div>
            <div class="grey-line"> </div>
            <div
              class="new-top-box-left-item"
              @click="changeRobotStatisticsType('charge')"
              style="color: #e07300"
              :style="{ background: queryParams.robotStatisticsType == 'charge' ? '#ebf1ff' : '' }"
            >
              <div class="new-top-box-left-item-name">充电</div>
              <div class="new-top-box-left-item-value">{{ carStatistics.charge || 0 }}</div>
            </div>
            <div class="grey-line"> </div>
            <div
              class="new-top-box-left-item"
              @click="changeRobotStatisticsType('fault')"
              style="color: #c60606"
              :style="{ background: queryParams.robotStatisticsType == 'fault' ? '#ebf1ff' : '' }"
            >
              <div class="new-top-box-left-item-name">异常</div>
              <div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
            </div>
            <div class="grey-line"> </div>
            <div
              class="new-top-box-left-item"
              @click="changeRobotStatisticsType('doLock')"
              style="color: #f1cd0b"
              :style="{ background: queryParams.robotStatisticsType == 'doLock' ? '#ebf1ff' : '' }"
            >
              <div class="new-top-box-left-item-name">锁定</div>
              <div class="new-top-box-left-item-value">{{ carStatistics.doLock || 0 }}</div>
            </div>
            <div class="grey-line"> </div>
            <div
              class="new-top-box-left-item"
              @click="changeRobotStatisticsType('standby')"
              style="color: #4dc606"
              :style="{ background: queryParams.robotStatisticsType == 'standby' ? '#ebf1ff' : '' }"
            >
              <div class="new-top-box-left-item-name">待命</div>
              <div class="new-top-box-left-item-value">{{ carStatistics.standby || 0 }}</div>
            </div>
            <div class="grey-line"> </div>
            <div
              class="new-top-box-left-item"
              @click="changeRobotStatisticsType('offline')"
              style="color: #ccc"
              :style="{ background: queryParams.robotStatisticsType == 'offline' ? '#ebf1ff' : '' }"
            >
              <div class="new-top-box-left-item-name">离线</div>
              <div class="new-top-box-left-item-value">{{ carStatistics.offline || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="new-top-box-right">
          <div class="new-top-box-right-input-box">
            <el-input
              clearable
              type="text"
              v-model="queryParams.robotNo"
              placeholder="请输入车辆编号"
              class="new-top-box-right-input"
              @clear="getCarList"
            >
              <template #append>
                <el-button icon="Search" @click="getCarList" />
              </template>
            </el-input>
          </div>
          <el-button
            class="new-top-box-right-button"
            @click="openForm('create')"
            v-hasPermi="['carBoard:index:add']"
            >新增车辆</el-button
          >
        </div>
      </div>
    </div>
  </ContentWrap>
  <div class="new-list-box-all">
    <div class="new-list-box">
      <div
        class="item"
        v-for="(item, index) in list"
        :key="index"
        :style="{ background: item.robotEssenceStatus == 2 ? '#FFDFDF' : '#ffffff' }"
      >
        <div class="item-top">
          <div
            class="item-inner-left-status"
            :style="{ backgroundColor: item.onlineStatus == 0 ? '#CCCCCC' : '#52C41A' }"
          >
          </div>
          <div class="item-inner-left-name">
            <div
              class="item-inner-left-name-inner"
              :style="{ color: item.onlineStatus == 0 ? '#CCCCCC' : '#0D162A' }"
            >
              {{ item.robotNo }}
            </div>
          </div>
          <div class="item-inner-right-top">
            <div class="swiper-item-box-top-msg">
              <el-popover placement="bottom" trigger="click" width="160">
                <template #reference>
                  <div style="flex-shrink: 0; cursor: pointer">
                    <el-icon size="20px"><MoreFilled /></el-icon>
                  </div>
                </template>
                <div class="popover-menu">
                  <div
                    class="popover-menu-item"
                    @click="openForm('update', item.id)"
                    v-hasPermi="['carBoard:index:edit']"
                    >编辑</div
                  >
                  <div
                    class="popover-menu-item"
                    @click="clockCar(item)"
                    v-hasPermi="['carBoard:index:lock']"
                    >{{ item.robotTaskModel == 0 ? '解锁' : '锁定' }}</div
                  >
                  <div
                    class="popover-menu-item"
                    @click="deleteCar(item.id)"
                    v-hasPermi="['carBoard:index:delete']"
                    >删除</div
                  >
                  <div
                    class="popover-menu-item"
                    @click="clearCar(item.robotNo)"
                    v-hasPermi="['carBoard:index:clear']"
                    >清除交管</div
                  >
                  <div
                    class="popover-menu-item"
                    @click="recoveryTask(item.robotNo)"
                    v-hasPermi="['carBoard:index:recovery']"
                    >恢复任务</div
                  >
                  <div
                    class="popover-menu-item"
                    v-if="item.isStop != 1"
                    @click="stopCar(item.robotNo)"
                    v-hasPermi="['carBoard:index:stop']"
                    >暂停车辆</div
                  >
                  <div
                    class="popover-menu-item"
                    v-if="item.isStop === 1"
                    @click="recoveryCar(item.robotNo)"
                    v-hasPermi="['carBoard:index:recoveryCar']"
                    >恢复车辆</div
                  >
                </div>
              </el-popover>
            </div>
          </div>
        </div>
        <div class="item-inner">
          <div class="item-inner-left">
            <div class="item-inner-left-img-box">
              <!-- <el-image style="width: 100%; height: 100%" :src="item.url" :fit="'fill'" /> -->
              <el-tooltip
                class="box-item"
                effect="dark"
                placement="bottom-start"
                v-if="item.robotCodeLevel == 1"
              >
                <template #content>
                  <span style="font-size: 14px; color: #fff">{{ item.robotCodeMsg || '' }} </span>
                  <span
                    style="cursor: pointer; margin-left: 24px; color: #ff4d4f; font-size: 14px"
                    @click="goMoreError(item)"
                  >
                    查看更多
                  </span>
                </template>
                <img src="@/assets/imgs/gaojing1.png" alt="" class="item-inner-left-img-box-icon" />
              </el-tooltip>
              <el-tooltip
                class="box-item"
                effect="dark"
                placement="bottom-start"
                v-if="item.robotCodeLevel == 2"
              >
                <template #content>
                  <span style="font-size: 14px; color: #fff">{{ item.robotCodeMsg || '' }} </span>
                  <span
                    style="cursor: pointer; margin-left: 24px; color: #ff4d4f; font-size: 14px"
                    @click="goMoreError(item)"
                  >
                    查看更多
                  </span>
                </template>
                <img src="@/assets/imgs/gaojing2.png" alt="" class="item-inner-left-img-box-icon" />
              </el-tooltip>
              <el-tooltip
                class="box-item"
                effect="dark"
                placement="bottom-start"
                v-if="item.robotCodeLevel == 3"
              >
                <template #content>
                  <span style="font-size: 14px; color: #fff">{{ item.robotCodeMsg || '' }} </span>
                  <span
                    style="cursor: pointer; margin-left: 24px; color: #ff4d4f; font-size: 14px"
                    @click="goMoreError(item)"
                  >
                    查看更多
                  </span>
                </template>
                <img src="@/assets/imgs/gaojing3.png" alt="" class="item-inner-left-img-box-icon" />
              </el-tooltip>
              <el-tooltip
                class="box-item"
                effect="dark"
                placement="bottom-start"
                v-if="item.robotCodeLevel == 4"
              >
                <template #content>
                  <span style="font-size: 14px; color: #fff">{{ item.robotCodeMsg || '' }} </span>
                  <span
                    style="cursor: pointer; margin-left: 24px; color: #ff4d4f; font-size: 14px"
                    @click="goMoreError(item)"
                  >
                    查看更多
                  </span>
                </template>
                <img src="@/assets/imgs/gaojing.png" alt="" class="item-inner-left-img-box-icon" />
              </el-tooltip>
            </div>
            <div class="item-inner-left-bottom">
              <div
                class="item-inner-left-bottom-btn"
                @click="goMap(item)"
                :style="{ color: item.onlineStatus == 0 ? '#CCCCCC' : '#0D162A' }"
              >
                地图定位
              </div>
              <div
                class="item-inner-left-bottom-btn"
                :style="{ color: item.onlineStatus == 0 ? '#CCCCCC' : '#0D162A' }"
                @click="viewDeviceLog"
              >
                日志查看
              </div>
            </div>
          </div>
          <div class="item-inner-right-msg" v-if="item.onlineStatus != 0">
            <div class="item-inner-right-msg-item m-b-10">
              <div class="item-inner-right-msg-item-name">电量</div>
              <div
                class="item-inner-right-msg-item-value"
                :style="{ color: item.electricity > 20 ? '#4DC606' : '#C60606' }"
                v-if="item.electricity"
                >{{ item.electricity || '' }} %</div
              >
            </div>
            <div class="item-inner-right-msg-item m-b-10">
              <div class="item-inner-right-msg-item-name">车辆状态</div>
              <div class="item-inner-right-msg-item-value">
                <span v-if="item.robotEssenceStatus == 2" style="color: #c60606">异常</span>
                <span v-if="item.robotEssenceStatus == 0" style="color: #f1cd0b">锁定</span>
                <span v-if="item.robotEssenceStatus == 1" style="color: #4dc606">空闲</span>
              </div>
            </div>
            <div class="item-inner-right-msg-item m-b-10">
              <div class="item-inner-right-msg-item-name">任务状态</div>
              <div class="item-inner-right-msg-item-value">
                <span v-if="item.robotTaskStatus == 1" style="color: #f1cd0b">工作中</span>
                <span v-if="item.robotTaskStatus == 0" style="color: #4dc606">待命中</span>
                <span v-if="item.robotTaskStatus == 2" style="color: #e07300">充电中</span>
              </div>
            </div>
            <div class="item-inner-right-msg-item m-b-10">
              <div class="item-inner-right-msg-item-name">楼层</div>
              <div class="item-inner-right-msg-item-value" v-if="item.floor !== null"
                >{{ item.floor || '' }}
              </div>
            </div>
            <div class="item-inner-right-msg-item m-b-10">
              <div class="item-inner-right-msg-item-name">区域</div>
              <div class="item-inner-right-msg-item-value" v-if="item.area !== null"
                >{{ item.area || '' }}
              </div>
            </div>
            <div class="item-inner-right-msg-item m-b-10">
              <div class="item-inner-right-msg-item-name">信息</div>
              <div class="item-inner-right-msg-item-value" v-if="item.msg !== null"
                >{{ item.msg || '' }}
              </div>
            </div>
          </div>
          <div class="item-inner-right-msg" v-if="item.onlineStatus == 0">
            <div class="item-inner-right-msg-item m-b-10" style="align-items: center">
              <div class="item-inner-right-msg-item-name">电量</div>
              <div style="width: 14px; height: 2px; background-color: #ccc; margin-left: 10px">
              </div>
            </div>
            <div class="item-inner-right-msg-item m-b-10" style="align-items: center">
              <div class="item-inner-right-msg-item-name">车辆状态</div>
              <div style="width: 14px; height: 2px; background-color: #ccc; margin-left: 10px">
              </div>
            </div>
            <div class="item-inner-right-msg-item m-b-10" style="align-items: center">
              <div class="item-inner-right-msg-item-name">任务状态</div>
              <div style="width: 14px; height: 2px; background-color: #ccc; margin-left: 10px">
              </div>
            </div>
            <div class="item-inner-right-msg-item m-b-10" style="align-items: center">
              <div class="item-inner-right-msg-item-name">楼层</div>
              <div style="width: 14px; height: 2px; background-color: #ccc; margin-left: 10px">
              </div>
            </div>
            <div class="item-inner-right-msg-item m-b-10" style="align-items: center">
              <div class="item-inner-right-msg-item-name">区域</div>
              <div style="width: 14px; height: 2px; background-color: #ccc; margin-left: 10px">
              </div>
            </div>
            <div class="item-inner-right-msg-item m-b-10" style="align-items: center">
              <div class="item-inner-right-msg-item-name">信息</div>
              <div style="width: 14px; height: 2px; background-color: #ccc; margin-left: 10px">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <createEditDialog ref="createEditDialogRef" @success="getCarList" />
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import * as CarApi from '@/api/car/index'
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import createEditDialog from './createEditDialog.vue'

defineOptions({ name: 'BoardCarBoard' })

const message = useMessage() // 消息弹窗
const route = useRoute() // 路由
const router = useRouter() // 路由对象
const createEditDialogRef = ref(null)
const list = ref([])
const queryParams = reactive({
  robotNo: undefined,
  robotStatisticsType: undefined //车辆状态类型(待命:standby, 任务中:inTask, 锁定:doLock, 离线:offline, 充电中:charge, 故障:fault)
})

const timerRef = ref(null)
const loading = ref(false)

// 使用Promise.all并发请求数据
const fetchData = async () => {
  if (loading.value) return

  try {
    loading.value = true
    const [listRes, statsRes] = await Promise.all([
      CarApi.getRobotInformationList(queryParams),
      CarApi.robotInformationStatistics({})
    ])

    list.value = listRes.list
    carStatistics.value = statsRes || {
      standby: 0,
      inTask: 0,
      doLock: 0,
      offline: 0,
      fault: 0,
      charge: 0,
      total: 0
    }
  } catch (error) {
    message.error('获取数据失败：' + error.message)
  } finally {
    loading.value = false
  }
}

// 启动定时刷新
const startPolling = () => {
  stopPolling()
  fetchData()
  timerRef.value = setInterval(fetchData, 10000)
}

// 停止定时刷新
const stopPolling = () => {
  if (timerRef.value) {
    clearInterval(timerRef.value)
    timerRef.value = null
  }
}

// 查询车辆列表
const getCarList = () => {
  startPolling()
}

const carStatistics = ref({
  standby: 0,
  inTask: 0,
  doLock: 0,
  offline: 0,
  fault: 0,
  charge: 0,
  total: 0
})

const goMoreError = (item) => {
  router.push({
    path: '/carError',
    query: {
      robotNo: item.robotNo
    }
  })
}

//清除交管
const clearCar = (robotNo) => {
  ElMessageBox.confirm('您确定要清除交管吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      CarApi.cleanTrafficManagement({ robotNo }).then((res) => {
        getCarList()
        fetchData()
        message.success('清除成功')
      })
    })
    .catch(() => {})
}

// 恢复任务
const recoveryTask = (robotNo) => {
  ElMessageBox.confirm('您确定要恢复任务吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      CarApi.doTaskContinue({ robotNo }).then((res) => {
        getCarList()
        fetchData()
        message.success('恢复成功')
      })
    })
    .catch(() => {})
}
// 暂停车辆
const stopCar = (robotNo) => {
  ElMessageBox.confirm('您确定要暂停车辆吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      CarApi.stopCar({ robotNo }).then((res) => {
        if (res) {
          getCarList()
          fetchData()
          message.success('暂停成功')
        }
      })
    })
    .catch(() => {})
}
// 恢复车辆
const recoveryCar = (robotNo) => {
  ElMessageBox.confirm('您确定要恢复车辆吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      CarApi.recoveryCar({ robotNo }).then((res) => {
        if (res) {
          getCarList()
          fetchData()
          message.success('恢复成功')
        }
      })
    })
    .catch(() => {})
}

const changeRobotStatisticsType = (type) => {
  queryParams.robotStatisticsType = type
  getCarList()
}

//新建编辑车辆
const openForm = (type, id) => {
  createEditDialogRef.value.open(type, id ? id : null)
}

//删除车辆
const deleteCar = (id) => {
  ElMessageBox.confirm('您确定要删除此车辆吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      CarApi.deleteRobotInformation(id).then((res) => {
        getCarList()
        message.success('删除成功')
      })
    })
    .catch(() => {})
}

const clockCar = (item) => {
  let valueStr = item.robotTaskModel == 1 ? '锁定' : '解锁'
  let data = JSON.parse(JSON.stringify(item))
  data.robotTaskModel = item.robotTaskModel == 1 ? 0 : 1
  ElMessageBox.confirm(`您确定要${valueStr}此车辆吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      CarApi.robotInformationUpdate(data).then((res) => {
        getCarList()
        message.success(`${valueStr}成功`)
      })
    })
    .catch(() => {})
}

//地图定位
const goMap = (item) => {
  if (!item.floor || !item.area) {
    message.warning('该车辆未配置地图信息')
    return
  }
  router.push({
    name: 'MapPageRealTimeMap',
    query: {
      floor: item.floor,
      area: item.area
    }
  })
}

const viewDeviceLog = () => {
  router.push({
    name: 'MapLogQueriesList',
    query: {
      activeTab: 2 // 指定打开车辆日志标签页
    }
  })
}

onMounted(() => {
  if (route.query.robotNo) {
    queryParams.robotNo = route.query.robotNo
  }
  startPolling()
})

onBeforeUnmount(stopPolling)

onBeforeRouteLeave((to, from, next) => {
  stopPolling()
  next()
})
</script>

<style scoped>
.swiper-container {
  width: calc(100% - 60px);
  padding: 0 30px;
  margin: 0 auto;
  position: relative;
}

.swiperBox {
  width: 100%;
}

.swiper-item-box {
  width: 100%;
  padding-bottom: 30px;
  border: 1px solid #f5f5f5;
}

.swiper-item-img-box {
  width: 100%;
  display: flex;
  justify-content: center;
}

.swiper-item-img {
  width: 150px;
  height: 150px;
}

.swiper-item-box-top {
  width: calc(100% - 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
  padding: 0 10px;
}

.swiper-item-box-top-name {
  font-size: 13px;
  font-weight: bold;
}

.swiper-item-box-msg {
  width: calc(100% - 20px);
  padding: 0 10px;
}

.swiper-item-box-msg-item {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.swiper-item-box-msg-item-left {
  font-size: 13px;
}

.swiper-item-box-msg-item-right {
  font-size: 13px;
  margin-left: 40px;
}

:focus-visible {
  outline: none;
}

.swiper-button-prev-custome {
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 999;
}

.swiper-button-next-custome {
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 999;
}

.letter-data-box {
  width: calc(100% - 60px);
  padding: 0 30px;
  margin: 0 auto;
  position: relative;
  display: flex;
}

.letter-data-item {
  width: calc(25% - 20px);
  flex-shrink: 0;
}

.car-statistics-box {
  width: 100%;
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
}

.car-statistics-item {
  width: calc(15% - 20px);
  padding: 0 10px;
  height: 60px;
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.top-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.new-top-box {
  width: 100%;
  display: flex;

  /* padding: 25px 0; */
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.new-top-box-left {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.new-top-box-left-title {
  font-family: PingFangSC, 'PingFang SC';
  font-weight: 500;
  font-size: 18px;
  color: #0d162a;
}

.new-top-box-left-statistics {
  padding: 5px 7px;
  margin-left: 4px;
  font-family: PingFangSC, 'PingFang SC';
  font-weight: 500;
  font-size: 16px;
  color: #0d162a;
  flex-shrink: 0;
  background: #ebf1ff;
  cursor: pointer;
}

.grey-line {
  width: 1px;
  height: 13px;
  background: #ccc;
}

.new-top-box-left-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-family: PingFangSC, 'PingFang SC';
  font-weight: 500;
  font-size: 16px;
  padding: 5px 10px;
  cursor: pointer;
}

.new-top-box-left-item-name {
  flex-shrink: 0;
}

.new-top-box-left-item-value {
  flex-shrink: 0;
  margin-left: 10px;
}

.new-top-box-right {
  display: flex;
}

.new-top-box-right-input-box {
  margin-right: 16px;
}

.new-top-box-right-input {
  width: 225px;
  font-size: 13px;
  height: 36px;
}

/* 兼容不同浏览器的写法 */
input::input-placeholder {
  /* Chrome/Safari/Opera */
  color: #a4afca;
}

.new-top-box-right-button {
  width: 104px;
  height: 36px;
  font-size: 13px;
}

.new-list-box {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三列等宽 */
  gap: 12px; /* 设置元素间间隔为12像素 */
  width: 100%; /* 容器宽度根据需要调整 */
}

.item {
  /* background: red; */
  padding: 20px 22px 26px;
  margin-bottom: 12px;
  height: 230px;
  background: #fff;
}

.item-inner {
  width: 100%;
  height: 100%;
  display: flex;

  /* background: #0d162a; */
}

.item-inner-left {
  width: 124px;
  flex-shrink: 0;
  height: 100%;
}

.item-inner-left-name {
  flex: 1;
  margin-right: 5px;
  font-family: PingFangSC, 'PingFang SC';
  font-weight: 600;
  font-size: 14px;
  width: 0;
}

.item-inner-left-name-inner {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 显示省略号来表示被截断的文本 */
}

.item-inner-left-img-box {
  width: 124px;
  height: 124px;
  background: #eee;
  position: relative;
}

.item-inner-left-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.item-inner-left-bottom-btn {
  font-family: PingFangSC, 'PingFang SC';
  font-weight: 400;
  font-size: 14px;
  color: #1677ff;
  cursor: pointer;
}

.new-list-box-all {
  width: 100%;
  margin-top: 12px;
}

.item-inner-right {
  margin-left: 39px;
  flex: 1;
  height: 100%;
}

.item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.item-inner-right-top {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
}

.item-inner-right-msg {
  margin-left: 35px;
  flex: 1;
}

.item-inner-right-msg-item {
  width: 100%;
  display: flex;
  flex-shrink: 0;
}

.item-inner-right-msg-item-name {
  font-family: PingFangSC, 'PingFang SC';
  font-weight: 400;
  font-size: 14px;
  width: 60px;
  text-align: end;
}

.item-inner-right-msg-item-value {
  flex: 1;
  margin-left: 8px;
  font-size: 14px;
  color: #0d162a;
  overflow: hidden;
  text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */
  white-space: nowrap; /* 限制不允许换行 */
  width: 0;
}

.m-b-10 {
  margin-bottom: 10px;
}

.item-inner-left-status {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  margin-right: 4px;
}

.item-inner-left-img-box-icon {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
}

.popover-menu {
  display: flex;
  flex-direction: column;
  min-width: 120px;
  padding: 4px 0;
}
.popover-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background 0.2s;
}
.popover-menu-item:hover {
  background: #f5f5f5;
}
</style>
