<template>
  <el-form-item
    :label="columnMean"
    :prop="columnName"
  >
    <el-input
      v-bind="$attrs"
      v-on="$listeners"
      :placeholder="'请输入' + columnMean"
      v-if="chooseType === 1"
    />
    <el-select
      v-bind="$attrs"
      v-on="$listeners"
      :placeholder="'请选择' + columnMean"
      style="width: 100%"
      v-else-if="chooseType === 2"
    >
      <el-option
        v-for="_item in chooseList"
        :label="_item.chooseValue"
        :key="_item.chooseKey"
        :value="_item.chooseKey"
      />
    </el-select>
    <el-radio-group
      v-else-if="chooseType === 3"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <el-radio
        :label="_item.chooseKey"
        :key="_item.chooseKey"
        v-for="_item in chooseList"
      >{{_item.chooseValue}}</el-radio>
    </el-radio-group>
    <el-checkbox-group
      v-else-if="chooseType === 4"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <el-checkbox
        v-for="_item in chooseList"
        :label="_item.chooseKey"
        :key="_item.chooseKey"
      >{{_item.chooseValue}}</el-checkbox>
    </el-checkbox-group>
  </el-form-item>
</template>

<script>
export default {
  props: {
    columnMean: {
      type: String, //字段说明
      default: ''
    },
    columnName: {
      type: String, //字段名称
      default: ''
    },
    chooseType: {
      type: Number, //字段选择类型(1.输入框;2.下拉;3.单选;4.多选)
      default: 1
    },
    columnLength: {
      type: Number, //字段长度
      default: 10
    },
    chooseList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss">
.radioOnlyItem {
  line-height: 32px;
  // display: block;
  margin-bottom: 14px;
  width: 100%;
  &:last-child {
    margin-bottom: 0;
  }
  .el-radio__label {
    // display: inline-block;
    // // line-height: 20px;
    // white-space: normal;
    width: calc(100% - 38px);
  }
  .el-radio {
    // white-space: normal;
  }
}
</style>
