<template>
  <div class="sel-check-group">
    <div class="sel-line-box">
        <span class="sel-label" v-if="label">{{ label }}</span>
        <div class="sel-group-content">
          <template v-if="mode==='tag'">
            <wrap-container :mode="mode" :gap="40" :font-size="fontSize">
              <template v-for="opt in options">
                <Component v-if="checkValue.includes(opt.value)"
                           v-model="opt.pick"
                           v-bind="props"
                           :disable-transitions="true"
                           :is="'el-'+mode"
                           :value="opt.value"
                           :closable="true"
                           @close="removeItem(opt.value)"
                           :label="opt.label">
                  {{ opt.label }}
                </Component>
                <span class="el-tag noColor"
                      v-else
                      @click="pickItem(opt.value)">{{ opt.label }}</span>
              </template>
            </wrap-container>
          </template>
          <template v-else>
            <wrap-container :mode="mode" :gap="52" :font-size="fontSize">
              <s-dom
                v-model="checkValue"
                :type="mode+'Group'"
                :options="options"
                @change="changeValue"
                :props="props" />
            </wrap-container>
          </template>
        </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { Op } from '../../GroupForm/form.type'
import SDom from '../../Dom/src/index.vue'
import WrapContainer from './wrapContainer.vue'

defineOptions({
  name: 'SCheck',
})

interface Props {
  modelValue: string | number | boolean
  mode: 'tag' | 'checkbox'
  options: Array<Op>
  label?: string
  key: string
  labelWidth: string
  fontSize: number
}

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

function removeItem (value: any) {
  checkValue.value.splice(checkValue.value.indexOf(value), 1)
  emits('update:modelValue', checkValue.value)
  emits('change', checkValue.value)
}

function pickItem (value: any) {
  checkValue.value.push(value)
  emits('update:modelValue', checkValue.value)
  emits('change', checkValue.value)
}

function changeValue () {
  emits('update:modelValue', checkValue.value)
  emits('change', checkValue.value)
}
</script>

<style lang="scss">
.sel-check-group {
  .sel-line-box {
    display: flex;
    justify-content: flex-start;
    align-items: self-start;

    .sel-label {
      display: inline-block;
      height: 32px;
      width: v-bind(labelWidth);
      min-width: v-bind(labelWidth);
      padding-top: 8px;
      line-height: 16px;
      justify-content: flex-start;
      align-items: self-start;
      font-size: v-bind(useFontSize);
      color: #666;
    }

    .sel-group-content {
      justify-content: flex-start;
      align-items: self-start;
      flex-wrap: wrap;
      flex: 1;
    }
  }

  .el-tag {
    margin-right: 8px;
    cursor: pointer;
    margin-top: 4px;
    margin-bottom: 4px;

    &.noColor {
      background-color: transparent;
      border-color: transparent;
      color: #333;
      padding-left: 12px;
      padding-right: 12px;
      font-size: v-bind(useFontSize);
    }
  }
}
</style>
