<template>
  <container>
    <br />

    <a-form-model class="yo-form yo-form--fixed">
      <h3>输入框</h3>
      <Input />
      <h3>数字输入框</h3>
      <div class="yo-form-group">
        <a-form-model-item label="数字输入框">
          <span slot="help">
            <a-tag color="pink">a-input-number</a-tag>可以输入和选择数字
          </span>
          <a-input-number autocomplete="off" placeholder="请输入数字" />
        </a-form-model-item>
      </div>
      <h3>文本域</h3>
      <div class="yo-form-group">
        <a-form-model-item label="文本域">
          <a-textarea autocomplete="off" placeholder="请输入文字" />
        </a-form-model-item>
      </div>
      <h3>提及</h3>
      <div class="yo-form-group">
        <a-form-model-item label="提及">
          <a-mentions placeholder="请输入'@'进行提及">
            <a-mentions-option value="史莱姆">史莱姆</a-mentions-option>
            <a-mentions-option value="哥布林">哥布林</a-mentions-option>
            <a-mentions-option value="牛头人">牛头人</a-mentions-option>
          </a-mentions>
        </a-form-model-item>
      </div>
      <h3>单选框</h3>
      <div class="yo-form-group">
        <a-form-model-item label="单选框">
          <span slot="help">
            <a-tag color="pink">a-radio-group > a-radio</a-tag>横排的单选框。请注意，因为控件区域宽度的限制，在这里无法使用单选框按钮
          </span>
          <a-radio-group>
            <a-radio value="1">攻击</a-radio>
            <a-radio value="2">防御</a-radio>
            <a-radio value="3">剑技</a-radio>
            <a-radio value="4">魔法</a-radio>
            <a-radio value="5">回复</a-radio>
            <a-radio value="6">虐杀</a-radio>
            <a-radio value="7">踩在脚下</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item class="yo-form--vertical yo-form--vertical-radio" label="垂直单选框">
          <span slot="help">
            垂直单选框，需要在垂直布局控件的基础上，添加类
            <a-tag color="pink">.yo-form--vertical-radio</a-tag>
          </span>
          <a-radio-group>
            <a-radio value="1">攻击</a-radio>
            <a-radio value="2">防御</a-radio>
            <a-radio value="3">剑技</a-radio>
            <a-radio value="4">魔法</a-radio>
            <a-radio value="5">回复</a-radio>
            <a-radio value="6">虐杀</a-radio>
            <a-radio value="7">踩在脚下</a-radio>
            <a-radio value="8">
              <a-input />
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </div>
    </a-form-model>
  </container>
</template>
<script>
import Input from './yo/Input';

export default {
  components: {
    Input,
  },
};
</script>