<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-13 09:55:30
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-10-09 17:39:15
 * @FilePath: /danger-manage-web/src/views/indexComponents/Bottom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="bottom-wrapper flex">
    <div class="middle flex">
      <div class="box flex">
        <div
          class="item flex"
          v-for="item in data"
          :key="item.name"
          @click="activeChange(item)"
        >
          <div>
            <div class="img">
              <img
                :src="
                  activeArr.includes(item.deviceType)
                    ? item.iconActive
                    : item.icon
                "
                alt=""
              />
            </div>
            <div
              class="text"
              :class="{ active: activeArr.includes(item.deviceType) }"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// // 视频图标
// import video1 from "@/assets/indexImages/bottom/video1.png";
// import video2 from "@/assets/indexImages/bottom/video2.png";
// // 气体报警器提标
// import qtbjq1 from "@/assets/indexImages/bottom/qtbjq1.png";
// import qtbjq2 from "@/assets/indexImages/bottom/qtbjq2.png";

// // 用电探测器
// import ydtcq1 from "@/assets/indexImages/bottom/ydtcq1.png";
// import ydtcq2 from "@/assets/indexImages/bottom/ydtcq2.png";

// // 压力探测器
// import yltcq1 from "@/assets/indexImages/bottom/yltcq1.png";
// import yltcq2 from "@/assets/indexImages/bottom/yltcq2.png";

// // 温度探测器
// import wdtcq1 from "@/assets/indexImages/bottom/wdtcq1.png";
// import wdtcq2 from "@/assets/indexImages/bottom/wdtcq2.png";

// 工业探测器
import gytcq1 from "@/assets/indexImages/bottom/gytcq1.png";
import gytcq2 from "@/assets/indexImages/bottom/gytcq2.png";
// 温度变送器
import wdbsq1 from "@/assets/indexImages/bottom/wdbsq1.png";
import wdbsq2 from "@/assets/indexImages/bottom/wdbsq2.png";

// 压力监测设备
import yljcq1 from "@/assets/indexImages/bottom/yljcq1.png";
import yljcq2 from "@/assets/indexImages/bottom/yljcq2.png";
// 液位探测器
import ywtcq1 from "@/assets/indexImages/bottom/ywtcq1.png";
import ywtcq2 from "@/assets/indexImages/bottom/ywtcq2.png";
// 摄像头
import video1 from "@/assets/indexImages/bottom/video1.png";
import video2 from "@/assets/indexImages/bottom/video2.png";
export default {
  name: "",
  data() {
    return {
      data: [
        {
          name: "工业探测器",
          icon: gytcq1,
          iconActive: gytcq2,
          deviceType: 1,
        },
        {
          name: "温度变送器",
          icon: wdbsq1,
          iconActive: wdbsq2,
          deviceType: 2,
        },
        {
          name: "压力监测设备",
          icon: yljcq1,
          iconActive: yljcq2,
          deviceType: 3,
        },
        {
          name: "液位探测器",
          icon: ywtcq1,
          iconActive: ywtcq2,
          deviceType: 4,
        },
        {
          name: "摄像头",
          icon: video1,
          iconActive: video2,
          deviceType: 5,
        },
      ],
      activeArr: [1, 2, 3, 4, 5],
    };
  },
  methods: {
    activeChange(item) {
      const index = this.activeArr.indexOf(item.deviceType);
      if (index >= 0) {
        this.activeArr.splice(index, 1);
      } else {
        this.activeArr.push(item.deviceType);
      }
      this.$emit("deviceChange", {
        activeArr: this.activeArr,
        deviceType: item.deviceType,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.bottom-wrapper {
  width: 100%;
  height: 9.4%;
  position: absolute;
  bottom: 0px;
  justify-content: space-around;
  z-index: 1;

  .middle {
    width: 47.7%;
    height: 100%;
    max-width: 936px;
    background: url("~@/assets/indexImages/bottom/bottomBg.png") no-repeat;
    background-size: 100% 100%;
    justify-content: space-around;
    align-items: center;
    .box {
      width: 500px;
      height: 100%;
      box-sizing: border-box;
      padding-top: 10px;

      // background: red;
      .item {
        flex: 1;
        // background: yellow;
        justify-content: space-around;
        align-items: center;
        cursor: pointer;
        .img {
          text-align: center;
        }
        .text {
          text-align: center;
          font-size: 16px;
          color: rgba(156, 252, 248, 1);
          &.active {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
