<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-06 13:42:45
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-09-14 10:36:28
 * @FilePath: /danger-manage-web/src/views/indexComponents/leftComponents/deviceYx.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="first-wrapper flex">
    <Title />

    <div class="two flex">
      <div class="top flex">
        <div class="left flex">
          <div class="t flex">
            <img :src="zaixian" alt="" />
            <div>在线设备</div>
          </div>
          <div class="b">
            <div><Chars color="rgba(87, 248, 242, 1)" num="443" /></div>
            <!-- <div></div> -->
          </div>
        </div>
        <div class="middle flex">
          <div class="t flex">
            <img :src="lixian" alt="" />
            <div>离线设备</div>
          </div>
          <div class="b">
            <div><Chars color="rgba(250, 181, 61, 1)" /></div>
            <!-- <div></div> -->
          </div>
        </div>
        <div class="right flex">
          <div class="t flex">
            <img :src="baojing" alt="" />
            <div>报警设备</div>
          </div>
          <div class="b">
            <div><Chars color="rgba(236, 68, 68, 1)" num="5" /></div>

            <!-- <div></div> -->
          </div>
        </div>
      </div>
      <div class="bottom flex">
        <div
          v-for="item in btnObj"
          :key="item.name"
          class="btn flex"
          :class="{ active: btnActive == item.name }"
          @click="dangerDeviceChange(item)"
          style=":hover[color: red]"
        >
          <div>{{ item.name }}</div>
          <img
            :src="btnActive == item.name ? item.iconActive : item.icon"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/views/indexComponents/allComponents/Title";
import zaixian from "@/assets/indexImages/zaixian.png";
import lixian from "@/assets/indexImages/lixian.png";
import baojing from "@/assets/indexImages/baojing.png";
import wxyjka from "@/assets/indexImages/wxyjka.png";
import wxyjkb from "@/assets/indexImages/wxyjkb.png";
import fxqyfba from "@/assets/indexImages/fxqyfba.png";
import fxqyfbb from "@/assets/indexImages/fxqyfbb.png";
import Chars from "@/components/allCharsCom/Chars";

export default {
  name: "",
  components: {
    Title,
    Chars,
  },
  data() {
    return {
      btnObj: [
        { type: 1, name: "危险源监控", icon: wxyjka, iconActive: wxyjkb },
        { type: 2, name: "风险区域分布", icon: fxqyfba, iconActive: fxqyfbb },
      ],
      btnActive: "危险源监控",
      zaixian,
      lixian,
      baojing,
    };
  },
  methods: {
    dangerDeviceChange(item) {
      if (item.name == this.btnActive) return;
      this.btnActive = item.name;
      this.$emit("dangerDeviceChange", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.first-wrapper {
  width: 100%;
  height: 31.21%;
  // background: blue;
  flex-direction: column;
  > div {
    // width: 100%;
  }
  .two {
    flex: 1;
    flex-direction: column;
    // background: wheat;
    .top {
      width: 100%;
      // height: 54.2%;
      height: 60%;
      // background: red;
      justify-content: space-between;
      > div {
        // background: blue;
        font-size: 16px;
        color: #ffffff;
        flex-direction: column;
        .t {
          align-items: center;
          img {
            margin-right: 6px;
          }
        }
        .b {
          flex: 1;
          box-sizing: border-box;
          padding-left: 26px;
          div {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .bottom {
      flex: 1;
      justify-content: space-around;
      > .btn {
        width: 173px;
        height: 46px;
        background: rgba(7, 41, 80, 0.65);
        color: #76f9f4;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        &.active {
          color: #ffffff;
          background: rgb(25, 152, 187);
        }
        img {
          margin-left: 5px;
        }
        // &:hover {
        //   color: #ffffff;
        //   background: rgb(25, 152, 187, 0.8);
        // }
      }
    }
  }
}
</style>
