<template>
  <!-- 音量调节 -->
  <div class="modulationPage flex-col">
    <s-header :name="$t('device.parameterAdjustment')" :noback="false"></s-header>
    <div class="wrap1 flex-col">
      <div class="box2 flex-col">
        <div class="section3 flex-row justify-between">
          <div class="box3 flex-col"></div>
          <span class="info1">{{ $t('device.equipmentName') }}：{{ deviceDetal ? deviceDetal.name : '' }}</span>
        </div>
        <img class="img1" referrerpolicy="no-referrer"
             src="../../assets/line.png" />
      </div>
      <div class="box4 flex-row justify-between">
        <span class="word3">{{ $t('device.slideSliderToAdjustVolume') }} : {{ volume }}</span>
        <!-- <span class="word4">{{volume}}</span> -->
      </div>
      <van-slider v-model="volume" :max="15" />
      <van-button round type="primary" class="volumeChangeButton"
                  @click="volumeChange()">{{ $t('device.submitModification') }}</van-button>
      <!-- <div class="box6 flex-col"><span class="word5">提交修改</span></div> -->
    </div>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import sHeader from "@/components/SimpleHeader";
import { useRoute, useRouter } from 'vue-router';
import { getDeviceDetal, updateVolume } from '@/service/device'
import { showFailToast, showDialog } from 'vant';
import { useI18n } from 'vue-i18n';
import { styleUrl } from '../../common/js/utils';

export default {
  setup() {
    const { t } = useI18n();
    const route = useRoute();
    const router = useRouter();
    const deviceId = route.query.deviceId;
    const deviceDetal = ref(null);
    const volume = ref(0);

    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      styleUrl('modulation');
      getDeviceDetalFun();
      console.log(deviceId);
    });

    // 获取设备列表数据
    const getDeviceDetalFun = async () => {
      const { data } = await getDeviceDetal({ id: deviceId });
      if (data.code === '00000') {
        deviceDetal.value = data.data;
        volume.value = data.data.volume ? data.data.volume : 0;
      } else { showFailToast(data.message); }
    }
    // 音量调节保存
    const volumeChange = async () => {
      // const volumeB = 15 / 100 ;
      // const volumeC = parseInt(volume.value * volumeB);
      const { data } = await updateVolume({ id: deviceId, volume: volume.value.toString() });
      if (data.code) {
        showDialog({
          confirmButtonColor: '#2c87c8',
          message: t('device.sentSuccessfully'),
        }).then(() => {
          //返回上一页
          router.go(-1);
        });
      } else { showFailToast(data.message); }
      console.log('volumeChange', { equipmentId: deviceId, volume: volume.value.toString() });
    }
    return {
      deviceDetal,
      volume,
      volumeChange
    };
  },
  components: { sHeader },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common";
</style>
