<template>
  <div class="warnning-pane-wrapper" :style="{ width: width ? width : '1600px', height: height ? height : '116px' }"
    :class="{
      level1: warnningLevel === '特别重大风险',
      level2: warnningLevel === '重大风险',
      level3: warnningLevel === '较大风险',
      level4: warnningLevel === '一般风险',
    }" @click="handleClickPane">
    <div class="warnning-pane-header">
      <div class="header-left" :class="{
        'header-left-level1': warnningLevel === '特别重大风险',
        'header-left-level2': warnningLevel === '重大风险',
        'header-left-level3': warnningLevel === '较大风险',
        'header-left-level4': warnningLevel === '一般风险',
      }">
        <div class="warnning-icon">
          <img src="./icons/warnning-icon.svg" alt="">
        </div>
        <div class="warnning-text text-title-3-bold">{{ warnningLevel }}</div>
      </div>
      <div class="header-right">
        <img v-if="warnningLevel === '特别重大风险'" src="./icons/level1.svg" alt="">
        <img v-else-if="warnningLevel === '重大风险'" src="./icons/level2.svg" alt="">
        <img v-else-if="warnningLevel === '较大风险'" src="./icons/level3.svg" alt="">
        <img v-else-if="warnningLevel === '一般风险'" src="./icons/level4.svg" alt="">
        <img v-else src="./icons/level5.svg" alt="">
      </div>
    </div>
    <div class="warnning-pane-content text-regular">
      {{ warnningContent }}
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'


const props = defineProps(
  {
    warnningContent: {
      type: String,
      default: ''
    },

    warnningLevel: {
      type: String,
      default: '低风险'
    }
  }
)

const emit = defineEmits(['clickPane'])

const handleClickPane = () => {
  ElMessage.success('点击了预警面板')
  emit('clickPane')
}

</script>

<style lang="scss" scoped>
.warnning-pane-wrapper {
  border-radius: 10px;
  border: 1px solid var(--color-primary-100);
  box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
}

.level1 {
  border: 1px solid var(--color-red-100) !important;
}

.level2 {
  border: 1px solid var(--color-orange-100) !important;
}

.level3 {
  border: 1px solid var(--color-yellow-100) !important;
}

.level4 {
  border: 1px solid var(--color-green-100) !important;
}

.warnning-pane-header {
  height: 44px;
  display: flex;
  justify-content: space-between;

}

.header-left {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 164px;
  height: 32px;
  background: var(--color-main-active);
  border-radius: 10px 0 10px 0;
}

.header-left-level1 {
  background: var(--color-red-100) !important;
}

.header-left-level2 {
  background: var(--color-orange-100) !important;
}

.header-left-level3 {
  background: var(--color-yellow-100) !important;
}

.header-left-level4 {
  background: var(--color-green-100) !important;
}

.warnning-icon {
  width: 16px;
  height: 16px;

  img {
    width: 100%;
    height: 100%;
  }
}

.warnning-text {
  color: #fff;
}

.header-right {
  width: 16px;
  height: 16px;
  margin-top: 17px;
  margin-right: 16px;

  img {
    width: 100%;
    height: 100%;
  }
}

.warnning-pane-content{
  width: calc(100% - 40px);
  margin: 0 auto;
  height: 60px;
  display: -webkit-box;
  /* 2. 设置内部布局方向为垂直 */
  -webkit-box-orient: vertical;
  /* 3. 限制显示的行数为 2 行 */
  -webkit-line-clamp: 2;
  /* 4. 隐藏超出部分 */
  overflow: hidden;
  /* 5. 设置文本溢出显示省略号 */
  text-overflow: ellipsis;
}
</style>