<template>
  <div class="collaboration-info" :class="{ 'is-collapsed': isCollapsed }">
    <div class="collaboration-info__header">
      <img
        src="../../assets/images/SketchPng5d7d0c9a19ebbe31859bb19ed24fd41e757f04c7980ce640abb9c2c693b54728.png"
        alt="info"
        class="header-icon"
        @click="toggleCollapse"
      />
    </div>

    <div class="collaboration-info__list">
      <div
        v-for="(info, index) in displayedInfo"
        :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, ref, computed } from "vue";

const { collaborationInfo } = inject("disasterData");

// 折叠状态
const isCollapsed = ref(false);

// 切换折叠状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

// 根据折叠状态显示的信息
const displayedInfo = computed(() => {
  if (isCollapsed.value && collaborationInfo.value.length > 0) {
    // 折叠时只显示第一条
    return [collaborationInfo.value[0]];
  }
  // 展开时显示全部
  return collaborationInfo.value;
});

// 根据信息源返回对应的颜色
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;
  border: 2px solid transparent;
  // &:hover {
  //   border: 2px solid rgba(255, 80, 80, 0.6);
  //   box-shadow: 0 0 10px rgba(255, 80, 80, 0.6), 0 0 20px rgba(255, 0, 0, 0.4),
  //     0 0 35px rgba(255, 0, 0, 0.25);
  // }

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

    .header-icon {
      width: vw(20);
      height: vh(20);
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  &__list {
    display: flex;
    flex-direction: column;
    gap: vh(12);
    padding: vw(8) vw(16);
    max-height: vh(200);
    overflow-y: auto;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 1;

    &::-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;
      }
    }
  }

  // 折叠状态
  &.is-collapsed {
    .header-icon {
      transform: rotate(180deg);
    }

    .collaboration-info__list {
      max-height: vh(30); // 折叠时只显示一行的高度
      overflow: hidden;

      .info-item:not(:first-child) {
        opacity: 0;
        transform: translateY(-10px);
      }
    }
  }

  // 为列表项添加过渡
  .info-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
}
</style>
