<template>
  <div
    class="mb-px bg-white px-4 rounded"
  > 
    <div v-if="checkIfEmpty(label)" class="py-2 flex items-center justify-between text-sm text-text-secondary relative">
      <div class="">
        <span v-if="required" class="text-color-primary mr-0.5">*</span>
        <span>{{ label }}</span>
      </div>
      <div v-if="limit > 0" class="limit">{{ length }}/{{ limit }}</div>
      <app-icon
        v-if="dot"
        type="png"
        :path="require('@/assets/icons/dot.png')"
        class-name="h-5 w-1 ml-auto absolute right-0"
      />
    </div>
    <div class="py-3">
      <div class="flex-1">       
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <slot name="prefix" />
          </div>
          <input
            v-if="type !== 'textarea'"
            :type="type"
            :value="value"
            class="w-full text-text-primary flex-1"
            :placeholder="placeholder"
            @input="handleInput"
            @blur="handleChange"
            @compositionstart="onCompositionStart"
            @compositionend="onCompositionEnd"
          >         
          <textarea
            v-else
            :value="value"
            :placeholder="placeholder"
            class="w-full break-all"
            @input="handleInput"
            @blur="handleChange"
          />
          <div class="flex-shrink-0">
            <slot name="action" />
          </div>
        </div>
        <div v-if="showError" class="error text-xs text-warn-color mt-2">{{ errorMsg }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Field } from 'vant'
import { trim } from '@/util/Contact'
Vue.use(Field)

export default Vue.extend({
  components:{ 
    'app-icon':()=>import('@/components/common/Icon.vue')
    // 'main-page': () => import('@/layout/main-page.vue')
  },
  props: {
    // title: String,
    dot: {
      type: Boolean,
      default: false
    },
    label: String,
    type: {
      type: String,
      default: 'text'
    },
    errorMsg: {
      type: String,
      default: '错误信息'
    },
    required: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 0
    },
    placeholder: {
      type: String,
      default: '请输入..'
    },
    value: String
  },
  name: 'InputCell',
  data() {
    return  {
      // value: '',
      length: 0,
      showError: false,
      compsitionCheck: true
    }
  },
  methods: {
    onCompositionStart() {
      this.compsitionCheck = false
    },
    onCompositionEnd(e: InputEvent) {
      this.compsitionCheck = true
      const value = (e.target as HTMLInputElement).value
      this.showError = this.showError ? !this.checkIfEmpty(value) : this.showError
      this.length = value.length
      if (this.limit > 0 && this.length >= this.limit) {
        this.$emit('input', value.slice(0, this.limit))
        this.length = this.limit
      } else {
        this.$emit('input', value)
      }
    },
    checkIfEmpty(string: string) {
      if (typeof string === 'undefined') return false
      return string.replace(/(^\s*)|(\s*$)/g, '') !== ''
    },
    handleInput(e: InputEvent) {
      if (!this.compsitionCheck) return
      const value = (e.target as HTMLInputElement).value
      this.showError = this.showError ? !this.checkIfEmpty(value) : this.showError
      this.length = value.length
      if (this.limit > 0 && this.length >= this.limit) {
        this.$emit('input', value.slice(0, this.limit))
        this.length = this.limit
      } else {
        this.$emit('input', value)
      }
    },
    handleChange(e: Event) {
      const value = (e.target as HTMLInputElement).value
      if (this.required && !this.checkIfEmpty(value)) {
        this.showError = true
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.length = (val && val.length) || 0
      },
      immediate: true
    }
  }
})
</script>

<style lang="less">

</style>
