<!-- CopyRight (C) 2017-2022 Hundsun Holding Limited. -->
<!-- Created by asiaChan on 17/12/15. -->

<template>
    <lc-cell :label="label"
        class="lc-textarea"
        :cell-style="newCellStyle"
        :label-style="labelStyles"
        :title-style="newTitleStyle"
        :has-top-border="hasTopBorder"
        :has-bottom-border="hasBottomBorder"
        :accessible="true">
        <div class="lc-textarea__bd" slot="title">
            <textarea
                class="lc-textarea__inner"
                :autofocus="autofocus"
                :placeholder="placeholder"
                :name="name"
                :rows="rows"
                v-model="currentValue"
                @focus="$emit('onFocus')"
                @blur="$emit('onBlur')"
                @change="$emit('onChange')"
                @input="$emit('onInput')"
                :maxlength="max"
                ref="textarea">
            </textarea>
            <text v-if="showCounter && max && max>0" @click="focus" class="lc-textarea-counter">{{count}}/{{max}}</text>
        </div>
    </lc-cell>

</template>

<script>
 
  import LcCell from '../lc-cell';
  export default {
    components: { LcCell },
    data () {
        return {
            currentValue: ''
        }
    },
    props: {
        label: String,
        showCounter: {
            type: Boolean,
            default: true
        },
        max: Number,
        value: String,
        name: String,
        placeholder: String,
        autofocus: {
            type: Boolean,
            default: false
        },
        rows: {
            type: Number,
            default: 3
        },
        hasTopBorder: {
            type: Boolean,
            default: true
        },
        hasBottomBorder: {
            type: Boolean,
            default: true
        },
        // cellStyle: {
        //     type: Object,
        //     default: {alignItems:'flex-start'}
        // },
        // titleStyle: {
        //     type: Object,
        //     default: {marginRight:'0'}
        // },
        cellStyle: Object,
        titleStyle: Object,
        labelWidth: String,
        labelAlign: String,
        labelColor: {
            type: String,
            default: '#4A4A4A'
        }
    },
    computed: {
        count () {
            let len = 0
            if (this.currentValue) {
                len = this.currentValue.replace(/\n/g, 'aa').length
            }
            return len > this.max ? this.max : len
        },
        labelStyles () {
            return {
                width: this.labelWidth || '',
                textAlign: this.labelAlign || 'left',
                color: this.labelColor
            }
        },
        newCellStyle() {  
            const { cellStyle } = this;         
            return { ...cellStyle, alignItems:'flex-start' };
        },
        newTitleStyle() {
            const { titleStyle } = this;
            return { ...titleStyle, marginRight: '0' };
        }
    },
    methods: {
        focus () {
            this.$refs.textarea.focus()
        }
    },
    created () {
        this.currentValue = this.value;
    },
    watch:{
        value (val) {
            this.currentValue = val
        },
        currentValue (newVal) {
            if (this.max && newVal && newVal.length > this.max) {
                this.currentValue = newVal.slice(0, this.max)
            }
            this.$emit('input', newVal);

        }
    }
}
</script>


<style scoped>

.lc-textarea {
    padding-top: 22px;
    padding-bottom: 22px;
}

.lc-textarea__bd {
    flex: 1;
}

.lc-textarea__inner {
    resize: none;
    font-size: 30px;
    color: #4A4A4A;
    line-height: 30px;
}

.lc-textarea-counter {   
    text-align: right;
    font-size: 24px; 
    color: #9B9B9B;
}

</style>
