
<template>
    <as-cell
        @click="$emit('click')"
        class="as-cell-picker"
        :label="label"
        :value="computedValue"
        :required="required"
        :clickable="!disabled"
        :is-active="computedIsNotEmptyValue"
        :is-arrow="!computedShowClear && isArrow"
        :is-vertical="isVertical"
    >
        <template #suffix>
            <van-icon
                @click.stop="handleClear"
                v-show="computedShowClear"
                class="as-cell-picker-clear"
                name="clear"
            />
        </template>
    </as-cell>
</template>

<script>
    import { Icon } from 'vant'
    import AsCell from '../as-cell'
    import { isNotEmpty } from '../../../plugins/utils/validator'
    export default {
        name: 'AsCellPicker',
        props: {
            label: { default: '' },
            isArrow: { type: Boolean, default: true },
            clearable: { type: Boolean, default: false },
            disabled: { type: Boolean, default: false },
            required: { type: Boolean, default: false },
            isVertical: { type: Boolean, default: false },
            placeholder: { default: '' },
            formatter: { type: Function, default: v => v },
            value: { default: '' },
        },
        computed: {
            computedValue () {
                const { value, placeholder } = this
                return isNotEmpty(value) ? this.formatter(value) : placeholder
            },
            computedIsNotEmptyValue () {
                return isNotEmpty(this.value)
            },
            computedShowClear() {
                return isNotEmpty(this.value) && !this.disabled && this.clearable
            },
        },
        methods: {
            handleClear () {
                this.$emit('input', '')
                this.$emit('change', '')
            },
        },
        components: {
            AsCell,
            VanIcon: Icon,
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/define";
    .as-cell-picker{
        &-clear{
            @extend %df;
            @extend %aic;
            @extend %cp;
            @extend %jcc;
            @extend %pr;
            z-index: 1;
            color: #ccc;
            width: j(16);
            height: j(30);
            padding-left: j(8);
            font-size: j(16);
        }
    }
</style>
