<template>
  <div class="bx-demo-wrap">
    <!-- 基本用法 -->
    <h2 class="bx-demo-title">
      基本用法
    </h2>
    <bxs-input
      label="文本"
      type="text"
      placeholder="请输入内容(1-8个字)"
      maxlength="8"
      v-model.trim="username"
      @clear="clear"
      />
    <bxs-input
      label="数字"
      type="number"
      placeholder="请输入数字(1-8个字)"
      maxlength="8"
      v-model.trim="username"
      @clear="clear"
      />
    <bxs-input
      label="密码"
      type="password"
      placeholder="请输入密码(1-8个字)"
      maxlength="8"
      v-model.trim="username"
      @clear="clear"
      />
    <bxs-input
      label="电话"
      type="tel"
      placeholder="请输入内容(1-11个字)"
      maxlength="11"
      v-model.trim="username"
      @clear="clear"
      />
    <!-- 标题五个字以下及以上 -->
    <h2 class="bx-demo-title">
      标题五个字以下及以上
    </h2>
    <bxs-input
      type="text"
      label="标题"
      placeholder="标题五个字以下"
      v-model.trim="username"
      @clear="clear"
      />
    <bxs-input
      type="text"
      label="标题五个字"
      placeholder="标题五个字及以上"
      v-model.trim="username"
      @clear="clear"
      />
    <bxs-input
      type="text"
      label="标题标题标题标题标题"
      placeholder="标题五个字及以上"
      v-model.trim="username"
      @clear="clear"
      />
    <!-- 禁用输入框 -->
    <h2 class="bx-demo-title">
      禁用输入框
    </h2>
    <div class="bx-hairline--bottom">
      <bxs-input
        label="用户名"
        type="text"
        placeholder="禁用"
        disabled
        />
    </div>
    <bxs-input
      label="用户名"
      type="text"
      placeholder="禁用"
      readonly="readonly"
      />
    <!-- 报错样式 -->
    <h2 class="bx-demo-title">
      报错样式
    </h2>
    <bxs-input
      class="bx-hairline--bottom"
      label="用户名"
      type="text"
      placeholder="请输入内容"
      v-model.trim="errorValue"
      error-message="[标题名称]不能为空"
      />
    <bxs-input
      class="bx-hairline--bottom"
      label="用户名"
      type="text"
      placeholder="请输入内容"
      v-model.trim="errorMsgValue"
      error-message="错误原因提示"
      />
    <bxs-input
      class="bx-hairline--bottom"
      label="用户名"
      type="text"
      placeholder="请输入内容"
      v-model.trim="errorMsgValue"
      error-message="请输入正确的[标题名称]"
      />
    <bxs-input
      class="bx-hairline--bottom"
      label="用户名"
      type="text"
      placeholder="请输入内容"
      v-model.trim="errorMsgValue"
      error-message="[标题名称]当错误提示为多行时，可换行展示。当错误提示为多行时，可换行展示。"
      />
    <!-- 尾部icon -->
    <h2 class="bx-demo-title">
      尾部icon
    </h2>
    <bxs-input
      label="带箭头"
      type="text"
      placeholder="请输入内容"
      is-link
      v-model.trim="iconValue"
      @click-icon="clickIcon"
      />
    <bxs-input
      label="清除图标"
      type="text"
      placeholder="请输入内容"
      clearable
      v-model.trim="iconValue"
      @click-icon="clickIcon"
      />
    <bxs-input
      label="自定义"
      type="text"
      placeholder="请输入内容"
      v-model.trim="iconValue"
      right-icon="search"
      icon-color="red"
      icon-size="21px"
      @click-icon="clickIcon"
      />
    <!-- 自定义尾部按钮 -->
    <h2 class="bx-demo-title">
      自定义尾部按钮
    </h2>
    <bxs-input
      label="验证码"
      type="text"
      placeholder="请输入验证码"
      v-model.trim="buttonValue"
      >
      <button
        class="bx-demo-button"
        slot="button"
        >
        获取验证码
      </button>
    </bxs-input>
    <!-- 对齐方式 -->
    <h2 class="bx-demo-title">
      对齐方式
    </h2>
    <bxs-input
      label="左对齐"
      type="text"
      placeholder="请输入内容"
      :clearable="false"
      v-model.trim="alignValue"
      right-icon="arrow-right"
      @click-icon="clickIcon"
      />
    <bxs-input
      label="居中对齐"
      input-align="center"
      type="text"
      placeholder="请输入内容"
      :clearable="false"
      v-model.trim="alignValue"
      right-icon="arrow-right"
      @click-icon="clickIcon"
      />
    <bxs-input
      label="右对齐"
      input-align="right"
      type="text"
      placeholder="请输入内容"
      :clearable="false"
      v-model.trim="alignValue"
      right-icon="arrow-right"
      @click-icon="clickIcon"
      />
    <h2 class="bx-demo-title">
      文本域
    </h2>
    <bxs-input
      label="详细地址"
      clearable
      type="textarea"
      placeholder="请填写详细地址，不少于5个字"
      v-model.trim="detailAddress1"
      />
    <!-- 自适应文本高度的文本域 -->
    <h2 class="bx-demo-title">
      自适应文本高度的文本域
    </h2>
    <div class="bx-hairline--bottom">
      <bxs-input
        label="详细地址"
        autosize
        type="textarea"
        placeholder="请填写详细地址，不少于5个字"
        v-model.trim="detailAddress2"
        />
    </div>
    <bxs-input
      :autosize="{minHeight: 44, maxHeight: 88}"
      type="textarea"
      placeholder="请填写详细地址，不少于5个字"
      v-model.trim="detailAddress3"
      />
    <!-- 文本域剩余字数统计 -->
    <h2 class="bx-demo-title">
      文本域剩余字数统计
    </h2>
    <bxs-input
      class="bx-hairline--bottom"
      :autosize="{minHeight: 44, maxHeight: 88}"
      :clearable="!1"
      maxlength="50"
      show-word-limit
      word-limit-threshold="20"
      type="textarea"
      placeholder="请填写详细地址，不少于5个字"
      v-model.trim="detailAddress4"
      />
    <bxs-input
      class="demo-input-textarea"
      :autosize="{minHeight: 44, maxHeight: 88}"
      :clearable="!1"
      maxlength="200"
      show-word-limit
      type="textarea"
      placeholder="请填写详细地址，不少于5个字"
      v-model.trim="detailAddress5"
      />
    <!-- 事件 -->
    <h2 class="bx-demo-title">
      事件，值：{{ username }}
    </h2>
    <bxs-input
      label="标题"
      type="text"
      placeholder="请输入内容"
      v-model.trim="username"
      @input="eventHandler('input')"
      @focus="eventHandler('focus')"
      @blur="eventHandler('blur')"
      @click="eventHandler('click')"
      @clear="eventHandler('clear')"
      />
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      emailValue: '',
      errorValue: '',
      errorMsgValue: '',
      iconValue: '',
      alignValue: '',
      detailAddress1: '',
      detailAddress2: '',
      detailAddress3: '',
      detailAddress4: '',
      detailAddress5: '',
      buttonValue: '',
    }
  },
  methods: {
    clear() {
      this.$toast('清除成功')
    },
    clickIcon() {
      this.$toast('你点击了我')
    },
    select(data) {
      console.log(data)
    },
    eventHandler(name) {
      console.log(name)
    },
    change(value) {
      console.log(value)
    },
  },
}
</script>
<style>
.bx-demo-wrap {
  overflow-x: hidden;
  padding-bottom: 200px;
}
.bx-demo-title {
  margin: 0;
  font-size: 14px;
  color: #333;
  padding: 30px 15px 15px;
}
.bx-demo-button {
  border: none;
  width: 80px;
  color: #508cee;
  font-size: 15px;
  margin-left: 10px;
  outline: none;
  background: none;
}
.bx-hairline--bottom:after {
  margin-left: 15px;
}

.demo-input-textarea .bx-input-textarea {
  padding: 9px 9px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #fafafa;
}
</style>
