<template>
  <div class="weather-tips">
    <div class="disaster-warning-list" v-if="disasterWarningList.length > 0">
      <div
        class="weather-warning"
        :class="`weather-warning--${getWarningLevel(item.disasterType)}`"
        v-for="item in disasterWarningList"
        :key="item.disasterType"
      >
        <SvgIcon
          iconName="weather-warning"
          :color="getWarningIconColor(item.disasterType)"
          width="18px"
          height="18px"
        />
        <span class="weather-warning__text">{{ item.disasterName }}</span>
      </div>
    </div>
    <div class="tips-content">
      <div class="title">{{ title }}</div>
      <div class="content">{{ measure }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import SvgIcon from '@/components/SvgIcon/SvgIcon.vue';
  import { DisasterWarningListType } from '../WeatherCard.vue';

  defineProps<{
    title: string | undefined;
    measure: string | undefined;
    disasterWarningList: DisasterWarningListType[];
  }>();

  // 预警等级样式配置
  const levelStyles = {
    blue: {
      iconColor: 'rgba(23, 119, 255, 1)',
      arrowColor: 'rgba(23, 119, 255, 0.8)',
    },
    yellow: {
      iconColor: 'rgba(250, 173, 20, 1)',
      arrowColor: 'rgba(250, 173, 20, 0.8)',
    },
    orange: {
      iconColor: 'rgba(255, 124, 77, 1)',
      arrowColor: 'rgba(255, 124, 77, 0.8)',
    },
    red: {
      iconColor: 'rgba(255, 77, 79, 1)',
      arrowColor: 'rgba(255, 77, 79, 0.8)',
    },
  };

  // 根据类型判断预警等级
  const getWarningLevel = (disasterType: string) => {
    const type = disasterType.toLowerCase();
    if (type.includes('red')) return 'red';
    if (type.includes('orange')) return 'orange';
    if (type.includes('yellow')) return 'yellow';
    if (type.includes('blue')) return 'blue';

    return 'blue'; // 默认蓝色
  };

  const getWarningIconColor = (disasterType: string) => {
    return levelStyles[getWarningLevel(disasterType)].iconColor;
  };
</script>

<style scoped lang="scss">
  .weather-tips {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    backdrop-filter: blur(10px);
    padding: 16px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .disaster-warning-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    .weather-warning {
      display: inline-flex;
      align-items: center;
      padding: 5px 16px;
      transition: all 0.3s ease;
      border-radius: 16px;
      font-size: 16px;
      font-weight: 600;
      gap: 5px;
      backdrop-filter: blur(10px);

      // 蓝色预警
      &--blue {
        background-color: rgb(23 119 255 / 15%);

        .weather-warning__text {
          color: #1777ff;
        }
      }

      // 黄色预警
      &--yellow {
        background-color: rgb(250 173 20 / 15%);

        .weather-warning__text {
          color: #faad14;
        }
      }

      // 橙色预警
      &--orange {
        background-color: rgb(255 124 77 / 15%);

        .weather-warning__text {
          color: #ff7c4d;
        }
      }

      // 红色预警
      &--red {
        background-color: rgb(255 77 77 / 15%);

        .weather-warning__text {
          color: #ff4d4f;
        }
      }
    }
  }

  .tips-content {
    flex: 1;
    overflow: auto;

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #333333;
      margin-bottom: 8px;
    }

    .content {
      font-size: 14px;
      color: #333333;
      white-space: pre-line;
      line-height: 24px;
    }
  }
</style>
