<template>
  <div class="switch-button" :class="{ 'switch-button--on': modelValue }" @click="handleTouchStart">
    <div class="switch-button__background">
      <img src="/assets/icons/drawable-xxhdpi/switch_ex_bottom.png" alt="开关底图" class="switch-button__image switch-button__image--bottom" />
      <img src="/assets/icons/drawable-xxhdpi/switch_ex_frame.png" alt="开关边框" class="switch-button__image switch-button__image--frame" />
      <img src="/assets/icons/drawable-xxhdpi/switch_ex_mask.png" alt="开关遮罩" class="switch-button__image switch-button__image--mask" />
      <img src="/assets/icons/drawable-xxhdpi/switch_ex_unpressed.png" alt="开关按钮" class="switch-button__image switch-button__image--unpressed" :class="{ 'switch-button__image--unpressed-on': modelValue }" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['update:modelValue'])

const handleTouchStart = event => {
  // 触摸开始时直接触发状态切换
  emit('update:modelValue', !props.modelValue)
}

// 保持原来的toggle方法以兼容其他可能的调用
const toggle = () => {
  emit('update:modelValue', !props.modelValue)
}
</script>

<style scoped lang="less">
.switch-button {
  display: inline-block;
  width: 3.325rem; /* 50px */
  height: 2.275rem; /* 30px */
  position: relative;
  cursor: pointer;
  user-select: none;

  &__background {
    position: relative;
    width: 100%;
    height: 100%;
  }

  &__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.2s ease;
    transform: translateX(0);

    &--bottom {
      z-index: 1;
    }

    &--frame {
      z-index: 2;
    }

    &--mask {
      z-index: 3;
      /* 遮罩层是全黑图片，使用screen混合模式 */
      mix-blend-mode: screen;
    }

    &--unpressed {
      z-index: 4;
      transform: translateX(-25%); /* 20px */
    }

    &--unpressed-on {
      transform: translateX(25%); /* 20px */
    }
  }
}
</style>
