<template>
  <div class="app-container">
    <el-tabs v-model="activeTab">
      <!-- 电梯监控标签页 -->
      <el-tab-pane label="电梯监控" name="monitor">
        <el-form :model="elevatorQuery" ref="elevatorQueryRef" :inline="true" label-width="80px">
          <el-form-item label="楼栋" prop="buildingId">
            <el-select v-model="elevatorQuery.buildingId" placeholder="请选择楼栋" clearable>
              <el-option
                  v-for="item in buildingList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="电梯类型" prop="elevatorType">
            <el-select v-model="elevatorQuery.elevatorType" placeholder="请选择类型" clearable>
              <el-option label="客梯" value="客梯" />
              <el-option label="货梯" value="货梯" />
              <el-option label="扶梯" value="扶梯" />
            </el-select>
          </el-form-item>
          <el-form-item label="运行状态" prop="runStatus">
            <el-select v-model="elevatorQuery.runStatus" placeholder="请选择状态" clearable>
              <el-option label="停止" :value="0" />
              <el-option label="上行" :value="1" />
              <el-option label="下行" :value="2" />
              <el-option label="维保" :value="3" />
              <el-option label="故障" :value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="elevatorQuery.deviceName" placeholder="请输入设备名称" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getElevatorList">搜索</el-button>
            <el-button icon="Refresh" @click="resetElevatorQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
                type="primary"
                plain
                icon="View"
                @click="handleBatchView"
            >三维展示</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
                type="success"
                plain
                icon="PictureFilled"
                @click="handleSystemDiagram"
            >系统组态图</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
                type="info"
                plain
                icon="DataAnalysis"
                @click="handleStatistics"
            >统计分析</el-button>
          </el-col>
        </el-row>

        <el-table v-loading="elevatorLoading" :data="elevatorList" stripe border>
          <el-table-column label="设备编码" prop="deviceCode" />
          <el-table-column label="设备名称" prop="deviceName"  />
          <el-table-column label="电梯类型" prop="elevatorType" width="100" />
          <el-table-column label="楼栋" prop="buildingName"  />
          <el-table-column label="安装位置" prop="installPosition"  show-overflow-tooltip />
          <el-table-column label="当前楼层" prop="currentFloor"  align="center">
            <template #default="scope">
              <el-tag type="primary" size="large">{{ scope.row.currentFloor }}F</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="运行状态" prop="run_status"  align="center">
            <template #default="scope">
              <el-tag :type="runStatusType(scope.row.runStatus)">
                {{ runStatusText(scope.row.runStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="运行方向" prop="direction"  align="center">
           <template #default="scope">
            <i v-if="scope.row.direction === '1'" style="font-size: 20px; color: #67C23A;">
              <el-icon><ArrowUp /></el-icon>
            </i>
            <i v-else-if="scope.row.direction === '2'" style="font-size: 20px; color: #F56C6C;">
              <el-icon><ArrowDown /></el-icon>
            </i>
            <span v-else>-</span>
          </template>
          </el-table-column>
          <el-table-column label="门状态" prop="door_status"  align="center">
            <template #default="scope">
              <el-tag :type="scope.row.door_status === 0 ? 'info' : 'success'">
                {{ scope.row.door_status === 0 ? '关闭' : '开启' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="在线状态" prop="is_online"  align="center">
            <template #default="scope">
              <el-tag :type="scope.row.isOnline === 1 ? 'success' : 'info'">
                {{ scope.row.isOnline === 1 ? '在线' : '离线' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="下次维保" prop="next_maintenance_date" >
            <template #default="scope">
              <span :class="{ 'text-danger': isMaintenanceDue(scope.row.nextMaintenanceDate) }">
                {{ parseTime(scope.row.nextMaintenanceDate, '{y}-{m}-{d}') }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" prop="last_update_time">
            <template #default="scope">
              <span>{{ parseTime(scope.row.last_update_time) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="150">
            <template #default="scope">
              <el-button link type="primary" icon="Monitor" @click="handleMonitor(scope.row)">监控</el-button>
              <el-button link type="primary" icon="Document" @click="handleDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
            v-show="elevatorTotal > 0"
            :total="elevatorTotal"
            v-model:page="elevatorQuery.pageNum"
            v-model:limit="elevatorQuery.pageSize"
            @pagination="getElevatorList"
        />
      </el-tab-pane>

      <!-- 运行记录标签页 -->
      <el-tab-pane label="运行记录" name="record">
        <el-form :model="recordQuery" ref="recordQueryRef" :inline="true" label-width="80px">
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="recordQuery.deviceName" placeholder="请输入设备名称" clearable />
          </el-form-item>
          <el-form-item label="时间范围" prop="timeRange">
            <el-date-picker
                v-model="recordQuery.timeRange"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getRecordList">搜索</el-button>
            <el-button icon="Refresh" @click="resetRecordQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="recordLoading" :data="recordList" stripe border>
          <el-table-column label="设备编码" prop="device_code" width="120" />
          <el-table-column label="设备名称" prop="device_name" width="150" />
          <el-table-column label="起始楼层" prop="start_floor" width="100" align="center">
            <template #default="scope">
              {{ scope.row.start_floor }}F
            </template>
          </el-table-column>
          <el-table-column label="目标楼层" prop="end_floor"  align="center">
            <template #default="scope">
              {{ scope.row.end_floor }}F
            </template>
          </el-table-column>
          <el-table-column label="开始时间" prop="start_time" >
            <template #default="scope">
              <span>{{ parseTime(scope.row.start_time) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="结束时间" prop="end_time">
            <template #default="scope">
              <span>{{ parseTime(scope.row.end_time) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="运行时长" prop="run_duration"  align="center">
            <template #default="scope">
              {{ scope.row.run_duration }}秒
            </template>
          </el-table-column>
          <el-table-column label="乘客数量" prop="passenger_count"  align="center" />
          <el-table-column label="载重(kg)" prop="load_weight"  align="center" />
        </el-table>

        <pagination
            v-show="recordTotal > 0"
            :total="recordTotal"
            v-model:page="recordQuery.pageNum"
            v-model:limit="recordQuery.pageSize"
            @pagination="getRecordList"
        />
      </el-tab-pane>

      <!-- 报警记录标签页 -->
      <el-tab-pane label="报警记录" name="alarm">
        <el-form :model="alarmQuery" ref="alarmQueryRef" :inline="true" label-width="80px">
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="alarmQuery.deviceName" placeholder="请输入设备名称" clearable />
          </el-form-item>
          <el-form-item label="报警类型" prop="alarmType">
            <el-select v-model="alarmQuery.alarmType" placeholder="请选择报警类型" clearable>
              <el-option label="超载报警" value="overload" />
              <el-option label="困人报警" value="trapped" />
              <el-option label="故障报警" value="fault" />
              <el-option label="维保提醒" value="maintenance" />
            </el-select>
          </el-form-item>
          <el-form-item label="报警级别" prop="alarmLevel">
            <el-select v-model="alarmQuery.alarmLevel" placeholder="请选择报警级别" clearable>
              <el-option label="提示" :value="1" />
              <el-option label="一般" :value="2" />
              <el-option label="严重" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="处理状态" prop="handleStatus">
            <el-select v-model="alarmQuery.handleStatus" placeholder="请选择处理状态" clearable>
              <el-option label="未处理" :value="0" />
              <el-option label="已处理" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围" prop="timeRange">
            <el-date-picker
                v-model="alarmQuery.timeRange"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getAlarmList">搜索</el-button>
            <el-button icon="Refresh" @click="resetAlarmQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="alarmLoading" :data="alarmList" stripe border>
          <el-table-column label="设备编码" prop="device_code" width="120" />
          <el-table-column label="设备名称" prop="device_name" width="150" />
          <el-table-column label="报警类型" prop="alarm_type" width="120" />
          <el-table-column label="报警级别" prop="alarm_level" width="100" align="center">
            <template #default="scope">
              <el-tag :type="alarmLevelType(scope.row.alarm_level)">
                {{ alarmLevelText(scope.row.alarm_level) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="报警描述" prop="alarm_desc" show-overflow-tooltip />
          <el-table-column label="报警时间" prop="alarm_time" width="160">
            <template #default="scope">
              <span>{{ parseTime(scope.row.alarm_time) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="处理状态" prop="handle_status" width="100" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.handle_status === 1 ? 'success' : 'warning'">
                {{ scope.row.handle_status === 1 ? '已处理' : '未处理' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="处理人" prop="handle_user" width="100" />
          <el-table-column label="处理时间" prop="handle_time" width="160">
            <template #default="scope">
              <span>{{ parseTime(scope.row.handle_time) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="120">
            <template #default="scope">
              <el-button
                  link
                  type="primary"
                  icon="Edit"
                  @click="handleAlarm(scope.row)"
                  v-if="scope.row.handle_status === 0"
              >处理</el-button>
              <el-button
                  link
                  type="primary"
                  icon="View"
                  @click="handleAlarmDetail(scope.row)"
                  v-else
              >详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
            v-show="alarmTotal > 0"
            :total="alarmTotal"
            v-model:page="alarmQuery.pageNum"
            v-model:limit="alarmQuery.pageSize"
            @pagination="getAlarmList"
        />
      </el-tab-pane>
    </el-tabs>

    <!-- 电梯监控对话框 -->
    <el-dialog v-model="monitorVisible" :title="monitorTitle" width="800px" append-to-body>
      <div class="elevator-monitor">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="monitor-section">
              <h4>基本信息</h4>
              <el-descriptions :column="1" border size="small">
                <el-descriptions-item label="设备编码">{{ currentElevator.deviceCode }}</el-descriptions-item>
                <el-descriptions-item label="设备名称">{{ currentElevator.deviceName }}</el-descriptions-item>
                <el-descriptions-item label="楼栋位置">{{ currentElevator.buildingName }} - {{ currentElevator.installPosition }}</el-descriptions-item>
                <el-descriptions-item label="品牌型号">{{ currentElevator.brand }} {{ currentElevator.model }}</el-descriptions-item>
                <el-descriptions-item label="额定载重">{{ currentElevator.ratedLoad }}kg</el-descriptions-item>
                <el-descriptions-item label="额定速度">{{ currentElevator.ratedSpeed }}m/s</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="monitor-section">
              <h4>实时状态</h4>
              <div class="elevator-visual">
                <div class="building-floors">
                  <div
                      v-for="floor in elevatorFloors"
                      :key="floor"
                      class="floor-item"
                      :class="{ 'current-floor': floor === currentElevator.currentFloor }"
                  >
                    <span class="floor-number">{{ floor }}F</span>
                    <div class="floor-line"></div>
                    <div v-if="floor === currentElevator.currentFloor" class="elevator-car">
                      <i class="el-icon-s-help"></i>
                    </div>
                  </div>
                </div>
                <div class="status-info">
                  <p>当前楼层：<strong>{{ currentElevator.currentFloor }}F</strong></p>
                  <p>运行状态：<el-tag :type="runStatusType(currentElevator.runStatus)">{{ runStatusText(currentElevator.runStatus) }}</el-tag></p>
                  <p>运行方向：
                    <i v-if="currentElevator.direction === '1'" class="el-icon-top" style="color: #67C23A;"> <el-icon><ArrowUp /></el-icon></i>
                    <i v-else-if="currentElevator.direction === '2'" class="el-icon-bottom" style="color: #F56C6C;"> <el-icon><ArrowDown /></el-icon></i>
                    <span v-else>停止</span>
                  </p>
                  <p>门状态：<el-tag :type="currentElevator.doorStatus === 0 ? 'info' : 'success'">{{ currentElevator.doorStatus === 0 ? '关闭' : '开启' }}</el-tag></p>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <!-- 统计分析对话框 -->
    <el-dialog v-model="statisticsVisible" title="电梯统计分析" width="1000px" append-to-body>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card>
            <template #header>
              <span>设备统计</span>
            </template>
            <el-statistic title="电梯总数" :value="statistics.total" />
            <el-statistic title="在线设备" :value="statistics.online" />
            <el-statistic title="故障设备" :value="statistics.fault" />
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <template #header>
              <span>类型分布</span>
            </template>
            <div v-for="item in statistics.typeDistribution" :key="item.type" class="stat-item">
              <span>{{ item.type }}：</span>
              <span>{{ item.count }}台</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <template #header>
              <span>楼栋分布</span>
            </template>
            <div v-for="item in statistics.buildingDistribution" :key="item.building" class="stat-item">
              <span>{{ item.building }}：</span>
              <span>{{ item.count }}台</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 处理报警对话框 -->
    <el-dialog v-model="handleAlarmVisible" title="处理报警" width="500px" append-to-body>
      <el-form ref="handleAlarmRef" :model="handleAlarmForm" label-width="80px">
        <el-form-item label="设备名称">
          <el-input v-model="handleAlarmForm.deviceName" disabled />
        </el-form-item>
        <el-form-item label="报警描述">
          <el-input v-model="handleAlarmForm.alarmDesc" type="textarea" :rows="3" disabled />
        </el-form-item>
        <el-form-item label="处理备注" prop="handleRemark">
          <el-input v-model="handleAlarmForm.handleRemark" type="textarea" :rows="3" placeholder="请输入处理备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleAlarmVisible = false">取消</el-button>
          <el-button type="primary" @click="submitHandleAlarm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import {
  listElevatorDevice,
  listElevatorRecord,
  listElevatorAlarm,
  handleElevatorAlarm,
  getElevatorStatistics,
  getBuildingList
} from '@/api/subsystem/elevator'

const { proxy } = getCurrentInstance()
const activeTab = ref('monitor')

// 电梯监控查询相关
const elevatorQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  buildingId: null,
  elevatorType: null,
  runStatus: null,
  deviceName: null
})
const elevatorList = ref([])
const elevatorTotal = ref(0)
const elevatorLoading = ref(false)

// 运行记录查询相关
const recordQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  deviceName: null,
  timeRange: []
})
const recordList = ref([])
const recordTotal = ref(0)
const recordLoading = ref(false)

// 报警记录查询相关
const alarmQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  deviceName: null,
  alarmType: null,
  alarmLevel: null,
  handleStatus: null,
  timeRange: []
})
const alarmList = ref([])
const alarmTotal = ref(0)
const alarmLoading = ref(false)

// 楼栋数据
const buildingList = ref([])

// 电梯监控相关
const monitorVisible = ref(false)
const monitorTitle = ref('')
const currentElevator = ref({})
const elevatorFloors = computed(() => {
  if (!currentElevator.value.max_floor || !currentElevator.value.min_floor) {
    return []
  }
  const floors = []
  for (let i = currentElevator.value.max_floor; i >= currentElevator.value.min_floor; i--) {
    floors.push(i)
  }
  return floors
})

// 统计分析相关
const statisticsVisible = ref(false)
const statistics = reactive({
  total: 0,
  online: 0,
  fault: 0,
  typeDistribution: [],
  buildingDistribution: []
})

// 处理报警相关
const handleAlarmVisible = ref(false)
const handleAlarmForm = reactive({
  id: null,
  deviceName: '',
  alarmDesc: '',
  handleRemark: ''
})

// 运行状态类型
const runStatusType = (status) => {
  const types = ['info', 'success', 'warning', 'danger', 'danger']
  return types[status] || 'info'
}

// 运行状态文本
const runStatusText = (status) => {
  const texts = ['停止', '上行', '下行', '维保', '故障']
  return texts[status] || '未知'
}

// 报警级别类型
const alarmLevelType = (level) => {
  const types = ['', 'info', 'warning', 'danger']
  return types[level] || 'info'
}

// 报警级别文本
const alarmLevelText = (level) => {
  const texts = ['', '提示', '一般', '严重']
  return texts[level] || '未知'
}

// 判断是否需要维保
const isMaintenanceDue = (date) => {
  if (!date) return false
  const nextDate = new Date(date)
  const today = new Date()
  const diffDays = Math.ceil((nextDate - today) / (1000 * 60 * 60 * 24))
  return diffDays <= 7 // 7天内需要维保
}

// 获取楼栋列表
async function loadBuildingList() {
  const res = await getBuildingList()
  buildingList.value = res.data
}

// 查询电梯设备列表
function getElevatorList() {
  elevatorLoading.value = true
  const params = {
    ...elevatorQuery,
    pageNum: elevatorQuery.pageNum,
    pageSize: elevatorQuery.pageSize
  }
  listElevatorDevice(params).then(response => {
    elevatorList.value = response.rows
    elevatorTotal.value = response.total
    elevatorLoading.value = false
  })
}

// 重置电梯查询
function resetElevatorQuery() {
  proxy.resetForm('elevatorQueryRef')
  elevatorQuery.pageNum = 1
  getElevatorList()
}

// 电梯监控
function handleMonitor(row) {
  currentElevator.value = row
  monitorTitle.value = `电梯监控 - ${row.deviceName}`
  monitorVisible.value = true
}

// 查看详情
function handleDetail(row) {
  // 可以跳转到详情页面或打开详情对话框
  proxy.$modal.msgWarning(`设备编码：${row.deviceCode}`)
}

// 三维展示
function handleBatchView() {
  proxy.$modal.msgWarning('三维展示功能开发中...')
}

// 系统组态图
function handleSystemDiagram() {
  proxy.$modal.msgWarning('系统组态图功能开发中...')
}

// 统计分析
async function handleStatistics() {
  const res = await getElevatorStatistics()
  Object.assign(statistics, res.data)
  statisticsVisible.value = true
}

// 查询运行记录列表
function getRecordList() {
  recordLoading.value = true
  const params = {
    ...recordQuery,
    pageNum: recordQuery.pageNum,
    pageSize: recordQuery.pageSize
  }
  if (recordQuery.timeRange && recordQuery.timeRange.length === 2) {
    params.beginTime = recordQuery.timeRange[0]
    params.endTime = recordQuery.timeRange[1]
  }
  listElevatorRecord(params).then(response => {
    recordList.value = response.rows
    recordTotal.value = response.total
    recordLoading.value = false
  })
}

// 重置运行记录查询
function resetRecordQuery() {
  proxy.resetForm('recordQueryRef')
  recordQuery.pageNum = 1
  getRecordList()
}

// 查询报警列表
function getAlarmList() {
  alarmLoading.value = true
  const params = {
    ...alarmQuery,
    pageNum: alarmQuery.pageNum,
    pageSize: alarmQuery.pageSize
  }
  if (alarmQuery.timeRange && alarmQuery.timeRange.length === 2) {
    params.beginTime = alarmQuery.timeRange[0]
    params.endTime = alarmQuery.timeRange[1]
  }
  listElevatorAlarm(params).then(response => {
    alarmList.value = response.rows
    alarmTotal.value = response.total
    alarmLoading.value = false
  })
}

// 重置报警查询
function resetAlarmQuery() {
  proxy.resetForm('alarmQueryRef')
  alarmQuery.pageNum = 1
  getAlarmList()
}

// 处理报警
function handleAlarm(row) {
  handleAlarmForm.id = row.id
  handleAlarmForm.deviceName = row.device_name
  handleAlarmForm.alarmDesc = row.alarm_desc
  handleAlarmForm.handleRemark = ''
  handleAlarmVisible.value = true
}

// 提交处理报警
function submitHandleAlarm() {
  handleElevatorAlarm({
    id: handleAlarmForm.id,
    handleRemark: handleAlarmForm.handleRemark
  }).then(() => {
    proxy.$modal.msgSuccess('处理成功')
    handleAlarmVisible.value = false
    getAlarmList()
  })
}

// 查看报警详情
function handleAlarmDetail(row) {
  proxy.$modal.msgWarning(`处理备注：${row.handle_remark || '无'}`)
}

// 初始化
onMounted(() => {
  loadBuildingList()
  getElevatorList()
})
</script>

<style scoped>
.elevator-monitor {
  padding: 20px;
}

.monitor-section {
  margin-bottom: 20px;
}

.monitor-section h4 {
  margin-bottom: 15px;
  color: #333;
}

.elevator-visual {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
}

.building-floors {
  position: relative;
  margin-bottom: 20px;
}

.floor-item {
  display: flex;
  align-items: center;
  height: 30px;
  margin-bottom: 5px;
  position: relative;
}

.floor-number {
  width: 40px;
  text-align: right;
  margin-right: 10px;
  font-weight: bold;
}

.floor-line {
  flex: 1;
  height: 2px;
  background: #ddd;
  position: relative;
}

.current-floor .floor-line {
  background: #409EFF;
}

.elevator-car {
  position: absolute;
  right: 20px;
  top: -15px;
  width: 50px;
  height: 60px;
  background: #409EFF;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.status-info p {
  margin-bottom: 10px;
  line-height: 1.5;
}

.status-info strong {
  color: #409EFF;
  font-size: 18px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}

.text-danger {
  color: #F56C6C;
}

.mb8 {
  margin-bottom: 8px;
}
</style>