<template>
  <div class="sel-check-group">
    <div class="sel-line-box">
      <template v-for="item in group">
        <template v-if="hasKey">
          <check v-model="checkValue[item.key]"
                 @change="changeValue"
                 :options="item.options"
                 :label="item.label"
                 :labelWidth="labelWidth"
                 :fontSize="fontSize" :mode="mode" />
        </template>
        <template v-else>
          <check v-model="checkValue"
                 @change="changeValue"
                 :options="item.options"
                 :label="item.label"
                 :labelWidth="labelWidth"
                 :fontSize="fontSize" :mode="mode" />
        </template>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { Op } from '../../GroupForm/form.type'
import Check from './check.vue'

defineOptions({
  name: 'SCheckGroup',
})

interface Props {
  modelValue: any
  /**
   * 可选值 'tag' | 'checkbox'
   */
  mode?: 'tag' | 'checkbox'
  options: Array<Op>
  labelWidth?: string
  fontSize?: number
  hasKey?: boolean
}

const cProps = withDefaults(defineProps<Props>(), {
  options: () => [],
  mode: 'tag',
  labelWidth: '100px',
  fontSize: 14,
  hasKey: false
})
const emits = defineEmits(['update:modelValue'])
const checkValue = ref({})
const group = computed(() => cProps.options)

function changeValue (value,config) {
  if (!cProps.hasKey) {
    const values = Array.from(new Set([...cProps.modelValue,...value]))
    emits('update:modelValue', values)
    emits('change', values)
  } else {
    emits('update:modelValue', checkValue.value)
    emits('change', checkValue.value)
  }
}
</script>
