<!-- wyf 2022-5-11 -->
<template>
  <z-form-item
    :label-col="{ style: { width: '120px', paddingRight: '6px' } }"
    :required="formForm?.required === '1'"
    :label="basicForm?.titleName || '复选框'"
    class="z-form-item"
  >
    <z-checkbox-group
      v-model:value="model[basicForm.field]"
      :options="formForm.addOption"
      :value="formForm.value"
      :min="formForm.min && formForm.min > 0 ? formForm.min : ''"
      :max="formForm.max && formForm.max > 0 ? formForm.max : ''"
    >
      <!-- <z-checkbox
        v-for="(item, index) in formForm.addOption"
        :key="index"
        :value="item.value"
        :disabled="item.disabled"
      >
        {{ item.label }}
      </z-checkbox> -->
    </z-checkbox-group>
    <!-- <z-checkbox-group v-model:value="model[basicForm.field]" :value="formForm.value" :max="formForm.max" :min="formForm.min" name="checkboxgroup">
      <z-checkbox v-for="(item,index) in formForm.addOption" :key="index" :value="item.value" :disabled="item.disabled">
        {{ item.label }}
      </z-checkbox>
    </z-checkbox-group> -->
  </z-form-item>
</template>
<script>
import { defineComponent, toRef, toRefs } from 'vue'
export default defineComponent({
  name: 'CheckboxItem',
  props: {
    formProperty: {
      type: Array,
      default: undefined
    },
    basicProperty: {
      type: Array,
      default: undefined
    },
    formModel: {
      type: Object,
      default: undefined
    }
  },
  setup(props) {
    const basicForm = toRef(props, 'basicProperty')
    const formForm = toRef(props, 'formProperty')
    const model = props.formModel ? toRefs(props.formModel) : {}
    console.log(model, '---------------------------model-------checkbox')
    console.log('formForm', formForm)
    const getWidthStr = (str) => {
      let spanWidth = ''
      switch (str) {
        case '1':
          spanWidth = '1/4'
          break
        case '2':
          spanWidth = '1/3'
          break
        case '3':
          spanWidth = '1/2'
          break
        case '4':
          spanWidth = '1'
          break
        default:
          '1'
          break
      }
      return spanWidth
    }
    return {
      basicForm,
      formForm,
      model,
      getWidthStr
    }
  }
})
</script>
<style lang="less" scoped>
.z-form-item {
  flex: 1;
}
</style>
