<script setup>
import { computed } from 'vue'

const props = defineProps({
  /**
   * 値
   * @example modelValue: ''
   */
  modelValue: { type: String, default: '' },
  /**
   * タイトル
   * @example p_Title: '備考'
   */
  p_Title: { type: String, default: '' },
  /**
   * 制御
   * @example disabled: true
   */
  disabled: { type: Boolean, default: false },
  /**
   * 行数
   * @example '10'
   */
  rows: { type: String, default: '5' },
  /**
   * エラー
   * @example p_Error: true
   */
  p_Error: { type: Boolean, default: false },
  /**
   * 入力最大値
   * @example p_MaxLength: 10
   */
  maxlength: { type: Number, default: 9999 },
  /**
   * ダイアログモード
   * @example p_DialogMode: true
   */
  p_DialogMode: { type: Boolean, default: false },
  /**
   * フラットモード
   * @example false
   */
  p_Flat: { type: Boolean, default: false },
})

const emit = defineEmits([
  'update:modelValue',
  'onBlur',
  'onFocus',
  'onChange',
  'onInput',
  'onKeydown',
  'onKeyup',
])

const model = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  },
})
const blur = (e) => {
  emit('onBlur')
}
const focus = (e) => {
  emit('onFocus')
}
const onChange = (e) => {
  emit('onChange', e)
}
const onInput = (e) => {
  emit('onInput', e)
}
const onKeydown = (e) => {
  emit('onKeydown', e)
}
const onKeyup = (e) => {
  emit('onKeyup', e)
}
</script>

<template>
  <!-- コンポーネント 外枠 -->
  <div class="_c_textarea">
    <!-- タイトル -->
    <div
      v-if="p_Title"
      class="_title"
      :class="{ _title_dialogmode_off: !p_DialogMode, _title_dialogmode_on: p_DialogMode }"
    >
      {{ p_Title }}
    </div>
    <!-- テキストエリア -->
    <textarea
      v-model="model"
      :disabled="disabled || p_Flat"
      :maxlength="maxlength"
      :rows="rows"
      :class="{
        _textarea: !p_Flat,
        _disable_style: disabled,
        _error_style: p_Error,
        _textarea_dialogmode_off: !p_DialogMode,
        _textarea_dialogmode_on: p_DialogMode,
        _frat_style: p_Flat,
      }"
      @blur="(e) => blur(e)"
      @focus="(e) => focus(e)"
      @change="(e) => onChange(e)"
      @input="(e) => onInput(e)"
      @keydown="(e) => onKeydown(e)"
      @keyup="(e) => onKeyup(e)"
    ></textarea>
  </div>
</template>

<style lang="sass" scoped>
// コンポーネント 外枠
._c_textarea
  display: flex
  flex-direction: column

// タイトル
._title
  color: #707070
  margin-bottom: 5px
._title_dialogmode_off
  font-size: 12px
._title_dialogmode_on
  font-size: 10px

// テキストエリア
._textarea
  flex: 1
  width: 100%
  height: 100%
  outline: none
  border: none
  box-shadow: 0 0 5px 0 rgb(0 0 0 / 16%)
  border-radius: 4px
  resize: vertical
  font-family: inherit
._textarea_dialogmode_off
  padding: 20px
._textarea_dialogmode_on
  padding: 10px
._frat_style
  flex: 1
  width: 100%
  outline: none
  border: none
  resize: vertical
  font-family: inherit
  background: #ffffff

// disableスタイル
._disable_style
  background: #EFEFEF
  cursor: not-allowed

// errorスタイル
._error_style
  background: var(--q-warning, #FF6D6D)
</style>
