<template>
    <!-- 多行输入框 -->
    <x-textarea
        v-model="formItem.value"
        :placeholder="listItem.placeholder"
        show-counter
        v-bind="max"
        :rows="3"
        @on-change="clearValidate"
        @on-blur="verify().catch(() => {})"
    >
        <template slot="label">
            <slot></slot>
        </template>
    </x-textarea>
</template>

<script>
import { XTextarea } from 'vux'
import common from '@/common/formRender/mixin/common.js'
import length from '@/common/formRender/mixin/length.js'
export default {
    name: 'FormTextarea',
    mixins: [common, length],
    components: { XTextarea },
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    data () {
        const max = {}
        const { length, lengthMax } = this.listItem.verify
        if (length && lengthMax) max.max = lengthMax - 0
        return {
            max
        }
    },
    created () {
        this.verifyInit()
    },
    mounted () {
        const { length, lengthMin, lengthMax } = this.listItem.verify
        if (length && (lengthMin || lengthMax)) {
            let text = lengthMin && !lengthMax ? lengthMin + ' 个字以上'
                : !lengthMin && lengthMax ? lengthMax + ' 个字以内'
                    : `${lengthMin} ~ ${lengthMax} 个字`
            this.$el.querySelector('.item-title').innerHTML += `<span class="verify">${text}</span>`
        }
    },
    methods: {
        // 校验初始化
        verifyInit () {
            const rules = []
            const { required, length, lengthMin, lengthMax } = this.listItem.verify
            if (required) rules.push(this.required(this.listItem.title))
            if (length) {
                if (lengthMin) rules.push(this.lengthMin(lengthMin))
                if (lengthMax) rules.push(this.lengthMax(lengthMax))
            }
            if (rules.length) this.validator = new this.Schema({ value: rules })
        },
        // 校验
        verify () {
            return this.validate({ value: this.formItem.value })
        }
    }
}
</script>

<style lang="less" scoped>
</style>
