<template>
  <div class="ws-state-textarea">
    <textarea-autosize
      :placeholder="placeholder"
      :min-height="100"
      :max-height="500"
      :value="value"
      @input="$emit('input',$event)"
      @keyup="$_onKeyup"
    />
    <div class="ws-state-textarea__bg"></div>
  </div>
</template>

<script>
import { extend } from "vee-validate";
import { required, email, min } from "vee-validate/dist/rules";
import locales from "@/locales/zh_tw";
extend("min", {
  ...min,
  // message: "不得少於{length}位"
  message: locales["validate-min"],
});
extend("required", {
  ...required,
  // message: "此項目為必填"
  message: locales["validate-required"],
});
extend("email", {
  ...email,
  // message: "email格式不符"
  message: locales["validate-email"],
});
export default {
  props: {
    placeholder: {
      type: String,
      default: '輸入...',
    },
    name: {
      type: String,
      default: null,
    },
    value: {},
    autoGrow: {
      type: Boolean,
      default: false,
    },
    rules: {
      type: String,
      default: null,
    },
  },
  methods: {
    $_onKeyup($event) {
      this.$emit("keyup", $event);
    },
  },
};
</script>

<style lang="scss">
@import "../assets/scss/ws-state-textarea.scss";
</style>