<template>
  <div>
    <FormItem label="组件名">
      <Input v-model="info.name" readonly />
    </FormItem>
    <FormItem label="布局模式">
      <RadioGroup v-model="info.form.formType" type="button" button-style="solid">
        <Radio label="">default</Radio>
        <Radio label="flex">flex</Radio>
      </RadioGroup>
    </FormItem>
    <FormItem label="水平排列" v-show="info.form.formType === 'flex'">
      <Select v-model="info.form.justify" type="button">
        <Option value="start">start</Option>
        <Option value="end">end</Option>
        <Option value="center">center</Option>
        <Option value="space-around">space-around</Option>
        <Option value="space-between">space-between</Option>
      </Select>
    </FormItem>
    <FormItem label="垂直排列" v-show="info.form.formType === 'flex'">
      <RadioGroup v-model="info.form.align" type="button" button-style="solid">
        <Radio label="top">top</Radio>
        <Radio label="middle">middle</Radio>
        <Radio label="bottom">bottom</Radio>
      </RadioGroup>
    </FormItem>
  </div>
</template>

<script>
export default {
  name: 'RowProp',
  props: {
    info: Object,
  },
  watch: {
    'info.form.formType'(value) {
      if (value === 'flex') {
        this.$set(this.info.form, 'justify', 'start')
        this.$set(this.info.form, 'align', 'top')
      } else {
        delete this.info.form.justify
        delete this.info.form.align
      }
    },
  },
}
</script>
