<template>
  <div class="tips-report-container">
    <div class="left-sidebar">
      <div class="sidebar-header">
        <h3>历史记录</h3>
        <button class="new-task-btn">+ 新建任务</button>
      </div>
      <div class="task-list">
        <div
          v-for="task in taskList"
          :key="task.id"
          :class="['task-item', { active: currentTaskId === task.id }]"
          @click="selectTask(task)"
        >
          <div class="task-image">
            <img :src="task.image" alt="任务图片" />
          </div>
          <div class="task-info">
            <span class="task-title">{{ task.title }}</span>
            <span class="task-time">{{ task.time }}</span>
          </div>
          <span :class="['task-status', task.status]">{{ task.statusText }}</span>
        </div>
      </div>
    </div>

    <div class="main-content">
      <div class="content-header">
        <h2>隐患提示</h2>
        <div class="header-right">
          <button class="btn-add-tag">+ 添加站</button>
          <span class="current-time">6月12日 15:52</span>
        </div>
      </div>

      <div class="content-body">
        <div class="center-panel">
          <div class="image-section">
            <img :src="currentTask.image" alt="现场图片" class="main-image" />
          </div>

          <div class="ai-section">
            <div class="section-header">
              <span class="section-title">隐患提示说明</span>
            </div>
            <div class="ai-content">
              <div class="report-overview">
                <h4>一、报告概述</h4>
                <p>本报告基于提供的当前附件内容，对识别到的关键场景要素（加油机、加油机输油软管、防撞栏、加油枪）及关联的潜在安全隐患进行了系统梳理。报告旨在从隐患识别的视角，提供一份结构化的核查汇总，以便快速定位和对照整改。</p>
              </div>
              <div class="report-hazards">
                <h4>二、识别的要素及隐患汇总</h4>
                <div class="hazard-item">
                  <div class="hazard-title">
                    <span class="hazard-icon">⛽</span>
                    <span>加油机</span>
                  </div>
                  <ul>
                    <li>加油机外观不整洁，有明显油污</li>
                    <li>机座地脚螺栓/紧固件连接明显松动</li>
                    <li>底部填沙潮湿或明显油迹</li>
                    <li>油品管线连接处有明显渗漏</li>
                    <li>过滤器有明显油污和渗漏</li>
                    <li>加油机底部未设置截断阀</li>
                    <li>加油枪密封不良，工作时渗漏</li>
                    <li>加油机静电接地失效</li>
                    <li>防爆挠性管连接松动，接线盒静电接地不合规</li>
                  </ul>
                  <div class="risk-tag high">风险：设备稳定性不足、油品泄漏风险、火灾爆炸风险</div>
                </div>
                <div class="hazard-item">
                  <div class="hazard-title">
                    <span class="hazard-icon">🔧</span>
                    <span>加油机输油软管</span>
                  </div>
                  <ul>
                    <li>加油软管上未设置安全拉断阀</li>
                    <li>存在油污、渗漏、连接松动等问题</li>
                  </ul>
                  <div class="risk-tag medium">风险：车辆误拉扯导致软管断裂，引发泄漏</div>
                </div>
                <div class="hazard-item">
                  <div class="hazard-title">
                    <span class="hazard-icon">🛡️</span>
                    <span>防撞栏及周边设施</span>
                  </div>
                  <ul>
                    <li>靠近岛端部的加油机未设置防撞柱或防撞柱松动破损</li>
                    <li>加油站进口/进站口减速带缺失、破损失效</li>
                    <li>地面破损、凹陷，或环保沟盖板破损凸起</li>
                    <li>地面未按规范划线</li>
                    <li>雨水排水设施破损或堵塞</li>
                  </ul>
                  <div class="risk-tag medium">风险：车辆撞击风险、交通秩序混乱、通行障碍</div>
                </div>
                <div class="hazard-item">
                  <div class="hazard-title">
                    <span class="hazard-icon">🔫</span>
                    <span>加油枪</span>
                  </div>
                  <ul>
                    <li>加油枪密封不良，工作时渗漏</li>
                    <li>汽油加油枪无集气罩或集气罩破损</li>
                  </ul>
                  <div class="risk-tag high">风险：操作点直接泄漏风险、火灾危险</div>
                </div>
              </div>
              <div class="report-suggestions">
                <h4>三、优先整改建议</h4>
                <div class="suggestion-list">
                  <div class="suggestion-item high">
                    <span class="priority">高</span>
                    <span>泄漏风险：立即核查加油枪、管线连接处、油气回收系统的任何渗漏迹象</span>
                  </div>
                  <div class="suggestion-item high">
                    <span class="priority">高</span>
                    <span>静电与火源管控：确保加油机静电接地有效、作业人员规范穿戴防静电装备</span>
                  </div>
                  <div class="suggestion-item medium">
                    <span class="priority">中</span>
                    <span>结构/机械完整性：紧固松动的螺栓、修复或安装防撞柱</span>
                  </div>
                  <div class="suggestion-item medium">
                    <span class="priority">中</span>
                    <span>交通与现场秩序：修复损坏的减速带、地面和划线</span>
                  </div>
                  <div class="suggestion-item base">
                    <span class="priority">基</span>
                    <span>标识与可视化：清洁加油机、涂刷警示色、确保铭牌清晰</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="right-panel">
          <div class="panel-section">
            <div class="section-header">
              <span class="section-title">建议整改清单</span>
            </div>
            <div class="checklist">
              <div
                v-for="(item, index) in currentTask.checklist"
                :key="index"
                :class="['checklist-item', { checked: item.checked }]"
              >
                <input type="checkbox" :checked="item.checked" @change="toggleCheck(index)" />
                <span>{{ item.text }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const taskList = ref([
  {
    id: 1,
    title: '加油站',
    time: '6月12日 17:12',
    status: 'completed',
    statusText: '已完成',
    image: '/demo1.png',
    aiWarning: '综合安全风险提示：图中出现加油机、加油枪、防撞柱、加油机输油管、配电箱、灭火器等关键设备设施。经AI图像智能分析，识别出以下安全隐患风险点：加油机周边地面存在疑似油污痕迹，需及时清理以防人员滑倒；配电箱外部存在轻微破损，建议检查内部线路防护状况；消防灭火器放置位置虽符合规范，但需确认压力值是否在正常范围；防撞柱反光标识存在局部褪色，建议定期更换以保障夜间警示效果。综合评估当前场景整体安全状况为中等风险，建议立即安排专业人员对上述隐患点进行逐一排查整改，确保加油站运营安全。',
    tags: [
      { label: '加油机', top: '55%', left: '32%' },
      { label: '加油机', top: '55%', left: '45%' },
      { label: '加油机', top: '55%', left: '52%' },
      { label: '防撞柱', top: '75%', left: '28%' },
      { label: '防撞柱', top: '75%', left: '62%' },
      { label: '防撞柱', top: '75%', left: '68%' },
      { label: '配电箱', top: '45%', left: '18%' },
    ],
    checklist: [
      { text: '请检查外观是否整洁，是否存在油污堆积；检查外观是否整洁，是否存在油污堆积；检查外观是否整洁，是否存在油污堆积', checked: false },
      { text: '请确认加油机输油管及阀门连接是否牢固，定期进行紧固检查，以防泄漏或松动；检查外观是否整洁，是否存在油污堆积', checked: false },
      { text: '请检查灭火器是否在有效期内，压力是否正常，放置位置是否便于取用；检查外观是否整洁，是否存在油污堆积', checked: false },
      { text: '请检查配电箱及线路是否规范，是否存在私拉乱接；检查外观是否整洁，是否存在油污堆积', checked: false },
      { text: '请检查防撞柱是否完好，高度是否符合要求，表面反光标识是否清晰；检查外观是否整洁，是否存在油污堆积', checked: false },
    ]
  },
  {
    id: 2,
    title: '隧道工程',
    time: '6月12日 15:53',
    status: 'processing',
    statusText: '处理中',
    image: '/demo1.png',
    aiWarning: '隧道施工风险提示：检测到隧道内存在施工设备、临时支护结构等，建议关注支护稳定性、通风系统运行状态及照明设施完好情况。',
    tags: [],
    checklist: []
  },
  {
    id: 3,
    title: '加油站',
    time: '6月12日 15:52',
    status: 'processing',
    statusText: '处理中',
    image: '/demo1.png',
    aiWarning: '综合安全风险提示：检测到多个加油机位、消防设施及电气设备，建议全面检查设备运行状态及安全防护措施。',
    tags: [],
    checklist: []
  },
  {
    id: 4,
    title: '加油站',
    time: '6月12日 15:49',
    status: 'pending',
    statusText: '待处理',
    image: '/demo1.png',
    aiWarning: '',
    tags: [],
    checklist: []
  },
  {
    id: 5,
    title: '加油站',
    time: '6月12日 15:48',
    status: 'pending',
    statusText: '待处理',
    image: '/demo1.png',
    aiWarning: '',
    tags: [],
    checklist: []
  },
  {
    id: 6,
    title: '桥梁工程',
    time: '6月12日 15:48',
    status: 'pending',
    statusText: '待处理',
    image: '/demo1.png',
    aiWarning: '',
    tags: [],
    checklist: []
  },
])

const currentTaskId = ref(1)

const currentTask = computed(() => {
  return taskList.value.find(t => t.id === currentTaskId.value) || taskList.value[0]
})

const selectTask = (task) => {
  currentTaskId.value = task.id
}

const selectTag = (tag) => {
  console.log('Selected tag:', tag)
}

const toggleCheck = (index) => {
  if (currentTask.value.checklist[index]) {
    currentTask.value.checklist[index].checked = !currentTask.value.checklist[index].checked
  }
}
</script>

<style scoped lang="scss">
.tips-report-container {
  display: flex;
  height: 100%;
  background: #f5f7fa;
}

.left-sidebar {
  width: 280px;
  background: #fff;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e8e8e8;

  h3 {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }

  .new-task-btn {
    padding: 6px 16px;
    background: #1890ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
  }
}

.task-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;

  &:hover {
    background: #f5f7fa;
  }

  &.active {
    background: #e6f7ff;
    border-color: #1890ff;
  }

  .task-image {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 12px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .task-info {
    flex: 1;
    display: flex;
    flex-direction: column;

    .task-title {
      font-size: 14px;
      color: #333;
      margin-bottom: 4px;
    }

    .task-time {
      font-size: 12px;
      color: #999;
    }
  }

  .task-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;

    &.completed {
      background: #f6ffed;
      color: #52c41a;
    }

    &.processing {
      background: #fffbe6;
      color: #faad14;
    }

    &.pending {
      background: #f5f5f5;
      color: #666;
    }
  }
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow: hidden;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-shrink: 0;

  h2 {
    font-size: 20px;
    color: #333;
  }

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

    .btn-add-tag {
      padding: 6px 16px;
      background: #1890ff;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 13px;
      cursor: pointer;
    }

    .current-time {
      font-size: 14px;
      color: #999;
    }
  }
}

.content-body {
  display: flex;
  gap: 20px;
  flex: 1;
  overflow: hidden;
}

.center-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  padding-right: 8px;
}

.image-section {
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  min-height: 400px;
  background: #f5f5f5 url('/demo1.png') center center no-repeat;
  background-size: contain;

  .main-image {
    width: 100%;
    height: auto;
    display: block;
    max-height: 600px;
    object-fit: contain;
  }

  .image-nav {
    position: absolute;
    bottom: 16px;
    right: 16px;
    padding: 4px 12px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;

    .nav-info {
      margin-right: 12px;
    }
  }

  .tag-box {
    position: absolute;
    padding: 4px 10px;
    background: #1890ff;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transform: translate(-50%, -50%);

    &:hover {
      background: #40a9ff;
    }
  }
}

.ai-section {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  flex-shrink: 0;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;

    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }

  .ai-content {
    h4 {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin: 0 0 10px 0;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;

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

    p {
      font-size: 13px;
      color: #666;
      line-height: 1.6;
      margin: 0 0 12px 0;
    }

    .report-overview {
      background: #f6ffed;
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 16px;

      p {
        margin: 0;
        color: #52c41a;
      }
    }

    .hazard-item {
      background: #fffbf0;
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 12px;
      border-left: 3px solid #faad14;

      .hazard-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
        color: #333;
        margin-bottom: 8px;

        .hazard-icon {
          font-size: 16px;
        }
      }

      ul {
        margin: 0;
        padding-left: 24px;

        li {
          font-size: 12px;
          color: #666;
          line-height: 1.8;
        }
      }

      .risk-tag {
        display: inline-block;
        margin-top: 8px;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;

        &.high {
          background: #fff1f0;
          color: #ff4d4f;
        }

        &.medium {
          background: #fffbe6;
          color: #faad14;
        }

        &.low {
          background: #f6ffed;
          color: #52c41a;
        }
      }
    }

    .suggestion-list {
      .suggestion-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 10px;
        background: #f5f5f5;
        border-radius: 6px;
        margin-bottom: 8px;

        .priority {
          padding: 2px 6px;
          border-radius: 4px;
          font-size: 11px;
          font-weight: 500;
          flex-shrink: 0;
        }

        span:last-child {
          font-size: 12px;
          color: #666;
          line-height: 1.5;
        }

        &.high {
          background: #fff1f0;

          .priority {
            background: #ff4d4f;
            color: #fff;
          }
        }

        &.medium {
          background: #fffbe6;

          .priority {
            background: #faad14;
            color: #fff;
          }
        }

        &.base {
          background: #f6ffed;

          .priority {
            background: #52c41a;
            color: #fff;
          }
        }
      }
    }
  }
}

.right-panel {
  width: 360px;
  flex-shrink: 0;
}

.panel-section {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;

    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }

  .checklist {
    flex: 1;
    overflow-y: auto;

    .checklist-item {
      display: flex;
      align-items: flex-start;
      padding: 10px 0;
      border-bottom: 1px solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      input {
        margin-right: 12px;
        margin-top: 2px;
        cursor: pointer;
        flex-shrink: 0;
      }

      span {
        font-size: 13px;
        color: #666;
        line-height: 1.5;
      }

      &.checked span {
        text-decoration: line-through;
        color: #999;
      }
    }
  }
}
</style>
