<template>
  <div>
    <group title="禁用内置验证及显示成功或者错误样式">
      <x-input
        title="禁用验证"
        placeholder="I'm placeholder"
        novalidate
        :icon-type="iconType"
        :show-clear="false"
        @on-blur="onBlur"
      />
    </group>
    <br>
    <x-button @click.native="iconType = 'success'">
      set success
    </x-button>
    <x-button @click.native="iconType = 'error'">
      set error
    </x-button>
    <x-button @click.native="iconType = ''">
      set empty
    </x-button>

    <group title="is-type传入function">
      <x-input
        title="必须输入23333333333333333333333333"
        :is-type="be2333"
        placeholder="I'm placeholder"
      />
    </group>

    <group title="使用icon代替title">
      <x-input
        title="必须输入2333"
        :is-type="be2333"
        placeholder="I'm placeholder"
      >
        <img
          slot="label"
          style="padding-right:10px;display:block;"
          src="http://dn-placeholder.qbox.me/110x110/FF2D55/000"
          width="24"
          height="24"
        >
      </x-input>
    </group>

    <group title="max is alias to maxlength">
      <x-input
        v-model="maxValue"
        title="max=5"
        :max="5"
        @on-change="change"
      />
    </group>

    <group title="debounce = 1000">
      <x-input
        v-model="debounceValue"
        title="debounce"
        :debounce="500"
        @on-change="change"
      />
    </group>

    <group title="disabled">
      <x-input
        v-model="disabledValue"
        title="value"
        disabled
        is-link
      />
    </group>

    <group title="set type = tel">
      <x-input
        title="value"
        type="tel"
      />
    </group>

    <group title="html title">
      <x-input
        :title="`<span style=&quot;${style}&quot;>hello</span>`"
        placeholder="I'm placeholder"
      />
    </group>
    <x-button @click.native="style = 'color:red;'">
      set red
    </x-button>
    <x-button @click.native="style = 'color:green'">
      set green
    </x-button>
    <x-button @click.native="style = 'color:#000'">
      set default
    </x-button>

    <group title="Default">
      <x-input
        title="message"
        placeholder="I'm placeholder"
      />
    </group>

    <group title="不显示清除按钮">
      <x-input
        title="message"
        required
        placeholder="I'm placeholder"
        :show-clear="false"
        autocapitalize="characters"
      />
    </group>

    <group title="focus事件">
      <x-input
        title="focus-handler"
        placeholder="focus me!"
        :show-clear="true"
        @on-focus="onFocus"
      />
    </group>

    <group title="set is-type=china-name">
      <x-input
        title="姓名"
        name="username"
        placeholder="请输入姓名"
        is-type="china-name"
      />
    </group>

    <group title="set keyboard=number and is-type=china-mobile">
      <x-input
        title="手机号码"
        name="mobile"
        placeholder="请输入手机号码"
        keyboard="number"
        is-type="china-mobile"
      />
    </group>

    <group title="set is-type=email">
      <x-input
        title="邮箱"
        name="email"
        placeholder="请输入邮箱地址"
        is-type="email"
      />
    </group>

    <group title="set min=2 and max=5">
      <x-input
        title="2-5个字符"
        placeholder=""
        :min="2"
        :max="5"
      />
    </group>

    <group title="确认输入">
      <x-input
        v-model="password"
        title="请输入6位数字"
        type="text"
        placeholder=""
        :min="6"
        :max="6"
        @on-change="change"
      />
      <x-input
        v-model="password2"
        title="请确认6位数字"
        type="text"
        placeholder=""
        :equal-with="password"
      />
    </group>

    <group
      title="验证码"
      class="weui_cells_form"
    >
      <x-input
        title="验证码"
        class="weui_cell_vcode"
      >
        <img
          slot="right"
          class="weui_vcode-img"
          src="http://weui.github.io/weui/images/vcode.jpg"
        >
      </x-input>
      <x-input
        title="发送验证码"
        class="weui_vcode"
      >
        <x-button
          slot="right"
          type="primary"
          mini
        >
          发送验证码
        </x-button>
      </x-input>
    </group>

    <group title="check if value is valid when required===true">
      <x-input
        ref="input01"
        title="message"
        placeholder="I'm placeholder"
        required
      />
      <cell
        title="click to get valid value"
        :value="'$valid value:' + valid1"
        @click.native="getValid1"
      />
    </group>

    <group title="check if value is valid when required===false">
      <x-input
        ref="input02"
        title="message"
        placeholder="I'm placeholder"
        :required="false"
        @click.native="getValid2"
      />
      <cell
        title="click to get valid value"
        :value="'$valid value:' + valid2"
        @click.native="getValid2"
      />
    </group>
  </div>
</template>

<script>
import { XInput, Group, XButton, Cell } from '../components/_index'
export default {
  components: {
    XInput,
    XButton,
    Group,
    Cell
  },
  data () {
    return {
      password: '123465',
      password2: '',
      valid1: false,
      valid2: false,
      iconType: '',
      be2333: function (value) {
        return {
          valid: value === '2333',
          msg: 'Must be 2333'
        }
      },
      style: '',
      disabledValue: 'hello',
      debounceValue: '',
      maxValue: ''
    }
  },
  methods: {
    getValid1 () {
      this.valid1 = this.$refs.input01.valid
    },
    getValid2 () {
      this.valid2 = this.$refs.input02.valid
    },
    change (val) {
      console.log(val)
    },
    onBlur (val) {
      console.log('on blur', val)
    },
    onFocus (val) {
      console.log('on focus', val)
    }
  }
}
</script>
<style scoped>
.red {
  color: red;
}
.green {
  color: green;
}
</style>
