<template>
  <div class="warnDetail">
    <div class="title">
      <div class="icon"></div>
      <p>
        当日告警事件 <span>{{ count }}</span>
      </p>
    </div>
    <div class="content">
      <div class="cell" v-if="count != 0">
        <p class="cell_label"></p>
        <div style="width: 150px; height: 10px"></div>
        <p class="cell_count">数量</p>
        <p class="cell_count">处置率</p>
      </div>
      <div class="cell" v-for="(item, index) in data" :key="index">
        <p class="cell_label">{{ item.label }}</p>
        <div class="cell_width">
          <div
            class="deep"
            v-if="maxCount !== 0"
            :style="{ width: (item.total / maxCount) * 150 + 'px' }"
          >
            <div class="deep2"></div>
          </div>
          <div class="deep" v-else style="width: 2px">
            <div class="deep2"></div>
          </div>
        </div>
        <p class="cell_count">{{ item.total }}</p>
        <p class="cell_count" style="color: #fcb000">
          {{ item.disposeRate + "%" }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "WarnDetail",
  props: {
    data: {
      type: Array,
      default: () => {
        [];
      },
    },
    maxCount: {
      type: Number,
      default: 0,
    },
    count: {
      type: Number,
    },
  },
  mounted() {},
};
</script>

<style lang="stylus" scoped>
.warnDetail {
  width: 384px;
  height: 320px;
  margin-top: 10px;
  background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
  border-radius: 4px;
  border: 2px solid #00356D;

  .title {
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    background: linear-gradient(270deg, #072B4D 0%, #134778 100%);

    .icon {
      width: 2px;
      height: 20px;
      background: #5CE3FB;
      border-radius: 2px;
    }

    p {
      margin-left: 10px;
      font-size: 20px;
      font-weight: 400;
      color: #5CE3FB;

      span {
        font-weight: 500;
        color: #FC672C;
      }
    }
  }

  .content {
    padding: 20px;
    font-size: 12px;
    color: #ffffff;
    height 75%;
    overflow-y: auto;

    .cell {
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 16px;

      .cell_label {
        width: 80px;
      }

      .cell_width {
        width: 150px;
        height: 10px;

        .deep {
          height: 10px;
          background: url('~@/assets/deep1_icon.png');

          .deep2 {
            width: 100%;
            height: 100%;
            background: url('~@/assets/deep2_icon.png');
            opacity: 0.1;
            /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
            animation-name: breath; /* 动画名称 */
            animation-duration: 3s; /* 动画时长3秒 */
            animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
            animation-iteration-count: infinite; /* 播放次数：无限 */
            /* Safari and Chrome */
            -webkit-animation-name: breath; /* 动画名称 */
            -webkit-animation-duration: 3s; /* 动画时长3秒 */
            -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
            -webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
          }

          @keyframes breath {
            from {
              opacity: 0.1;
            }

            /* 动画开始时的不透明度 */
            50% {
              opacity: 1;
            }

            /* 动画50% 时的不透明度 */
            to {
              opacity: 0.1;
            }

            /* 动画结束时的不透明度 */
          }
        }
      }

      .cell_count {
        width: 50px;
        text-align: center;
      }
    }
  }
}
</style>
