<template>
  <div class="demo-form-register">
    <ui-form
      ref="registerForm"
      :rules="rules"
      :data="model"
      label-width="180px"
      @succeed="succeedHandler"
      @invalid="invalidHandler">
      <ui-form-field
        label="E-mail"
        field="email"
        required>
        <ui-input
          v-model="model.email"
          prefix-icon="user"></ui-input>
      </ui-form-field>
      <ui-form-field
        field="password"
        label="Password"
        required>
        <ui-input
          v-model="model.password"
          prefix-icon="lock"
          type="password"></ui-input>
      </ui-form-field>

      <ui-form-field
        field="password2"
        label="Confirm Password"
        required>
        <ui-input
          v-model="model.password2"
          prefix-icon="lock"
          type="password"></ui-input>
      </ui-form-field>

      <ui-form-field field="nickname">
        <span slot="label">
          Nickname
          <ui-tooltip content="What do you want others to call you?">
            <ui-icon
              name="info"
              size="16px"></ui-icon>
          </ui-tooltip>
        </span>
        <ui-input
          v-model="model.nickname"
          prefix-icon="lock"></ui-input>
      </ui-form-field>

      <ui-form-field
        field="gender"
        label="gender">
        <ui-select
          v-model="model.gender"
          :options="genders"></ui-select>
      </ui-form-field>

      <ui-form-field
        field="hobby"
        label="hobby">
        <ui-select
          v-model="model.hobby"
          :options="hobbies"
          multiple></ui-select>
      </ui-form-field>

      <ui-form-field
        field="public"
        label="public">
        <ui-switch v-model="model.public"></ui-switch>
      </ui-form-field>

      <ui-form-field
        field="residence"
        label="Habitual Residence">
        <ui-cascader
          v-model="model.residence"
          :options="residences"></ui-cascader>
      </ui-form-field>

      <ui-form-field
        field="tel"
        label="Phone Number">
        <ui-input v-model="model.tel.number">
          <ui-select
            slot="before"
            v-model="model.tel.area"
            :options="areas"
            style="width: 120px"></ui-select>
        </ui-input>
      </ui-form-field>

      <ui-form-field
        field="website"
        label="Website">
        <ui-input
          v-model="model.website"
          placeholder="website"></ui-input>
      </ui-form-field>

      <ui-form-field
        field="subscribe"
        label="subscribe">
        <ui-checkbox
          v-model="model.subscribe">
          Whether to subscribe to our latest news.
        </ui-checkbox>
      </ui-form-field>

      <ui-form-field
        field="captcha"
        label="Captcha"
        extra="We must make sure that your are a human.">
        <ui-input-group>
          <ui-col span="10">
            <ui-input
              v-model="model.captcha"
              placeholder="Captcha"></ui-input>
          </ui-col>
          <ui-col span="10">
            <ui-button>Get captcha</ui-button>
          </ui-col>
        </ui-input-group>
      </ui-form-field>

      <ui-form-field field="agree">
        <ui-checkbox v-model="model.agree">
          I have read the <a href="#">
            agreement
          </a>
        </ui-checkbox>
      </ui-form-field>

      <ui-form-field>
        <ui-button
          class="login-form-button"
          type="primary"
          native-type="submit"
          @click="submitHandler">
          Register
        </ui-button>

        <ui-button
          class="login-form-button"
          style="margin-left: 12px;"
          native-type="reset">
          Reset
        </ui-button>
      </ui-form-field>
    </ui-form>
  </div>
</template>
<script>
import {
  Form,
  FormField,
  Input,
  Checkbox,
  Button,
  Icon,
  Tooltip,
  Cascader,
  Select,
  InputGroup,
  Col,
  Switch,
} 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-input": Input,
    "ui-checkbox": Checkbox,
    "ui-button": Button,
    "ui-icon": Icon,
    "ui-tooltip": Tooltip,
    "ui-cascader": Cascader,
    "ui-select": Select,
    "ui-input-group": InputGroup,
    "ui-col": Col,
    "ui-switch": Switch,
  },
  data() {
    return {
      residences: Object.freeze(residences),
      areas: Object.freeze([
        {
          label: "+86",
          value: "086",
        },
        {
          label: "+87",
          value: "087",
        },
      ]),
      hobbies: Object.freeze([
        {
          label: "蓝球",
          value: "1",
        },
        {
          label: "下棋",
          value: "2",
        },
        {
          label: "打机",
          value: "3",
        },
        {
          label: "斗地主",
          value: "4",
        },
      ]),
      genders: Object.freeze([
        {
          label: "男",
          value: "1",
        },
        {
          label: "女",
          value: "0",
        },
      ]),
      model: {
        email: "",
        password: "",
        password2: "",
        nickname: "",
        gender: "",
        hobby: [],
        public: false,
        tel: {
          number: "",
          area: "",
        },
        residence: [],
        website: "",
        captcha: "",
        agree: false,
        subscribe: false,
      },
      rules: {
        email: [
          {
            required: true,
            message: "请输入邮箱",
            triggers: ["input"],
          },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback("不能使用")
              } else {
                callback()
              }
            },
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
          },
          {
            validator: (rule, value, callback) => {
              if (value !== this.model.password2) {
                callback("两次密码不一致")
              } else {
                callback()
              }
            },
          },
        ],
        password2: [
          {
            required: true,
            message: "请重复输入密码",
          },
          {
            validator: (rule, value, callback) => {
              if (value !== this.model.password) {
                callback(<div>两次密码不一致(<a href="#">提高记忆力</a>)</div>)
              } else {
                callback()
              }
            },
          },
        ],
        nickname: [
          {
            len: 1,
          },
        ],

        gender: [
          {
            required: true,
          },
        ],
        public: [
          {
            type: "boolean",
            required: true,
            message: "啊哈？",
          },
        ],
        residence: [
          {
            type: "array",
            required: true,
          },
        ],
        tel: [
          {
            type: "object",
            fields: {
              number: [
                {
                  type: "number",
                  required: true,
                  transform(value) {
                    return Number(value)
                  },
                },
                {
                  type: "number",
                  min: 1,
                  max: 4,
                },
              ],
              area: {
                required: true,
              },
            },
          },
        ],
        captcha: [
          {
            required: true,
            message: "请输入验证码",
          },
        ],
        agree: [
          {
            validator: (rule, value, callback) => {
              if (value === true) {
                callback("请阅读条款并同意")
              } else {
                callback()
              }
            },
          },
        ],
      },
    }
  },
  methods: {
    succeedHandler(res) {
      console.log("succeedHandler", res)
    },
    invalidHandler(res) {
      console.log("invalidHandler", res)
    },
    submitHandler() {
      this.$refs.registerForm
        .validate({
          scroll: true,
        })
        .then(res => {
          console.log("res", res)
        })
        .catch(err => {
          console.log("err", err)
        })
    },
  },
}
</script>
<style lang="scss">
.demo-form-register {
  max-width: 600px;
  .login-form-forgot {
    float: right;
  }
}
</style>
