<!-- 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-radio-group v-model:value="model[basicForm.field]" :value="formForm.value" :options="formForm?.addOption" :disabled="formForm?.disabled === '1'" />
  </z-form-item>
</template>
<script>
import { defineComponent, toRef, toRefs } from 'vue'
export default defineComponent({
  name: 'RadioItem',
  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-------radio')
    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>
