<!-- components/checkbox-switch.vue -->
<template>
  <view class="custom-checkbox" @click="toggle" :class="{ 'custom-checkbox--checked': modelValue }">
    <!-- 这里可以用一个图标，或者用CSS绘制一个方框 -->
    <view class="custom-checkbox__icon">
      <!-- 示例：使用一个简单的对勾符号 -->
      <up-icon v-if="modelValue" name="checkbox-mark" color="#FFF" size="15"></up-icon>
    </view>
    <text class="custom-checkbox__label" v-if="$slots.default">
      <slot></slot>
    </text>
  </view>
</template>

<script setup>
// 1. 定义并接收 props，将其解构赋值
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
})

// 定义 emits
const emit = defineEmits(['update:modelValue'])

// 2. 在函数中使用 props.modelValue
const toggle = () => {
  emit('update:modelValue', !props.modelValue)
}
</script>

<style lang="scss" scoped>
.custom-checkbox {
  display: inline-flex;
  align-items: center;
  user-select: none;
  cursor: pointer;
  padding: 8rpx;

  &__icon {
    width: 16px;
    height: 16px;
    border: 2rpx solid #c8c9cc;
    border-radius: 6rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10rpx;
    transition: all 0.2s;
  }

  &__icon-text {
    font-size: 24rpx;
    color: #ffffff;
  }

  &__label {
    font-size: 28rpx;
    color: #606266;
  }

  // 选中状态的样式
  &--checked &__icon {
    background-color: #2979ff;
    border-color: #2979ff;
  }

  &--checked &__label {
    color: #2979ff;
  }
}
</style>
