<template>
  <div class="demo-form-validate-other">
    <ui-form layout="vertical">
      <ui-form-field label="Plain Text">
        China
      </ui-form-field>
      <ui-form-field label="Select">
        <ui-select
          :options="countries"
          placeholder="Please select a country">
        </ui-select>
      </ui-form-field>

      <ui-form-field label="Select[multiple]">
        <ui-select
          :options="colors"
          multiple
          placeholder="Please select favourite colors">
        </ui-select>
      </ui-form-field>

      <ui-form-field label="Confirm Password">
        <ui-input-number
          :min="1"
          :max="10"></ui-input-number>
        <span>machines</span>
      </ui-form-field>

      <ui-form-field label="Switch">
        <ui-switch></ui-switch>
      </ui-form-field>

      <ui-form-field label="Slider">
        <ui-slider></ui-slider>
      </ui-form-field>

      <ui-form-field label="radio-group">
        <ui-radio-group :options="items"></ui-radio-group>
      </ui-form-field>

      <ui-form-field
        label="Upload"
        extra="longggggggggggg">
        <ui-upload></ui-upload>
      </ui-form-field>

      <ui-form-field label="Upload">
        <ui-upload drag></ui-upload>
      </ui-form-field>

      <ui-form-field>
        <ui-button
          class="login-form-button"
          type="primary">
          Sumbit
        </ui-button>
      </ui-form-field>
    </ui-form>
  </div>
</template>
<script>
import {
  Form,
  FormField,
  Button,
  Select,
  InputNumber,
  Switch,
  Slider,
  RadioGroup,
  Upload,
} from "amumu-ui"

const residences = [
  {
    value: "zhejiang",
    label: "Zhejiang",
    children: [
      {
        value: "hangzhou",
        label: "Hangzhou",
        children: [
          {
            value: "xihu",
            label: "West Lake",
          },
        ],
      },
    ],
  },
  {
    value: "jiangsu",
    label: "Jiangsu",
    children: [
      {
        value: "nanjing",
        label: "Nanjing",
        children: [
          {
            value: "zhonghuamen",
            label: "Zhong Hua Men",
          },
        ],
      },
    ],
  },
]

export default {
  components: {
    "ui-form": Form,
    "ui-form-field": FormField,
    "ui-button": Button,
    "ui-select": Select,
    "ui-input-number": InputNumber,
    "ui-switch": Switch,
    "ui-slider": Slider,
    "ui-radio-group": RadioGroup,
    "ui-upload": Upload,
  },
  data() {
    return {
      residences: Object.freeze(residences),
      countries: Object.freeze([
        {
          label: "China",
          value: "china",
        },
        {
          label: "U.S.A",
          value: "us",
        },
      ]),
      colors: Object.freeze([
        {
          label: "Red",
          value: "red",
        },
        {
          label: "Green",
          value: "green",
        },
        {
          label: "Blue",
          value: "blue",
        },
      ]),
      items: Object.freeze([
        {
          label: "item1",
          value: "1",
        },
        {
          label: "item2",
          value: "2",
        },
        {
          label: "item3",
          value: "3",
        },
      ]),
      model: {
        residence: ["zhejiang", "hangzhou", "xihu"],
      },
    }
  },
}
</script>
<style lang="scss">
.demo-form-validate-other {
  max-width: 600px;
  .login-form-forgot {
    float: right;
  }
}
</style>
