<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="paramName[key]">
          <template #button>
            <van-button size="small" type="primary" class="updataButton"
              @click="updateParams(item)">{{ $t('device.submitUpdates') }}</van-button>
          </template>
        </van-field>
      </div>
    </div>
  </div>
</template>

<script>
// import { createApp } from "vue";
// import App from './App.vue';
import { onMounted, ref } from "vue";
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';
// import zh from '@/assets/language/zh.json';

export default {
  components: { sHeader },
  setup() {
    const { t } = useI18n();
    const route = useRoute();
    const deviceId = route.query.deviceId;
    const deviceDetal = ref(null);
    const paramsTitle = ref("");
    const paramsList = ref([]);
    const comParams = ref([]);
    const paramName = ref([]);

    // const paramNames = reactive({
    //   name : '',
    //   value : '',
    // });

    // 初始化页面获取列表
    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;
        paramsList.value.forEach((paramItem) => {
          // console.log(paramItem.name);
          comParams.value.push(paramItem.name);
          paramName.value.push(t("paramNames." + paramItem.name));
          // paramName.value.push(paramItem.name);
          // console.log(zh.paramNames[paramItem.name]);        
        })
        // console.log(comParams.value);

      } else {
        Toast.fail(data.message);
      }
    };
    /*     const paramName = computed(() => {
          return zh.paramNames[comParams.value.name];
        }) */
    // const paramName = zh.paramNames[comParams.value.name];
    // console.log(t("paramNames.D405"));


    // // 定义过滤器
    // computed: {
    //   paramName: () => {
    //     const paramNames = {
    //       D405: '炉头低速',
    //     };
    //     return paramNames[item.name] || '';
    //   }
    // }
    // const app = createApp(App);
    // app.config.globalProperties.$filters = {
    //   getParamName(name) {
    //     const paramNames = {
    //       D405: '炉头低速',
    //     };
    //     return paramNames[name];
    //   },
    // };
    // const getParamName = async (name) => {
    //   const paramNames = {
    //     D405: '炉头低速',
    //   };
    //   return paramNames[name];
    // };
    // getParamName.config.globalProperties.$filters = {
    //   getParamName(name) {

    //   }
    // }

    // 更新参数值
    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,
      // getParamName,
      updateParams,
      paramName
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../../common/style/common";
@import "./index.less";
</style>
  