<template>
  <!-- 设备参数调整列表 -->
  <div class="paramsSetPage flex-col">
    <s-header :name="$t('device.parameterAdjustment')" :noback="false"></s-header>
    <div class="paramsSetBox">
      <div class="wrap2 flex-col van-hairline--bottom">
        <div class="outer1 justify-between">
          <div class="block1"></div>
          <span class="txt2">{{ $t('device.equipmentName') }}：{{ name ? name : $t("device.equipmentNameTips") }}</span>
        </div>
      </div>

      <div class="list van-hairline--bottom" @click="pushPage('0')">
        <div class="title">
          <img class="icon" src='../../../assets/device/currency1.png' />
          <span class="word3">{{ $t('device.generalParameterConfiguration') }}</span>
        </div>
        <div class="outer2 flex-col"></div>
      </div>

      <div class="list van-hairline--bottom" @click="pushPage('1')" v-if="machineType == 0">
        <div class="title">
          <img class="icon" src='../../../assets/device/advanced.png' />
          <span class="word3">{{ $t('device.advancedParameterConfiguration') }}</span>
        </div>
        <div class="outer2 flex-col"></div>
      </div>

      <div class="list van-hairline--bottom" @click="pushPage('2')" v-if="machineType == 0">
        <div class="title">
          <img class="icon" src='../../../assets/device/debug.png' />
          <span class="word3">{{ $t('device.debuggingParameterConfiguration') }}</span>
        </div>
        <div class="outer2 flex-col"></div>
      </div>
      
      <div class="list van-hairline--bottom" @click="pushPage('3')" v-if="machineType == 0">
        <div class="title">
          <img class="icon" src='../../../assets/device/humanness.png' />
          <span class="word3">{{ $t('device.humidityParameterConfiguration') }}</span>
        </div>
        <div class="outer2 flex-col"></div>
      </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 { styleUrl } from "../../../common/js/utils";

export default {
  components: { sHeader },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const deviceId = route.query.deviceId;
    const machineType = route.query.machineType;
    const name = route.query.name;
    const deviceDetal = ref();
    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      styleUrl('paramsSet');
      await getDeviceDetalFun();
    });
    // 获取设备列表数据
    const getDeviceDetalFun = async () => {
      const { data } = await getDeviceDetal({ id: deviceId });
      if (data.code === '00000') {
        deviceDetal.value = data.data;
      } else { showFailToast(data.message); }
    }
    const pushPage = (number) => {
      router.push({ path: 'paramsSetInfo', query: { type: number, deviceId: route.query.deviceId, machineType: route.query.machineType } })
    }
    return {
      deviceDetal,
      pushPage,
      machineType,
      name
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../../common/style/common";
</style>
