<script setup lang="ts">
import { hzpjIcon, shjzIcon, qxjyIcon } from "@/utils/icons";
// @ts-expect-error ts-migrate(2339)  Property 'getTodayDuty' does not exist on type '{}'.
import messageLevel1 from "@/assets/images/message-level-1.png";
// @ts-expect-error ts-migrate(2339)  Property 'getTodayDuty' does not exist on type '{}'.
import messageLevel2 from "@/assets/images/message-level-2.png";
import { watch, ref } from "vue";
interface MessageCardProp {
  type: string; // 类型
  desp: string; // 描述
  time: string; // 时间
  address: string; // 地址
  dept: string; // 主管机构
  state: string; // 状态
}

const MessageTypes = {
  ["火灾扑救"]: {
    icon: hzpjIcon,
    background: messageLevel1,
    text: "火灾扑救",
  },
  ["社会救助"]: {
    icon: shjzIcon,
    background: messageLevel2,
    text: "社会救助",
  },
  ["抢险救援"]: {
    icon: qxjyIcon,
    background: messageLevel2,
    text: "抢险救援",
  },
  ["其他出动"]: {
    icon: qxjyIcon,
    background: messageLevel2,
    text: "其他出动",
  },
  [ "拉动演练"]: {
    icon: qxjyIcon,
    background: messageLevel2,
    text: "拉动演练",
  },
  [ "系统测试"]: {
    icon: qxjyIcon,
    background: messageLevel2,
    text: "系统测试",
  },
};

const props = defineProps<MessageCardProp>();
const type = ref<{icon: Icon, background: any, text: string}>();
watch(() => props.type, (value) => {
  type.value = MessageTypes[value]
}, {
  immediate: true
})

</script>

<template>
  <div :class=" props.state === '接警' ? ['message-card', 'bli-bli']:['message-card']">
    <div class="message-top">
      <div
        class="message-icon"
        :style="{ backgroundImage: `url(${type && type.background})` }"
      >
        <img
          :src="type.icon.src"
          :style="{ width: type.icon.width, height: type.icon.height }"
          alt=""
        />
        <span class="text">{{ type.text }}</span>
      </div>
    </div>
    <div class="message-detail">
      <div class="desp-info">
        <div class="desp">【描述】：{{ props.desp }}</div>
        <div :class="props.state === '接警' ? 'state-error' : 'state'">
          {{props.state}}
        </div>
      </div>
      <div class="detail-time" :title="props.time">案发时间：{{ props.time }}</div>
      <div class="detail-address" :title="props.address">案件地址：{{ props.address }}</div>
      <div class="detail-dept" :title="props.dept">主管机构：{{ props.dept }}</div>
    </div>
  </div>
</template>

<style scoped lang="less">
@import url("@/assets/css/common.less");

.init-icon(@icon,@width: 0.6vw, @height: 1.1vh) {
  content: "";
  display: inline-block;
  background: url("@/assets/images/icon/@{icon}") no-repeat;
  background-size: 100% 100%;
  width: @width;
  height: @height;
  margin-right: 0.3vw;
  margin-left: 0.3vw;
}



.message-card {
  width: 21vw;
  height: 12.9vh;
  background: url("@/assets/images/message-card.png") no-repeat;
  background-size: 100% 100%;
  margin-top: 1vh;
  margin-left: 0.5vw;
  margin-right: 0.5vw;
  padding: 1vh 1vw;
  cursor: pointer;

  &:hover {
    box-shadow: 0 2px 4px rgba(230, 181, 20, 10), 0 0 6px rgba(230, 181, 20, 10);
    border-radius: 0.3vw;
  }

  .message-top {
    .flex(space-between);
    .message-icon {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 6.9vw;
      height: 2.4vh;
      .flex(flex-start);
      padding-left: 0.5vw;
      .text {
        padding-left: 0.4vw;
      }
    }
  }

  .message-detail {

    .ellipsis(){
    }

    .flex(flex-start, flex-start);
    flex-direction: column;
    div[class^="detail"] {
      color: #aeeeff !important;
      // margin: 0.3vh 0vw;
      .line();
    }
    .desp-info {
      width: 100%;
      .flex(space-between);
      padding-left: -1vw;
      margin: 0.3vh 0vw;
      .desp {
        font-weight: 900;
        font-size: 0.6vw;
        color: #aeeeff !important;
        .line();
      }
      .state {
        border: 0.1vw solid #d9b834;
        color: #d9b834;
        border-radius: 0.2vw;
        padding: 0vh 0.2vw;
      }
      .state-error {
        border: 0.1vw solid red;
        color: red;
        border-radius: 0.2vw;
        padding: 0vh 0.2vw;
      }
    }

    .detail-time {
      .flex(flex-start);
      &::before {
        .init-icon("time-icon.png");
      }
      width: 100%;
      .ellipsis();
    }
    .detail-address {
      .flex(flex-start);
      &::before {
        .init-icon("address-icon.png", 0.6vw, 1.3vh);
      }      
      width: 100%;
      .ellipsis();
    }
    .detail-dept {
      .flex(flex-start);
      &::before {
        .init-icon("dept-icon.png");
      }
      width: 100%;
      .ellipsis();
    }
  }
}

@keyframes  error-bli-bli {
  to {
    box-shadow: none;
    border-radius: 0.3vw;
  }
  50% {
    box-shadow: 0 4px 6px rgb(175, 14, 14, 10), 0 0 8px rgb(175, 14, 14, 10);
    border-radius: 0.3vw;
  }
  from {
    box-shadow: none;
    border-radius: 0.3vw;
  }
}

.bli-bli {
  &:hover {
    box-shadow: 0 2px 4px rgb(175, 14, 14, 10), 0 0 6px rgb(175, 14, 14, 10);
    border-radius: 0.3vw;
  }
  animation: error-bli-bli 1.5s infinite;

}
</style>
