<template>
  <!-- 设备参数调整列表 -->
  <div class="paramsSetPage flex-col">
    <s-header :name="$t('device.parameterAdjustment')" :noback="false"></s-header>
    <div class="paramsSetBox mod1 flex-col">
      <div class="wrap2 flex-col van-hairline--bottom">
        <div class="outer1 flex-row justify-between">
          <div class="block1 flex-col"></div>
          <span class="txt2">{{$t('device.equipmentName')}}：{{deviceDetal ? deviceDetal.name : ''}}</span>
        </div>
      </div>
      <div class="list van-hairline--bottom" @click="pushPage('0')">
        <div class="title">
          <div class="section4 flex-col">
            <div class="main4 flex-col"></div>
          </div>
          <span class="word3">{{$t('device.generalParameterConfiguration')}}</span>
        </div>
        <div class="outer2 flex-col"></div>
      </div>
      <div class="list van-hairline--bottom" @click="pushPage('1')">
        <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')">
        <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')">
        <div class="title">
          <img class="icon" src='../../../assets/device/debug.png' />
          <span class="word3">{{$t('device.humidityParameterConfiguration')}}</span>
        </div>
        <div class="outer2 flex-col"></div>
      </div>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import navBar from '@/components/NavBar';
import sHeader from "@/components/SimpleHeader";
import { useRoute, useRouter } from 'vue-router';
import { getDeviceDetal } from '@/service/device'
import { Toast } from 'vant';

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