
<template>
    <div class="as-cell"
         @click="$emit('click')"
         :class="{
            'is-required': required,
            'is-align-item-center': alignItemCenter,
            'is-clickable': clickable,
            'is-active-value': isActive,
            'is-direction-column': isColumn,
            'is-vertical': isVertical
         }">
        <slot name="prefix"></slot>
        <slot name="label">
            <div class="as-cell-label" v-html="label"></div>
        </slot>
        <slot name="value">
            <div class="as-cell-value">
                <slot>
                    <span v-html="value"></span>
                </slot>
            </div>
        </slot>
        <slot name="suffix"></slot>
        <van-icon v-if="isArrow" class="as-cell-arrow" name="arrow"/>
    </div>
</template>

<script>
    import { Icon } from 'vant'
    export default {
        name: 'AsCell',
        props: {
            label: { default: '' },
            value: { default: '' },
            clickable: { type: Boolean, default: false },
            isArrow: { type: Boolean, default: false },
            required: { type: Boolean, default: false },
            isActive: { type: Boolean, default: false },
            isColumn: { type: Boolean, default: false },
            isVertical: { type: Boolean, default: false },
            alignItemCenter: { type: Boolean, default: false },
        },
        components: {
            VanIcon: Icon,
        },
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/define";
    .as-cell{
        @extend %df;
        @extend %bw05;
        @extend %bwb;
        @extend %bsb;
        @extend %w100;
        min-height: j(50);
        font-size: j(14);
        padding: j(10) j(16);
        &.is-vertical{
            @extend %fww;
            .as-cell-label{
                @extend %w100;
            }
            .as-cell-value{
                justify-content: flex-start;
                margin-left: 0;
                text-align: left;
            }
        }
        &.is-direction-column{
            @extend %fdc;
            flex-direction: column;
            .as-cell-value{
                flex: none;
                text-align: left;
                margin-left: 0;
                justify-content: flex-start;
                span{
                    padding: 0;
                }
            }
        }
        &.is-active-value{
            .as-cell-value{
                @extend %c3;
            }
        }
        &.is-clickable{
            @extend %cp;
            @extend %ao8;
        }
        &.is-align-item-center{
            @extend %aic;
        }
        &.is-required {
            .as-cell-label{
                @extend %pr;
                &:before{
                    @extend %pa;
                    left: j(-8);
                    content: '*';
                    color: $color-danger;
                }
            }
        }
        &-label{
            @extend %df;
            @extend %c3;
            @extend %fww;
            //line-height: j(30);
            line-height: 1.6;
            padding: j(4) 0;
            word-break: break-word;
        }
        &-value{
            @extend %df;
            @extend %aic;
            //@extend %c9;
            @extend %df1;
            @extend %jce;
            @extend %tar;
            color: #b9b9b9;
            word-break: break-word;
            margin-left: j(16);
            line-height: 1.6;
            span{
                padding: j(4) 0;
            }
        }
        &-arrow{
            @extend %c9;
            @extend %pr;
            line-height: j(30);
            margin-left: j(8);
            font-size: j(16);
        }
    }
</style>
