<template>
  <t-checkbox-group
    v-model="valueData"
    :disabled="!config.writable"
    style="min-height: 32px"
    @change="emitChange"
    class="flow-checkbox-group"
  >
    <t-checkbox v-for="item in options" :key="item.value" :value="item.value">
      <span class="red m-r-5px">*</span>
      <span>{{ item.label }}</span>
    </t-checkbox>
  </t-checkbox-group>
</template>

<script setup name="CHECKBOX">
import { ref, computed, watch } from 'vue';
const props = defineProps({
  config: { type: Object },
  modelValue: { type: Array },
});
const emit = defineEmits(['update:modelValue', 'change']);

const valueData = ref([]);
const options = computed(() => {
  const config = props.config || {};
  return !config.options
    ? []
    : typeof config.options === 'string'
    ? JSON.parse(config.options)
    : config.options;
});

const emitChange = () => {
  emit('update:modelValue', valueData.value);
  emit('change', valueData.value);
};

watch(
  () => props.modelValue,
  (val, oldval) => {
    if (val === oldval) return;
    valueData.value = val || [];
  },
  {
    immediate: true,
  }
);
</script>
<style lang="less" scoped>
.flow-checkbox-group {
  display: block;
  :deep(.t-checkbox) {
    display: block;
  }
}
</style>
