<template>
  <div class="wrapper">
    <div class="left">
      <div class="top">设备报警最新记录</div>

      <div class="bottom">
        <div class="one">设备编号:<span>1123123123</span></div>
        <div class="two">报警时间:<span>34523452345</span></div>
      </div>
    </div>

    <div class="right">
      <template v-for="item in list" >
        <div class="right-content" :key="item.type">
          <div class="text-icon">
            <i class="iconfont icon-gdcd"></i>
          </div>
          <div class="text">
            <div class="top">{{typeName[item.type]}}</div>
            <div class="bottom">{{item.number}}{{item.type==99?"KM":"个" }}</div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
    },
  },
  data(){
    return {
      typeName:{
        "1":"调压箱",
        "2":"阀门井",
        "3":"流量计",
        "4":"压力表",
        "99":"管道",
      },
      // type
    }
  },
  created() {
    console.log("list", this.list);
  },
};
</script>

<style lang="scss"  scoped>
.wrapper {
  width: 778px;
  height: 304px;
  position: fixed;
  right: 32px;
  bottom: 22px;
  // background-color: #fff;
  display: flex;
  justify-content: space-between;
  & > div {
  }
  .left {
    width: 278px;
    margin-right: 12px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
    background-color: #fff;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    .top {
      height: 32px;
      background-color: #053b6a;
      line-height: 32px;
      padding-left: 12px;
    }
    .bottom {
      & > div {
        height: 20px;
        padding-left: 32px;
        padding-bottom: 2px;
        &.one {
          background-color: #f0f0f0;
          color: #2788ea;
        }
        &.two {
          color: #676767;
        }
      }
    }
  }
  .right {
    width: 500px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    & > .right-content {
      background-color: #fff;
      width: 238px;
      height: 82px;
      margin-bottom: 29px;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
      display: flex;
      // align-items: center;
      .text-icon {
        line-height: 82px;
        padding-left: 22px;
        margin-right: 22px;
        i {
          color: #053b6a;
          font-size: 60px;
        }
      }
      .text {
        font-size: 14px;
        padding-top: 16px;
        .top {
          color: #000;
          margin-bottom: 10px;
          font-weight: 600;
        }
        .bottom {
          color: #2788ea;
        }
      }
    }
  }
}
</style>