<template>
  <view class="device-type-modal">
    <scroll-view>
      <!-- 通风设备 -->
      <view v-for="(typeitem, index) in typeList" :key="index">
        <view
          class="cu-bar bg-white solid-bottom margin-top"
          :style="[{ animation: 'show 0.5s 1' }]"
        >
          <view class="action">
            <text style="font-weight: bold">{{ typeitem.itemText }}</text>
          </view>
        </view>

        <view class="cu-list grid col-4 text-sm">
          <view
            class="cu-item animation-slide-bottom"
            :style="[{ animationDelay: (index + 1) * 0.05 + 's' }]"
            v-for="(item, index) in typeitem.children"
            :key="index"
            @tap="goPage(item.itemValue)"
          >
            <view class="padding text-center">
              <image
                :src="icon_prefix + 'bottombg.png'"
                style="width: 50px; height: 30px"
              >
              </image>
              <image class="icon" :src="getIcon(item.itemValue)" alt="Icon" />
              <view class="margin-top-xs">{{ item.itemText }}</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="cu-tabbar-height margin-top"></view>
  </view>
</template>

<script>
import { us, os } from "@/common/util/type.js";
import socket from "@/common/js-sdk/socket/socket.js";
import api from "@/api/api";
export default {
  name: "home",
  watch: {},
  data() {
    return {
      icon_prefix: "/static/sidebar/",
      typeList: [],
      usList: us.data,
      osList: os.data,
      dsList: os.data,
      msgCount: 0,
      dot: {
        mailHome: false,
      },
      iconMap: {
        gate: "/static/sidebar/ventS/gate.svg",
        window: "/static/sidebar/ventS/window.svg",
        windrect: "/static/sidebar/ventS/windrect.svg",
        fanmain: "/static/sidebar/ventS/fanmain.svg",
        fanlocal: "/static/sidebar/ventS/fanlocal.svg",
        drilling: "/static/sidebar/gasS/drilling.svg",
        gasmonitor: "/static/sidebar/gasS/gasmonitor.svg",
        pump: "/static/sidebar/gasS/pump.svg",
        unit: "/static/sidebar/gasS/unit.svg",
        dusting: "/static/sidebar/dustS/dusting.svg",
        spray: "/static/sidebar/dustS/spray.svg",
        bundletube: "/static/sidebar/fireS/bundletube.svg",
        fiber: "/static/sidebar/fireS/fiber.svg",
        nitrogen: "/static/sidebar/fireS/nitrogen.svg",
        obfurage: "/static/sidebar/fireS/obfurage.svg",
        pulping: "/static/sidebar/fireS/pulping.svg",
        atomizing: "/static/sidebar/dustS/atomizing.svg",
      },
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      return new Promise((resolve, reject) => {
        api
          .getDeviceType({})
          .then((response) => {
            if (response.data.code == 200) {
              for (var i = 0; i < response.data.result.length; i++) {
                if (
                  response.data.result[i].itemValue.indexOf("synthesizeS") == -1
                )
                  this.typeList.push(response.data.result[i]);
              }
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    goPage(page) {
      this.$emit("menuClick", page);
    },
    getIcon(itemValue) {
      const defaultIconPath = "/static/sidebar/fireS/pulping.svg";

      // 检查 iconMap 中是否存在对应的图标路径
      if (itemValue && this.iconMap[itemValue]) {
        return "/static/sidebar/" + itemValue + ".svg";
      }
      // 如果不存在对应的图标路径，则返回默认图标路径
      return defaultIconPath;
    },
  },
};
</script>

<style scoped lang="scss">
.device-type-modal {
  margin-top: 30rpx;
}
.cu-list.grid > .cu-item {
  padding: 0rpx 0rpx;
  background: linear-gradient(
    to right,
    rgba(55, 135, 254, 0.08),
    rgba(4, 184, 255, 0.08),
    rgba(60, 161, 237, 0.08)
  );
}
.line2-icon {
  width: 60rpx;
  height: 60rpx;
}
.icon {
  position: absolute;
  top: 5rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 20rpx;
  height: 20rpx;
}
</style>
