<template>
  <div class="custom-logo-page">
    <!-- 自定义头部 -->
    <s-header :name="$t('device.customLogo.customLogo')" :noback="false" />

    <!-- 设备信息 -->
    <div class="device-header">
      <van-icon name="desktop-o" class="icon" />
      <h3 class="device-name">
        {{ equipmentName }}
      </h3>
    </div>

    <!-- 主内容区 -->
    <div class="content-container">
      <van-form @submit="submitChange">
        <!-- 输入框 -->
        <van-field
          v-model="logoNumber"
          type="digit"
          clearable
          center
          :label="$t('device.customLogo.logoLabel')"
          :placeholder="$t('device.customLogo.logoPlaceholder')"
        />

        <!-- 操作按钮 -->
        <div class="form-actions">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            class="submit-button"
            :disabled="logoNumber === ''"
          >
            {{ $t("device.customLogo.registerButton") }}
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";
import sHeader from "@/components/SimpleHeader.vue";
import { pushLogo, getDeviceDetal } from "@/service/device";
import { showFailToast, showSuccessToast } from "vant";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

export default defineComponent({
  setup() {
    const { t } = useI18n();
    const route = useRoute();
    const router = useRouter();
    const logoNumber = ref("");
    const deviceId = route.query.deviceId;
    const equipmentName = ref(route.query.name);
    const deviceDetail = ref(null);

    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      await getDeviceDetailFun();
    });

    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 () => {
      const { data } = await pushLogo({
        id: deviceId,
        logoNumber: logoNumber.value,
      });
      if (data.code === "00000") {
        showSuccessToast(t("device.modificationSucceeded"));
        setTimeout(() => {
          router.go(-1);
        }, 1500);
      } else {
        showFailToast(data.message);
      }
    };

    return {
      deviceDetail,
      logoNumber,
      submitChange,
      equipmentName,
    };
  },
  components: { sHeader },
});
</script>

<style lang="less" scoped>
@primary-color: #4d6add;
@text-dark: #333;
@text-light: #666;
@border-color: #e4e7ec;

.custom-logo-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 20px;
}

// 设备信息样式
.device-info {
  background-color: #fff;
  padding: 15px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

  .icon {
    font-size: 18px;
    color: @primary-color;
    margin-right: 10px;
  }

  .device-name {
    font-size: 16px;
    font-weight: 500;
    color: @text-dark;
  }
}

.device-header {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background: #fff;
  margin: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  .icon {
    font-size: 18px;
    color: @primary-color;
    margin-right: 10px;
  }

  .device-name {
    margin: 0;
    font-size: 15px;
    color: #404d74;
    font-weight: 550;

    // 长名称处理
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70vw;
  }
}

// 主内容区样式
.content-container {
  background-color: #fff;
  border-radius: 12px;
  margin: 15px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  padding: 20px;
}

// 表单样式
.van-form {
  .form-actions {
    margin-top: 25px;
  }

  .submit-button {
    height: 44px;
    background: linear-gradient(to right, #36d1dc, #5b86e5);
    border: none;
    font-weight: 500;

    &:disabled {
      background: #c4c4c4;
      opacity: 0.7;
    }
  }
}
</style>
