<template>
  <div class="volume-control">
    <s-header :name="$t('device.modulation')" :noback="false" />

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

    <!-- 音量调节卡片 -->
    <div class="control-card">
      <div class="volume-display">
        <span class="volume-label">{{
          $t("device.slideSliderToAdjustVolume")
        }}</span>
        <div class="volume-value">{{ volume }}</div>
      </div>

      <van-slider
        v-model="volume"
        :max="15"
        class="volume-slider"
        bar-height="4px"
      >
        <template #button>
          <div class="slider-thumb">
            {{ volume }}
          </div>
        </template>
      </van-slider>

      <van-button round type="primary" class="submit-btn" @click="volumeChange">
        <van-icon name="volume" class="btn-icon" />
        {{ $t("device.submitModification") }}
      </van-button>
    </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, showConfirmDialog, showSuccessToast } from "vant";
import { useI18n } from "vue-i18n";

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);
    const equipmentName = ref("");

    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      getDeviceDetalFun();
      equipmentName.value = route.query.name;
    });

    // 获取设备列表数据
    const getDeviceDetalFun = async () => {
      const { data } = await getDeviceDetal({ id: deviceId });
      if (data.code === "00000") {
        deviceDetal.value = data.data;
        volume.value = data.data.volume ? Number.parseInt(data.data.volume) : 0;
      } else {
        showFailToast(data.message);
      }
    };
    // 音量调节保存
    const volumeChange =  () => {
      showConfirmDialog({
        title: t("device.openRemind"),
        message: t("device.editCheck"),
      }).then(async () => {
        const { data } = await updateVolume({
          id: deviceId,
          volume: volume.value.toString(),
        });
        console.log(data);
        if (data.code === "00000") {
          showSuccessToast(t("device.sentSuccessfully"));
          setTimeout(() => {
            router.go(-1);
          }, 1500);
        } else {
          showFailToast(data.message);
        }
      });
    };
    return {
      deviceDetal,
      volume,
      volumeChange,
      equipmentName,
    };
  },
  components: { sHeader },
};
</script>
<style lang="less" scoped>
@primary-color: #4d6add;
@card-bg: #ffffff;
@text-primary: #2d3436;
@border-color: #e4e7ec;

.volume-control {
  background: #f8fafb;
  min-height: 100vh;
}

.device-card {
  background: @card-bg;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  margin: 10px;
  padding: 16px;

  .device-header {
    display: flex;
    align-items: center;

    .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;
    }
  }
}

.control-card {
  background: @card-bg;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 24px 16px;
  margin: 10px;

  .volume-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;

    .volume-label {
      font-size: 14px;
      color: #666;
    }

    .volume-value {
      font-size: 24px;
      color: @primary-color;
      font-weight: bold;
    }
  }

  .volume-slider {
    margin: 0 8px 40px;
    width: auto;

    .slider-thumb {
      width: 25px;
      height: 25px;
      background: @primary-color;
      border-radius: 50%;
      color: white;
      font-size: 14px;
      line-height: 25px;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
  }

  .submit-btn {
    width: 100%;
    height: 48px;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(77, 194, 148, 0.2);

    .btn-icon {
      margin-right: 8px;
      font-size: 18px;
    }
  }
}

@media (max-width: 480px) {
  .control-card {
    padding: 20px 12px;

    .volume-display .volume-value {
      font-size: 22px;
    }

    .submit-btn {
      font-size: 14px;
      height: 44px;
    }
  }
}
</style>
