<template>
  <!--  修改logo  -->
  <div class="viewLogsPage flex-col">
    <s-header :name="$t('device.customLogo.customLogo')" :noback="false"></s-header>
    <div class="block2 flex-row justify-between">
      <div class="block3 flex-col"></div>
      <span class="info2">{{ $t('device.equipmentName') }}：{{ deviceDetail ? deviceDetail.name : '' }}</span>
    </div>
    <div class="wrap1 flex-col o-pt-15">
      <van-field v-model="logoNumber" type="digit" :label="$t('device.customLogo.logoLabel')"
        :placeholder="$t('device.customLogo.logoPlaceholder')"
        :rules="[{ required: true, message: $t('device.customLogo.logoRequired') }]"></van-field>

      <van-button round :disabled="logoNumber === ''" type="primary" class="volumeChangeButton" @click="submitChange">{{
        $t('device.customLogo.registerButton') }}</van-button>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue';
import sHeader from "@/components/SimpleHeader.vue";
import { customLogo, getDeviceDetal } from "@/service/device";
import { showFailToast, showSuccessToast } from "vant";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import { styleUrl } from "../../common/js/utils";

export default defineComponent({
  setup() {
    const { t } = useI18n();
    const route = useRoute();
    const logoNumber = ref('');
    const deviceId = route.query.deviceId;
    const deviceDetail = ref(null);


    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      styleUrl('viewLogs');
      await getDeviceDetailFun();
      console.log(deviceDetail.value.name);
    });

    const getDeviceDetailFun = async () => {
      const { data } = await getDeviceDetal({ id: deviceId });
      if (data.code === '00000') {
        deviceDetail.value = data.data;
      } else { showFailToast(data.message); }
    }

    // 定制Logo
    const submitChange = async () => {
      console.log('提交：${logoNumber.value}');

      const { data } = await customLogo({
        deviceId: deviceId,
        logoNumber: logoNumber
      })
      if (data.code === '00000') {
        showSuccessToast(t('device.modificationSucceeded'));
      } else {
        showFailToast(data.message);
      }
      console.log('submitChange', { equipmentId: deviceId, logoNumber: logoNumber });

    }

    return {
      deviceDetail,
      logoNumber,
      submitChange,
    }
  },
  components: { sHeader },

});
</script>

<style lang="less" scoped>
@import "../../common/style/common";
</style>
