
<template>
    <div class="as-address-parse">
        <textarea
            :value="value"
            :placeholder="placeholder"
            @input="handleInput"
            @compositionstart="handleCompositionStart"
            @compositionend="handleCompositionEnd"
            class="as-address-parse-textarea"
            :maxlength="maxlength">
        </textarea>
        <van-button class="as-address-parse-button clear-button" icon="close" type="primary" size="mini" v-show="value.length" @click="clear">清空</van-button>
        <van-button class="as-address-parse-button parse-button" type="primary" size="mini" :disabled="!value" @click="parse">识别</van-button>
    </div>
</template>

<script>
    import { Button } from 'vant'
    import {isEmpty} from "../../../plugins/utils/validator";
    import {filters} from "../../../plugins/filters/index";
    import AddressParse from 'address-parse';
    export default {
        name: 'AsAddressParse',
        props: {
            value: { default: '' },
            placeholder: { default: '' },
            maxlength: { default: '100' },
        },
        methods: {
            handleCompositionStart (e) {
                e.target.composing = true
            },
            handleCompositionEnd(e){
                e.target.composing = false
                this.handleInput(e)
            },
            handleInput (e) {
                if (e.target.composing) return
                let value = e.target.value
                value = isEmpty(value) ? '' : String(value)
                const { pattern } = this
                if (pattern) {
                    const typeOfPattern = typeof pattern
                    if (typeOfPattern === 'function')
                        value = pattern(value)
                    else if (typeOfPattern === 'object')
                        value = value.replace(typeOfPattern, '')
                    else if (typeOfPattern === 'string' && filters[pattern])
                        value = filters[pattern](value)
                }
                e.target.value = value
                this.$emit('input', value)
            },
            //识别
            parse() {
                const [result, ...results] = AddressParse.parse(this.value);
                // console.log(result, results);
                this.$emit('parse', result, results)
            },
            //清空
            clear() {
                this.$emit('input', '')
            }
        },
        components: {
            vanButton: Button
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/define";
    .as-address-parse{
        @extend %w100;
        @extend %pr;
        &-textarea{
            border: 1px solid #CBCBCB;
            @extend %w100;
            @extend %bsb;
            height: j(109);
            padding: j(8) j(12);
            resize: none;
            font-size: j(12);
            line-height: j(17);
        }
        &-button{
            @extend %pa;
            border-radius: j(4);
            bottom: j(8);
            right: j(8);
            &.clear-button{
                font-size: j(10);
                right: j(60);
                background: #F4F4F4;
                color: #BABABA;
                border-color: #F4F4F4;
            }
            &.parse-button{
                background: #1BB295;
                font-size: j(12);
                padding: 0 10px;
                &.van-button--disabled{
                    background: #CBCBCB;
                    border-color: #CBCBCB;
                }
            }
        }
    }
</style>

