<script setup>
import { ref } from "vue";

const props = defineProps({
  onChange: {
    type: Function,
    default: () => {},
  },
});

const mode = ref(true);

const onClick = () => {
  mode.value = !mode.value;
  props.onChange(mode.value);
};
</script>

<template>
  <view
    class="point-switcher"
    :style="{ borderColor: mode ? '#D8D8D8' : '#53EF56' }"
  >
    <view
      @click="onClick"
      :style="{ transform: 'translateX(' + (mode ? '-58' : '4') + 'rpx)' }"
    >
      <text>放大</text>
      <view :style="{ background: mode ? '#D8D8D8' : '#53EF56' }"></view>
      <text>真实</text>
    </view>
  </view>
</template>

<style scoped>
.point-switcher {
  width: 100rpx;
  height: 40rpx;
  border-radius: 22rpx;
  border: 2rpx solid;
  display: flex;
  overflow: hidden;
}
.point-switcher > view {
  position: relative;
  display: flex;
  align-items: center;
  line-height: 40rpx;
  color: #ffffff;
  font-weight: 500;
  font-size: 20rpx;
  word-break: keep-all;
  padding: 0 12rpx;
  transition: all 0.3s ease;
  transform: translateX(-58rpx);
}
.point-switcher > view > text:first-child {
  color: #53ef56;
}
.point-switcher > view > view {
  width: 36rpx;
  height: 36rpx;
  flex: 0 0 auto;
  border-radius: 50%;
  margin: 0 10rpx;
  transition: all 0.3s ease;
}
.point-switcher > view > text:last-child {
  color: #d8d8d8;
}
</style>
