<template>
  <a-col :span="span">
    <div class="d-flex align-center justify-center" style="margin: 7px">
      <span :style="getLabelSpace">{{ label }}：</span>
      <div :style="getColumnSpace">
        <slot />
      </div>
    </div>
  </a-col>
</template>

<script>
export default {
  name: 'HSearchForm',
  props: {
    // 查询文字
    label: {
      type: String,
      required: true,
      default: '查询条件'
    },
    space: {
      type: Boolean,
      required: false,
      default: false
    },
    labelSpace: {
      type: [Number, String],
      required: false,
      default: 2
    },
    span: {
      type: [Number, String],
      required: false,
      default: 6
    }
  },
  data() {
    return {
      space_prop: this.space,
      labelSpace_prop: Number(this.labelSpace)
    }
  },
  computed: {
    getLabelSpace() {
      return { width: 44 + (this.label.length - 2) * 14 + 'px' }
    },
    getColumnSpace() {
      return { width: `calc(100% - ${44 + (this.label.length - 2) * 14}px)` }
    }
  }
}
</script>
