<template>
  <div class="input-item flexDiv">
    <z-form-item :label-col="{ style: { width: '120px', paddingRight: '6px' } }" :required="formForm?.required === '1' " :label="basicForm?.titleName || '多行文本'" class="z-form-item">
      <z-textarea
        v-model:value="model[basicForm.field]"
        :value="formForm?.value"
        :disabled="formForm?.disabled ==='1'"
        :placeholder="formForm?.placeholder"
        :rows="formForm?.height"
        :maxlength="formForm.max && formForm.max>0 ? formForm.max : ''"
      />
    </z-form-item>
  </div>
</template>
<script>
import { defineComponent, toRef, toRefs } from 'vue'
export default defineComponent({
  name: 'Textarea',
  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) : {}
    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,
      getWidthStr,
      model
    }
  }
})

</script>
<style lang="less" scoped>
.input-item{
  width: 100%;
  .spanWidth{
    width: 100px;
    height: 40px;
  }
  .z-form-item{
    flex: 1;
  }
}
</style>
