<template>
  <!-- 设备参数调整 -->
  <div class="paramsSetPage flex-col">
    <s-header :name="paramsTitle" :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="paramsList" v-for="(item, key) in paramsList" :key="key">
        <van-field
          v-model="item.val"
          name="phone"
          type="tel"
          :label="item.name"
        >
          <template #button>
            <van-button size="small" type="primary" class="updataButton" @click="updateParams(item)">{{$t('device.submitUpdates')}}</van-button>
          </template>
        </van-field>
      </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 } from "vue-router";
import { getDeviceDetal, getParameters, updateParameters } from "@/service/device";
import { Toast } from "vant";
import { useI18n } from 'vue-i18n';

export default {
  components: { sHeader, navBar },
  setup() {
    const { t } = useI18n();
    const route = useRoute();
    const deviceId = route.query.deviceId;
    const deviceDetal = ref(null);
    const paramsTitle = ref("");
    const paramsList = ref([]);
    // 初始化页面获取列表
    onMounted(async () => {
      if (route.query.type === "0") {
        paramsTitle.value = t('device.generalParameterConfiguration');
      }
      if (route.query.type === "1") {
        paramsTitle.value = t('device.advancedParameterConfiguration');
      }
      if (route.query.type === "2") {
        paramsTitle.value = t('device.debuggingParameterConfiguration');
      }
      if (route.query.type === "3") {
        paramsTitle.value = t('device.humidityParameterConfiguration');
      }
      getDeviceDetalFun();
    });
    // 获取设备列表数据
    const getDeviceDetalFun = async () => {
      const { data } = await getDeviceDetal({ id: deviceId });
      if (data.code === "00000") {
        deviceDetal.value = data.data;
        getParametersFun();
      } else {
        Toast.fail(data.message);
      }
    };
    const getParametersFun = async () => {
      paramsList.value = [];
      const params = {
        id: deviceId,
        status: route.query.type,
        clientId: deviceDetal.value.clientId,
      };
      const { data } = await getParameters(params);
      if (data.code) {
        paramsList.value = data.data;
      } else {
        Toast.fail(data.message);
      }
    };
    const updateParams = async (item) => {
      const params = {
        id: deviceId,
        name: item.name,
        val: item.val,
      };
      const { data } = await updateParameters(params);
      if (data.code) {
        Toast.success(t('device.modificationSucceeded'));
      } else {
        Toast.fail(data.message);
      }
    }
    return {
      deviceDetal,
      paramsTitle,
      paramsList,
      updateParams
    };
  },
};
</script>
  <style lang="less" scoped>
@import "../../../common/style/common";
@import "./index.less";
</style>
  