<template>
  <div class="parameter-settings">
    <s-header :name="$t('device.parameterAdjustment')" :noback="false" />

    <!-- 设备信息卡片 -->
    <div class="device-card">
      <div class="device-header">
        <van-icon name="desktop-o" class="icon" />
        <h3 class="device-name">
          {{ equipmentName }}
        </h3>
      </div>
    </div>

    <!-- 参数设置列表 -->
    <div class="settings-list">
      <div
        v-for="(item, index) in menuItems"
        :key="index"
        class="menu-card"
        @click="handleMenuItemClick(item)"
      >
        <div class="menu-content">
          <img
            class="menu-icon"
            :src="getIconPath(item.icon)"
            :alt="item.title"
          />
          <div class="menu-info">
            <h4 class="menu-title">{{ item.title }}</h4>
            <p class="menu-desc">
              {{ item.description }}
            </p>
          </div>
        </div>
        <van-icon name="arrow" class="menu-arrow" />
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { useRoute, useRouter } from "vue-router";
import { getDeviceDetal } from "@/service/device";
import { showFailToast } from "vant";
import { useI18n } from "vue-i18n";

export default {
  components: { sHeader },
  setup() {
    const { t } = useI18n();
    const router = useRouter();
    const route = useRoute();
    const deviceId = route.query.deviceId;
    const machineType = route.query.machineType;
    const equipmentName = route.query.name;
    const deviceDetal = ref();
    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      await getDeviceDetalFun();
      if (machineType === "0") {
        menuItems.value.push(
          {
            id: "1",
            icon: "advanced.png",
            title: t("device.advancedParameterConfiguration"),
          },
          {
            id: "2",
            icon: "debug.png",
            title: t("device.debuggingParameterConfiguration"),
          },
          {
            id: "3",
            icon: "humanness.png",
            title: t("device.humidityParameterConfiguration"),
          }
        );
      }
    });

    const menuItems = ref([
      {
        id: "0",
        icon: "currency1.png",
        title: t("device.generalParameterConfiguration"),
      }
    ]);
    const getIconPath = (icon) => {
      return require(`../../../assets/device/${icon}`);
    };
    // 获取设备列表数据
    const getDeviceDetalFun = async () => {
      const { data } = await getDeviceDetal({ id: deviceId });
      if (data.code === "00000") {
        deviceDetal.value = data.data;
      } else {
        showFailToast(data.message);
      }
    };

    const handleMenuItemClick = (item) => {
      if (item.requiresMachineType && machineType !== 0) return;
      pushPage(item.id);
    };
    const pushPage = (number) => {
      router.push({
        path: "paramsSetInfo",
        query: {
          type: number,
          deviceId: route.query.deviceId,
          machineType: route.query.machineType,
          name: equipmentName,
        },
      });
    };
    return {
      deviceDetal,
      pushPage,
      machineType,
      menuItems,
      handleMenuItemClick,
      getIconPath,
      equipmentName,
    };
  },
};
</script>
<style lang="less" scoped>
@primary-color: #4d6add;
@card-bg: #ffffff;
@text-primary: #2d3436;
@border-color: #e4e7ec;

.parameter-settings {
  background: #f8fafb;
  min-height: 100vh;
}

.device-card {
  background: @card-bg;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  margin: 10px;
  padding: 16px;

  .device-header {
    display: flex;
    align-items: center;

    .icon {
      font-size: 18px;
      color: @primary-color;
      margin-right: 10px;
    }

    .device-name {
      margin: 0;
      font-size: 15px;
      color: #404d74;
      font-weight: 550;

      // 长名称处理
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 70vw;
    }
  }
}

.settings-list {
  .menu-card {
    background: @card-bg;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin: 10px;
    padding: 16px;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:active:not(.disabled) {
      transform: scale(0.98);
      background: darken(@card-bg, 2%);
    }

    &.disabled {
      opacity: 0.6;
      filter: grayscale(0.8);
      cursor: not-allowed;
    }

    .menu-content {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .menu-icon {
      width: 30px;
      height: 30px;
      margin-right: 16px;
      object-fit: contain;
    }

    .menu-info {
      flex: 1;
      .menu-title {
        font-size: 15px;
        color: @text-primary;
        margin: 0 0 4px;
      }
      .menu-desc {
        font-size: 12px;
        color: #666;
        margin: 0;
      }
    }

    .menu-arrow {
      color: #c0c4cc;
      font-size: 16px;
      margin-left: 12px;
    }
  }
}

@media (max-width: 480px) {
  .menu-card {
    padding: 12px !important;

    .menu-icon {
      width: 20px !important;
      height: 20px !important;
      margin-right: 12px !important;
    }

    .menu-title {
      font-size: 14px !important;
    }
  }
}
</style>
