<template>
<!--  修改logo  -->
  <div class="page 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 {Toast} from "vant";
import {useRoute} from "vue-router";
import {useI18n} from "vue-i18n";

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


    // 初始化页面获取列表
    onMounted(async () => {
      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 { Toast.fail(data.message); }
    }

    const submitChange = async ()=> {
      console.log('提交：${logoNumber.value}');
      // TODO: 提交逻辑 done
      // if (deviceId.value === "") {
      //   Toast.fail(t('device.'))
      // }
      const { data } = await customLogo({
        id: deviceId,
      })
      if (data.code === '00000') {
        Toast.success(t('device.modificationSucceeded'));
      } else {
        Toast.fail(data.message);
      }
      console.log('submitChange', {equipmentId: deviceId});

    }

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

});
</script>

<style lang="less" scoped>
@import "../../common/style/common";
.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 100%;
  height: calc(100vh - 44px);
  overflow: hidden;
  
  .volumeChangeButton {
    background-color: #4d6add;
    width: 220px;
    height: 34px;
    margin: 49px auto;
    .van-button__text { font-size: 15px; }
  }
  .wrap1 {
    width: 100%;
    height: 274px;
  }
  
  .block2 {
  	width: 162px;
  	height: 20px;
  	margin: 18px 0 0 15px;
  
  	.block3 {
  		background-color: rgba(128, 150, 236, 1);
  		border-radius: 2px;
  		width: 4px;
  		height: 12px;
  		margin-top: 4px;
  	}
  
  	.info2 {
  		width: 150px;
  		height: 20px;
  		overflow-wrap: break-word;
  		color: rgba(64, 77, 116, 1);
  		font-size: 14px;
  		font-family: PingFangSC-Medium;
  		text-align: left;
  		white-space: nowrap;
  		line-height: 20px;
  		display: block;
  	}
  }
}
</style>
