<template>
  <wd-checkbox-group
    v-model="defValue"
    custom-class="flex flex-wrap gap-[16rpx] justify-items-center items-center"
    checked-color="#1580FF"
    @change="handleChange"
  >
    <wd-checkbox
      v-for="item in list"
      :key="item[valueKey]"
      :model-value="item[valueKey]"
      cell
      shape="button"
      custom-class="w-[152rpx]! h-[76rpx] p-0! mr-0!"
      custom-label-class="w-[152rpx]! h-[76rpx]! rounded-[8rpx]! checkbox-item-border bg-[#f7f8fa]!"
    >
      {{ item[labelKey] }}
    </wd-checkbox>
  </wd-checkbox-group>
</template>

<script lang="ts" setup>
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  labelKey: {
    type: String,
    default: 'name',
  },
  valueKey: {
    type: String,
    default: 'code',
  },
  defaultValue: {
    type: Array<string>,
    default: () => [],
  },
})
defineOptions({
  options: {
    styleIsolation: 'shared',
  },
})

const emits = defineEmits(['change'])
const defValue = ref<string[]>([])

watch(
  () => props.defaultValue,
  (newV) => {
    defValue.value = props.defaultValue
  },
  { immediate: true },
)

const handleChange = (val: string[]) => {
  emits('change', val)
}
</script>

<style lang="scss" scoped>
:deep(.checkbox-item-border) {
  border: 2rpx solid #f7f8fa !important;
  > .wd-icon-check-bold {
    display: none !important;
  }
}
:deep(.wd-checkbox.is-button.is-checked .wd-checkbox__label) {
  border: 2rpx solid #1580ff !important;
}
</style>
