<template>
  <div class="demo-input-group-size">
    <div class="demo-box">
      <ui-form layout="inline">
        <ui-form-field>
          <ui-radio-group
            v-model="size"
            :options="radioGroupOptions"
            type="button"></ui-radio-group>
        </ui-form-field>
        <ui-form-field>
          <ui-switch v-model="compact"></ui-switch>
        </ui-form-field>
      </ui-form>
    </div>

    <ui-input-group
      :size="size"
      :compact="compact">
      <template v-if="compact">
        <ui-select
          :options="areas"
          style="width: 16.66%"></ui-select>
        <ui-input style="width: 50%"></ui-input>
      </template>
      <template v-else>
        <ui-col span="4">
          <ui-select :options="areas"></ui-select>
        </ui-col>
        <ui-col span="12">
          <ui-input></ui-input>
        </ui-col>
      </template>
    </ui-input-group>
  </div>
</template>

<script>
import { InputGroup, Input, Select, Col, RadioGroup, Form, FormField, Switch } from "amumu-ui"
export default {
  components: {
    "ui-input-group": InputGroup,
    "ui-input": Input,
    "ui-select": Select,
    "ui-col": Col,
    "ui-radio-group": RadioGroup,
    "ui-form": Form,
    "ui-form-field": FormField,
    "ui-switch": Switch,
  },
  data() {
    return {
      areas: [
        {
          label: "+86",
          value: "086",
        },
        {
          label: "+89",
          value: "089",
        },
      ],

      size: "small",
      compact: false,

      radioGroupOptions: [
        { label: "small", value: "small" },
        { label: "medium", value: "medium" },
        { label: "large", value: "large" },
      ],
    }
  },
}
</script>
