<template>
  <div class="middleware-detail">
    <!-- 头部信息卡片 -->
    <div class="detail-header-card">
      <div class="header-left">
        <div class="service-icon" :class="getTypeClass(record.type)">
          <span class="icon-text">{{ getTypeAbbr(record.type) }}</span>
        </div>
        <div class="service-info">
          <div class="service-title">
            <h2>{{ record.name || '中间件服务' }}</h2>
            <div class="status-tags">
              <a-tag :color="getStatusColor(record.status)" size="large">
                <template #icon>
                  <span class="status-dot" :class="record.status"></span>
                </template>
                {{ getStatusText(record.status) }}
              </a-tag>
              <a-tag v-if="record.enabled" color="green" size="large">已启用</a-tag>
              <a-tag v-else color="gray" size="large">已禁用</a-tag>
            </div>
          </div>
          <div class="service-meta">
            <span class="meta-item">
              <icon-idcard />
              <span class="meta-label">服务标识:</span>
              <span class="meta-value copyable" @click="copyToClipboard(record.service_identity)">
                {{ record.service_identity || '-' }}
                <icon-copy v-if="record.service_identity" class="copy-icon" />
              </span>
            </span>
            <span class="meta-item">
              <icon-apps />
              <span class="meta-label">类型:</span>
              <a-tag :color="getTypeColor(record.type)" size="small">{{ record.type || '-' }}</a-tag>
            </span>
            <span class="meta-item">
              <icon-clock-circle />
              <span class="meta-label">运行:</span>
              <span class="meta-value uptime">{{ formatUptime(record.uptime) }}</span>
            </span>
            <span class="meta-item" v-if="record.server_identity">
              <icon-desktop />
              <span class="meta-label">服务器:</span>
              <a-link @click="handleViewServer">{{ record.server_identity }}</a-link>
            </span>
          </div>
        </div>
      </div>
      <div class="header-actions">
        <a-button size="small" @click="handleEdit">
          <template #icon><icon-edit /></template>
          编辑
        </a-button>
        <a-button size="small" @click="handleQuickConfig">
          <template #icon><icon-settings /></template>
          采集配置
        </a-button>
        <a-button size="small" status="danger" @click="handleDelete">
          <template #icon><icon-delete /></template>
          删除
        </a-button>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="metrics-grid">
      <div class="metric-card" :class="{ 'has-issue': record.continuous_errors > 0 }">
        <div class="metric-header">
          <icon-clock-circle class="metric-icon blue" />
          <span class="metric-title">响应时间</span>
        </div>
        <div class="metric-body">
          <span class="metric-value" :class="getResponseTimeClass(record.response_time)">
            {{ record.response_time || 0 }}
          </span>
          <span class="metric-unit">ms</span>
        </div>
        <div class="metric-footer">
          <span class="metric-label">最后检查：{{ formatTime(record.last_check_time) }}</span>
        </div>
      </div>

      <div class="metric-card" :class="{ 'has-issue': record.status_code !== 200 }">
        <div class="metric-header">
          <icon-check-circle class="metric-icon" :class="record.status_code === 200 ? 'green' : 'red'" />
          <span class="metric-title">HTTP 状态</span>
        </div>
        <div class="metric-body">
          <span class="metric-value" :class="record.status_code === 200 ? 'success' : 'error'">
            {{ record.status_code || '-' }}
          </span>
        </div>
        <div class="metric-footer">
          <span class="metric-label" :title="record.status_message">{{ formatStatusMessage(record.status_message) }}</span>
        </div>
      </div>

      <div class="metric-card" :class="{ 'has-issue': record.continuous_errors > 0 }">
        <div class="metric-header">
          <icon-exclamation-circle class="metric-icon" :class="record.continuous_errors > 0 ? 'red' : 'green'" />
          <span class="metric-title">连续错误</span>
        </div>
        <div class="metric-body">
          <span class="metric-value" :class="record.continuous_errors > 0 ? 'error' : 'success'">
            {{ record.continuous_errors || 0 }}
          </span>
          <span class="metric-unit">次</span>
        </div>
        <div class="metric-footer">
          <span class="metric-label">{{ record.continuous_errors > 0 ? '需要关注' : '运行正常' }}</span>
        </div>
      </div>

      <div class="metric-card" :class="{ 'highlight': record.collect_on }">
        <div class="metric-header">
          <icon-sync class="metric-icon" :class="record.collect_on ? 'green' : 'gray'" :spin="record.collect_on" />
          <span class="metric-title">数据采集</span>
        </div>
        <div class="metric-body">
          <a-switch :model-value="record.collect_on" readonly size="small" />
          <span class="metric-value collect-status" :class="record.collect_on ? 'on' : 'off'">
            {{ record.collect_on ? '运行中' : '已停止' }}
          </span>
        </div>
        <div class="metric-footer">
          <span class="metric-label">间隔：{{ record.collect_interval || record.interval || 60 }}s</span>
        </div>
      </div>

      <div class="metric-card" :class="{ 'highlight': record.agent_config }">
        <div class="metric-header">
          <icon-code class="metric-icon" :class="record.agent_config ? 'arcoblue' : 'gray'" />
          <span class="metric-title">Agent 配置</span>
        </div>
        <div class="metric-body">
          <a-tag :color="record.agent_config ? 'arcoblue' : 'gray'" size="small">
            {{ record.agent_config ? '已配置' : '未配置' }}
          </a-tag>
        </div>
        <div class="metric-footer">
          <span class="metric-label" :title="record.agent_config">{{ formatUrl(record.agent_config) }}</span>
        </div>
      </div>

      <div class="metric-card" :class="{ 'highlight': record.last_check_time }">
        <div class="metric-header">
          <icon-schedule class="metric-icon purple" />
          <span class="metric-title">最近采集</span>
        </div>
        <div class="metric-body">
          <a-tag :color="getCollectResultColor(record.collect_last_result)" size="small">
            {{ record.collect_last_result || '无记录' }}
          </a-tag>
        </div>
        <div class="metric-footer">
          <span class="metric-label">参数：{{ record.collect_args || '无' }}</span>
        </div>
      </div>
    </div>

    <!-- 详情标签页 -->
    <a-tabs v-model:active-tab="activeTab" class="detail-tabs">
      <a-tab-pane key="basic" title="基本信息">
        <div class="info-section">
          <div class="info-group">
            <div class="group-title">
              <icon-apps /> 服务基础信息
            </div>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">服务标识</span>
                <span class="info-value">
                  <a-tag color="arcoblue" size="large">{{ record.service_identity || '-' }}</a-tag>
                </span>
              </div>
              <div class="info-item">
                <span class="info-label">服务名称</span>
                <span class="info-value highlight">{{ record.name || '-' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">中间件类型</span>
                <span class="info-value">
                  <a-tag :color="getTypeColor(record.type)" size="large">{{ record.type || '-' }}</a-tag>
                </span>
              </div>
              <div class="info-item">
                <span class="info-label">分类</span>
                <span class="info-value">
                  <a-tag color="gray" size="small">{{ record.category || 'middleware' }}</a-tag>
                </span>
              </div>
              <div class="info-item">
                <span class="info-label">服务器标识</span>
                <span class="info-value">
                  <span v-if="record.server_identity" class="server-link" @click="handleViewServer">
                    <icon-desktop class="server-icon" />
                    {{ record.server_identity }}
                  </span>
                  <span v-else class="empty-value">未关联</span>
                </span>
              </div>
              <div class="info-item">
                <span class="info-label">启用状态</span>
                <span class="info-value">
                  <a-tag :color="record.enabled ? 'green' : 'gray'" size="large">
                    {{ record.enabled ? '已启用' : '已禁用' }}
                  </a-tag>
                </span>
              </div>
              <div class="info-item full-width">
                <span class="info-label">描述</span>
                <span class="info-value">{{ record.description || '-' }}</span>
              </div>
              <div class="info-item full-width">
                <span class="info-label">标签</span>
                <span class="info-value">
                  <template v-if="record.tags && record.tags.trim()">
                    <a-tag v-for="(tag, index) in record.tags.split(',').filter(t => t.trim())" :key="index" color="gray" size="small">{{ tag.trim() }}</a-tag>
                  </template>
                  <span v-else class="empty-value">无标签</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </a-tab-pane>

      <a-tab-pane key="collect" title="采集配置">
        <div class="info-section">
          <div class="info-group">
            <div class="group-title">
              <icon-link /> URL 配置
            </div>
            <div class="info-grid">
              <div class="info-item full-width">
                <span class="info-label">状态检查 URL</span>
                <span class="info-value">
                  <div v-if="record.status_url" class="url-box">
                    <a-tag :color="record.status ? 'green' : 'gray'" size="small">{{ record.status || '未知' }}</a-tag>
                    <a-link :href="record.status_url" target="_blank" class="url-link">
                      <icon-link /> {{ record.status_url }}
                    </a-link>
                  </div>
                  <span v-else class="empty-value">未配置</span>
                </span>
              </div>
              <div class="info-item full-width">
                <span class="info-label">Agent 配置 URL</span>
                <span class="info-value">
                  <div v-if="record.agent_config" class="url-box">
                    <a-tag color="arcoblue" size="small">Agent</a-tag>
                    <a-link :href="record.agent_config" target="_blank" class="url-link">
                      <icon-link /> {{ record.agent_config }}
                    </a-link>
                  </div>
                  <span v-else class="empty-value">未配置</span>
                </span>
              </div>
            </div>
          </div>

          <div class="info-group">
            <div class="group-title">
              <icon-sync :spin="record.collect_on" /> 采集参数
            </div>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">采集间隔</span>
                <span class="info-value">
                  <a-tag color="blue" size="small">{{ record.interval || 60 }} 秒</a-tag>
                </span>
              </div>
              <div class="info-item">
                <span class="info-label">周期采集间隔</span>
                <span class="info-value">
                  <a-tag color="green" size="small">{{ record.collect_interval || record.interval || 60 }} 秒</a-tag>
                </span>
              </div>
              <div class="info-item">
                <span class="info-label">参与周期采集</span>
                <span class="info-value">
                  <a-tag :color="record.collect_on ? 'green' : 'gray'" size="small">
                    {{ record.collect_on ? '是' : '否' }}
                  </a-tag>
                </span>
              </div>
              <div class="info-item">
                <span class="info-label">采集参数</span>
                <span class="info-value code">{{ record.collect_args || '-' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">最近采集结果</span>
                <span class="info-value">
                  <a-tag v-if="record.collect_last_result" :color="getCollectResultColor(record.collect_last_result)" size="large">
                    {{ record.collect_last_result }}
                  </a-tag>
                  <span v-else class="empty-value">无记录</span>
                </span>
              </div>
            </div>
          </div>

          <div class="info-group" v-if="record.extra">
            <div class="group-title">
              <icon-code /> 额外配置
            </div>
            <div class="extra-config">
              <pre>{{ formatExtra(record.extra) }}</pre>
            </div>
          </div>
        </div>
      </a-tab-pane>

      <a-tab-pane key="status" title="运行状态">
        <div class="info-section">
          <div class="info-group">
            <div class="group-title">
              <icon-check-circle /> 当前状态
            </div>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">运行状态</span>
                <span class="info-value">
                  <a-tag :color="getStatusColor(record.status)" size="large">{{ getStatusText(record.status) }}</a-tag>
                </span>
              </div>
              <div class="info-item">
                <span class="info-label">状态码</span>
                <span class="info-value">{{ record.status_code || '-' }}</span>
              </div>
              <div class="info-item full-width">
                <span class="info-label">状态消息</span>
                <span class="info-value">{{ record.status_message || '-' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">响应时间</span>
                <span class="info-value">{{ record.response_time || 0 }} ms</span>
              </div>
              <div class="info-item">
                <span class="info-label">运行时长</span>
                <span class="info-value">{{ formatUptime(record.uptime) }}</span>
              </div>
            </div>
          </div>

          <div class="info-group">
            <div class="group-title">
              <icon-schedule /> 时间记录
            </div>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">最后检查时间</span>
                <span class="info-value">{{ formatTime(record.last_check_time) }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">最后在线时间</span>
                <span class="info-value">{{ formatTime(record.last_online_time) }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">最后离线时间</span>
                <span class="info-value">{{ formatTime(record.last_offline_time) }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">连续错误次数</span>
                <span class="info-value">
                  <a-tag :color="record.continuous_errors > 0 ? 'red' : 'green'">
                    {{ record.continuous_errors || 0 }}
                  </a-tag>
                </span>
              </div>
            </div>
          </div>

          <div class="info-group">
            <div class="group-title">
              <icon-clock-circle /> 创建信息
            </div>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">创建时间</span>
                <span class="info-value">{{ formatTime(record.created_at) }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">更新时间</span>
                <span class="info-value">{{ formatTime(record.updated_at) }}</span>
              </div>
            </div>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import {
  IconEdit,
  IconSettings,
  IconDelete,
  IconClockCircle,
  IconCheckCircle,
  IconExclamationCircle,
  IconSync,
  IconIdcard,
  IconApps,
  IconLink,
  IconDesktop,
  IconCode,
  IconSchedule,
  IconCopy,
} from '@arco-design/web-vue/es/icon'
import type { MiddlewareItem } from '@/api/ops/middleware'

interface Props {
  record: MiddlewareItem
}

const props = defineProps<Props>()
const emit = defineEmits(['edit', 'quick-config', 'delete', 'view-server'])

const activeTab = ref('basic')

// 获取状态颜色
const getStatusColor = (status?: string) => {
  const colorMap: Record<string, string> = {
    online: 'green',
    offline: 'red',
    error: 'orange',
  }
  return colorMap[status || ''] || 'gray'
}

// 获取状态文本
const getStatusText = (status?: string) => {
  const textMap: Record<string, string> = {
    online: '在线',
    offline: '离线',
    error: '错误',
  }
  return textMap[status || ''] || '-'
}

// 获取类型颜色
const getTypeColor = (type?: string) => {
  const colorMap: Record<string, string> = {
    nginx: 'green',
    apache: 'orange',
    tomcat: 'blue',
    redis: 'red',
    kafka: 'purple',
    rabbitmq: 'arcoblue',
    elasticsearch: 'cyan',
  }
  return colorMap[type || ''] || 'gray'
}

// 获取类型类名
const getTypeClass = (type?: string) => {
  return `type-${type || 'default'}`
}

// 获取类型缩写
const getTypeAbbr = (type?: string) => {
  const abbrMap: Record<string, string> = {
    nginx: 'NG',
    apache: 'AP',
    tomcat: 'TC',
    redis: 'RD',
    kafka: 'KF',
    rabbitmq: 'MQ',
    elasticsearch: 'ES',
  }
  return abbrMap[type || ''] || 'MW'
}

// 获取采集结果颜色
const getCollectResultColor = (result?: string) => {
  if (result === 'ok') return 'green'
  if (result === 'error') return 'red'
  return 'gray'
}

// 获取响应时间样式类
const getResponseTimeClass = (responseTime?: number) => {
  if (!responseTime) return ''
  if (responseTime < 100) return 'success'
  if (responseTime < 500) return 'warning'
  return 'error'
}

// 格式化状态消息（截断过长文本）
const formatStatusMessage = (message?: string) => {
  if (!message) return '-'
  if (message.length > 20) return message.slice(0, 18) + '...'
  return message
}

// 格式化 URL（截断过长文本）
const formatUrl = (url?: string) => {
  if (!url) return '未配置'
  if (url.length > 25) return url.slice(0, 22) + '...'
  return url
}

// 复制到剪贴板
const copyToClipboard = async (text: string) => {
  if (!text) return
  try {
    await navigator.clipboard.writeText(text)
    Message.success('已复制到剪贴板')
  } catch (err) {
    Message.error('复制失败')
  }
}

// 格式化运行时长
const formatUptime = (uptime?: number) => {
  if (!uptime) return '-'
  const days = Math.floor(uptime / 86400)
  const hours = Math.floor((uptime % 86400) / 3600)
  const minutes = Math.floor((uptime % 3600) / 60)
  if (days > 0) return `${days}天${hours}小时`
  if (hours > 0) return `${hours}小时${minutes}分钟`
  return `${minutes}分钟`
}

// 格式化时间
const formatTime = (time?: string | null) => {
  if (!time) return '-'
  return new Date(time).toLocaleString('zh-CN')
}

// 格式化额外配置
const formatExtra = (extra?: string) => {
  if (!extra) return '-'
  try {
    return JSON.stringify(JSON.parse(extra), null, 2)
  } catch {
    return extra
  }
}

// 操作处理
const handleEdit = () => emit('edit')
const handleQuickConfig = () => emit('quick-config')
const handleDelete = () => emit('delete')
const handleViewServer = () => emit('view-server', props.record.server_identity)

// 暴露 activeTab 供外部使用
defineExpose({ activeTab })
</script>

<style scoped lang="less">
.middleware-detail {
  padding: 16px;
  background: #f7f8fa;
  min-height: 100%;
}

.detail-header-card {
  background: #fff;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

  .header-left {
    display: flex;
    align-items: center;
    gap: 16px;

    .service-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      color: #fff;

      &.type-nginx { background: linear-gradient(135deg, #00b42a, #4e9f4e); }
      &.type-apache { background: linear-gradient(135deg, #ff7d00, #ffb400); }
      &.type-tomcat { background: linear-gradient(135deg, #165dff, #4080ff); }
      &.type-redis { background: linear-gradient(135deg, #f53f3f, #ff6b6b); }
      &.type-kafka { background: linear-gradient(135deg, #722ed1, #9b59b6); }
      &.type-rabbitmq { background: linear-gradient(135deg, #ff7d00, #ff9500); }
      &.type-elasticsearch { background: linear-gradient(135deg, #14c9c9, #00bfbf); }
      &.type-default { background: linear-gradient(135deg, #86909c, #a0a0a0); }
    }

    .service-info {
      .service-title {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;

        h2 {
          margin: 0;
          font-size: 16px;
          font-weight: 600;
          color: #1d2129;
        }

        .status-tags {
          display: flex;
          gap: 8px;
        }

        .status-dot {
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          margin-right: 4px;

          &.online { background: #00b42a; }
          &.offline { background: #f53f3f; }
          &.error { background: #ff7d00; }
        }
      }

      .service-meta {
        display: flex;
        gap: 16px;
        font-size: 13px;
        flex-wrap: wrap;

        .meta-item {
          display: flex;
          align-items: center;
          gap: 4px;
          color: #86909c;

          .meta-label {
            color: #86909c;
          }

          .meta-value {
            color: #1d2129;

            &.uptime {
              color: #00b42a;
            }

            &.copyable {
              display: flex;
              align-items: center;
              gap: 4px;
              cursor: pointer;
              transition: color 0.2s;

              &:hover {
                color: #165dff;
              }

              .copy-icon {
                font-size: 12px;
                color: #86909c;
                transition: color 0.2s;
              }

              &:hover .copy-icon {
                color: #165dff;
              }
            }
          }
        }
      }
    }
  }

  .header-actions {
    display: flex;
    gap: 8px;
  }
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 12px;

  .metric-card {
    background: #fff;
    border-radius: 6px;
    padding: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: transparent;
      transition: background 0.2s;
    }

    &.has-issue::before {
      background: #f53f3f;
    }

    &.highlight::before {
      background: #00b42a;
    }

    .metric-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;

      .metric-icon {
        font-size: 16px;

        &.blue { color: #165dff; }
        &.green { color: #00b42a; }
        &.red { color: #f53f3f; }
        &.gray { color: #86909c; }
        &.arcoblue { color: #165dff; }
        &.purple { color: #722ed1; }
      }

      .metric-title {
        font-size: 12px;
        color: #86909c;
      }
    }

    .metric-body {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-bottom: 4px;
      flex-wrap: wrap;

      .metric-value {
        font-size: 24px;
        font-weight: 600;
        color: #1d2129;

        &.success { color: #00b42a; }
        &.error { color: #f53f3f; }
        &.warning { color: #ff7d00; }
      }

      .metric-unit {
        font-size: 12px;
        color: #86909c;
      }

      .collect-status {
        font-size: 12px;
        font-weight: 500;

        &.on { color: #00b42a; }
        &.off { color: #86909c; }
      }
    }

    .metric-footer {
      .metric-label {
        font-size: 11px;
        color: #86909c;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    &:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      transform: translateY(-2px);
      transition: all 0.2s ease;
    }
  }
}

.detail-tabs {
  background: #fff;
  border-radius: 6px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

  :deep(.arco-tabs-header) {
    margin-bottom: 16px;
  }
}

.info-section {
  .info-group {
    margin-bottom: 20px;

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

    .group-title {
      font-size: 13px;
      font-weight: 500;
      color: #1d2129;
      margin-bottom: 12px;
      padding-left: 8px;
      border-left: 3px solid #165dff;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;

      .info-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 12px;
        background: #f7f8fa;
        border-radius: 4px;

        &.full-width {
          grid-column: span 2;
        }

        .info-label {
          flex-shrink: 0;
          font-size: 12px;
          color: #86909c;
          min-width: 80px;
        }

        .info-value {
          font-size: 13px;
          color: #1d2129;
          word-break: break-all;

          &.highlight {
            font-weight: 500;
            font-size: 14px;
          }

          &.code {
            font-family: 'Courier New', monospace;
            font-size: 12px;
            background: #e8f3ff;
            padding: 2px 6px;
            border-radius: 3px;
          }

          .empty-value {
            color: #c9cdd4;
          }

          .server-link {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            color: #165dff;
            transition: color 0.2s;

            &:hover {
              color: #4080ff;
            }

            .server-icon {
              font-size: 12px;
            }
          }

          .url-box {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;

            .url-link {
              display: inline-flex;
              align-items: center;
              gap: 4px;
              color: #165dff;
              transition: color 0.2s;

              &:hover {
                color: #4080ff;
              }
            }
          }
        }
      }
    }

    .extra-config {
      background: #f7f8fa;
      border-radius: 4px;
      padding: 12px;

      pre {
        margin: 0;
        font-size: 12px;
        color: #1d2129;
        white-space: pre-wrap;
        word-break: break-all;
      }
    }
  }
}
</style>
