<template>
    <div class="ht-base-form-layout-demo">
        <ht-base-row>
            <ht-base-col span="24">
                <ht-base-radio-group v-model="button1" type="button" @on-change="onChange">
                    <ht-base-radio label="parallel">水平</ht-base-radio>
                    <ht-base-radio label="vertical">垂直</ht-base-radio>
                    <ht-base-radio label="inline">内联</ht-base-radio>
                </ht-base-radio-group>
            </ht-base-col>
        </ht-base-row>
        <br>
        <ht-base-row>
            <ht-base-col span="24">
                <ht-base-form :model="formLeft" :label-width="labelWidth" :inline="inline">
                    <ht-base-form-item label="输入项一：" :style="{width:'300px'}">
                        <ht-base-input v-model="formLeft.input2" ></ht-base-input>
                    </ht-base-form-item>
                    <ht-base-form-item label="输入项二：" :style="{width:'300px'}">
                        <ht-base-input v-model="formLeft.input3" ></ht-base-input>
                    </ht-base-form-item>
                    <ht-base-form-item :label-width="btnLabelWidth">
                        <ht-base-button type="primary">确定</ht-base-button>
                    </ht-base-form-item>
                </ht-base-form>
            </ht-base-col>
        </ht-base-row>
    </div>
</template>

<script>
  export default {
     name: 'HtBaseFormLayoutDemo',
     data(){
         return {
             button1: 'parallel',
             formLeft: {
                 input1: '',
                 input2: '',
                 input3: ''
             },
             model6:'',
             inline:false,
             labelWidth:100,
             labelPosition:'right',
             btnLabelWidth:100
         }
     },
      methods:{
          onChange(data){
              switch (data) {
                  case 'inline':
                      this.inline = true;
                      this.labelWidth = 100;
                      this.btnLabelWidth = 0;
                      break;
                  case 'parallel':
                      this.inline = false;
                      this.labelWidth = 100;
                      this.btnLabelWidth = 100;
                      break;
                  case 'vertical':
                      this.inline = false;
                      this.labelWidth = NaN;
                      this.labelPosition='top';
                      this.btnLabelWidth = 0;
                      break;
              }
          }
      }
  }
</script>
<style>
    .ht-base-form-layout-demo {
    }
</style>

