<template>
  <div class="warnning-pane-wrapper" :style="{ width: width ? width : '1600px' }"
    :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">
      {{ showContent }}
      <div class="show-all-btn" v-if="props.warnningContent.length > 185" @click.stop="handleClickShowAll">
        <div class="text text-tip-2">
          {{ isShowAllContent? '收起' : '展开' }}
        </div>
        <div class="icon">
          <img v-if="!isShowAllContent" src="./icons/down.png" alt="">
          <img v-else src="./icons/up.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue'
import { ElMessage } from 'element-plus'


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

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

const showContent = computed(() => {
  if(!isShowAllContent.value) {
    return props.warnningContent.length > 185 ? props.warnningContent.slice(0,185) + '...' : props.warnningContent
  } else {
    return props.warnningContent
  }
})

const emit = defineEmits(['clickPane'])

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

const isShowAllContent = ref(false)

const handleClickShowAll = () => {
  isShowAllContent.value = !isShowAllContent.value
}

</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);
  // cursor: pointer;
  height: max-content;
}

.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;
  position: relative;
  .show-all-btn {
    position: absolute;
    right: 0px;
    bottom: 4px;
    width: 48px;
    height: 22px;
    display: flex;
    gap: 4px;
    cursor: pointer;
    .text{
      color: var(--text-primary-50-color);
      &:hover{
        color: var(--color-primary-100);
      }
    }
    .icon{
      width: 16px;
      height: 16px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>