<template>
  <view
    class="checkbox"
    :class="{
      'checkbox--disabled': isDisabled,
      'checkbox-active': isChecked,
      'checkbox-disabled': isDisabled,
    }"
    @click="handleClick"
  >
    <view class="checkbox__icon" :class="{ 'checkbox__icon--checked': isChecked }">
      <text v-show="isChecked" class="i-carbon-checkmark checkbox__icon-check"></text>
    </view>
    <view class="checkbox__label">
      <slot>{{ label }}</slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed, inject } from 'vue'

const props = defineProps({
  name: {
    type: [String, Number],
    required: true,
  },
  label: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['change'])

interface CheckboxGroupContext {
  modelValue: ComputedRef<any[]>
  disabled: ComputedRef<boolean>
  max: ComputedRef<number>
  selectedCount: ComputedRef<number>
  toggleOption: (option: { value: string | number }) => void
}

// 注入checkbox group的上下文
const checkboxGroup = inject<CheckboxGroupContext>('checkboxGroup', {
  modelValue: computed(() => []),
  disabled: computed(() => false),
  max: computed(() => 0),
  selectedCount: computed(() => 0),
  toggleOption: () => {},
})

// 是否选中
const isChecked = computed(() => {
  const modelValue = checkboxGroup.modelValue.value
  return modelValue.includes(props.name)
})

// 是否禁用
const isDisabled = computed(() => {
  const max = checkboxGroup.max.value
  const selectedCount = checkboxGroup.selectedCount.value
  // 如果有原始禁用属性，或者group禁用，或者达到最大选择数且未选中，则禁用
  return (
    props.disabled ||
    checkboxGroup.disabled.value ||
    (max > 1 && !isChecked.value && selectedCount >= max)
  )
})

// 处理点击事件
const handleClick = () => {
  if (isDisabled.value) return

  checkboxGroup.toggleOption({
    value: props.name,
  })
}
</script>

<style scoped>
.checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 28rpx;
}

.checkbox--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.checkbox__icon {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #dcdfe6;
  border-radius: 4rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8rpx;
  transition: all 0.2s;
}

.checkbox__icon--checked {
  background-color: #0083ff;
  border-color: #0083ff;
}

.checkbox__icon-check {
  color: #fff;
  font-size: 32rpx;
}

.checkbox__label {
  line-height: 1;
}

.checkbox-active {
  background-color: #0083ff;
  border-color: #0083ff;
}

.checkbox-disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}
</style>
