<!-- wyf 2022-5-11 -->
<template>
  <z-form-item
    :label-col="{ style: { width: '120px', paddingRight: '6px' } }"
    :required="formForm?.required === '1'"
    :label="formForm?.headText ? formForm?.headText : basicForm?.titleName || '下拉框'"
    class="z-form-item"
  >
    <z-select
      v-model:value="model[basicForm.field]"
      :value="formForm.value"
      :disabled="formForm?.disabled === '1'"
      :placeholder="formForm?.placeholder"
      :mode="formForm?.isMulCho == '1' ? 'multiple' : 'combobox'"
      :max="formForm.max && formForm.max>0 ? formForm.max : ''"
    >
      <z-select-option
        v-for="(item, index) in formForm?.addOption"
        :key="index"
        :value="item.value"
      >
        {{ item.label }}
      </z-select-option>
    </z-select>
  </z-form-item>
</template>
<script>
import { defineComponent, toRef, toRefs } from 'vue'
export default defineComponent({
  name: 'SelectItem',
  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) : {}
    return {
      basicForm,
      formForm,
      model
    }
  }
})

</script>
<style lang="less" scoped>
.z-form-item{
  flex: 1;
}
</style>
