<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" :class="[iconClass(item),{iconFontSize: item.type==4 }]"></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: "管道",
      },
      iconList: {
        1: "icon-tyxgs",
        2: "icon-fmjgs",
        3: "icon-lljgs",
        4: "icon-ylbgs",
        99: "icon-gdcd",
      },
    };
  },
  created() {
    console.log("list", this.list);
  },
  methods: {
    iconClass(item) {
      return this.iconList[item.type]
    },
  },
};
</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;
        }
      }
    }
  }
  // 单独调整下最后一个icon的大小
  .iconFontSize{
    font-size: 50px !important;
  }
}
</style>