<template>
  <div class="collaboration-info">
    <div class="collaboration-info__header">
      <img
        src="../../assets/images/SketchPng5d7d0c9a19ebbe31859bb19ed24fd41e757f04c7980ce640abb9c2c693b54728.png"
        alt="info"
        class="header-icon"
      />
    </div>

    <div class="collaboration-info__list">
      <div
        v-for="info in collaborationInfo"
        :key="info.id"
        class="info-item"
      >
        <span
          class="info-source"
          :style="{ color: getSourceColor(info.source) }"
        >[{{ info.source }}]</span>
        <span class="info-content">{{ info.content }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { inject } from 'vue'

const { collaborationInfo } = inject('disasterData')

// 根据信息源返回对应的颜色
const getSourceColor = (source) => {
  const colorMap = {
    '气象预警': '#4A9EFF',      // 蓝色
    '气象部门': '#4A9EFF',      // 蓝色
    '公安部门': '#FF5555',      // 红色
    '交警部门': '#FF5555',      // 红色
    '应急管理': '#FF5555',      // 红色
    '融媒体中心': '#00D68F',    // 绿色
    '新闻中心': '#00D68F',      // 绿色
    '宣传部门': '#00D68F'       // 绿色
  }

  return colorMap[source] || '#4A9EFF' // ���认蓝色
}
</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;
@use '../../assets/styles/common.scss' as *;

.collaboration-info {
  position: relative;
  margin-top: vh(12);
  background: url('../../assets/images/信息面板bg.png') no-repeat center center;
  background-size: 100% 100%;
  padding: 2px;

  &__header {
    position: absolute;
    top: vh(16);
    right: vw(5);
    z-index: 1;

    .header-icon {
      width: vw(20);
      height: vh(20);
    }
  }

  &__list {
    display: flex;
    flex-direction: column;
    gap: vh(12);
    padding: vw(8) vw(16);
    max-height: vh(200);
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: vw(4);
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: var(--primary-light);
      border-radius: vw(2);

      &:hover {
        background: rgba(28, 161, 255, 0.6);
      }
    }

    .info-item {
      // padding: vh(12) vw(16);
      // background: rgba(20, 53, 118, 0.3);
      // border-radius: vw(4);
      // line-height: 1.8;

      .info-source {
        font-size: fs(13);
        font-family: SourceHanSansCN-Bold, sans-serif;
        font-weight: 700;
        margin-right: vw(4);  // 信息源和内容之间的小间距
      }

      .info-content {
        color: var(--text-white);
        font-size: fs(12);
        font-family: SourceHanSansCN-Regular, sans-serif;
      }
    }
  }
}
</style>
