<template>
    <view class="buttons-info">
        <view
            class="buttons-info-fold"
        >
            <view
                v-if="opFold && opFold.length"
                class="buttons-info-fold-wrapper"
            >
                <view
                    class="buttons-info-fold-dot"
                    @tap="opFoldUpdate"
                >
                    <text v-if="foldText" class="c-font-normal c-color-gray">{{ foldText }}</text>
                    <c-icon
                        v-else
                        name="ellipsis"
                        font-size="16px"
                        :style="{
                            color: '#999',
                        }"
                    />
                    <view
                        v-if="opFoldOpen"
                        class="buttons-info-fold-list"
                    >
                        <view
                            v-for="(btn, index) in opFold"
                            :key="index"
                            class="buttons-info-fold-list-item c-font-13 c-color"
                            :style="{
                                color: theme[btn.color],
                            }"
                            @tap="$emit('btnTap', btn)"
                        >
                            {{ btn[btnTextName] }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view
            v-if="op && op.length"
            class="m-btn-wrappe"
        >
            <view
                v-for="(btn, index) in op"
                :key="index"
                class="m-btn"
            >
                <view
                    v-if="btn.hidden !== '1'"
                    :class="{
                        'c-gap-left': index !== 0,
                    }"
                    class="m-btn-inner"
                    :style="{
                        'margin-left': btnGap,
                        'min-width': minWidth,
                    }"
                >
                    <c-button
                        :height="btnHeight"
                        :font-size="fontSize"
                        :primary-color="theme[btn.color]"
                        :background="btn.bgColor || ''"
                        border-radius="20px"
                        @tap="$emit('btnTap', btn)"
                    >
                        <text
                            :style="{
                                color: btn.textColor || theme[btn.color],
                            }"
                        >{{ btn[btnTextName] }}</text>
                    </c-button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 返回顶部组件
 * @author zhangeryi@baidu.com
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CButton from '@baidu/med-ui/components/Button/Button';

export default {
    config: {
        component: true
    },
    components: {
        CButton,
        CIcon
    },
    props: {
        data: {
            'type': Array,
            'default': () => ([])
        },
        foldLength: {
            'type': Number,
            default: 3
        },
        btnTextName: {
            'type': String,
            'default': 'text'
        },
        foldText: {
            'type': String,
            'default': ''
        },
        btnGap: {
            'type': String,
            'default': ''
        },
        fontSize: {
            'type': Number,
            'default': 12
        },
        minWidth: {
            'type': String,
            'default': '0.66rem'
        },
        btnHeight: {
            'type': Number,
            'default': 28
        }
    },
    data() {
        return {
            opFold: '',
            opFoldOpen: false,
            theme: {
                gray: '#707379',
                red: '#fd503e',
                lightGray: '#858585'
            }
        };
    },
    computed: {
        op() {
            let arr = this.data || [];
            arr = arr.filter(item => !item.hidden);
            if (arr.length > this.foldLength) {
                this.opFold = arr.slice(0, arr.length - this.foldLength);
                arr = arr.slice(arr.length - this.foldLength);
            } else {
                this.opFold = '';
            }
            return arr;
        }
    },
    methods: {
        opFoldUpdate() {
            this.opFoldOpen = !this.opFoldOpen;
        }
    }
};
</script>
<style lang="less" scoped>
.buttons-info {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;

    &-fold {
        &-dot {
            position: relative;
            z-index: 2;
            padding-left: .08rem;
        }

        &-list {
            position: absolute;
            bottom: .28rem;
            left: 0;
            width: 90px;
            text-align: center;
            background: #fff;
            border-radius: .08rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, .18);

            &::before {
                content: '';
                position: absolute;
                left: .1rem;
                top: 100%;
                display: block;
                width: 0;
                height: 0;
                border: .05rem solid transparent;
                border-top: .05rem solid #fff;
            }

            &-item {
                height: .43rem;
                line-height: .43rem;
                border-bottom: 1px solid #f1f1f1;

                &:last-child {
                    border-bottom: none;
                }
            }
        }
    }

    .m-btn {
        display: inline-block;

        &-inner {
            min-width: .66rem;
        }
    }
}
</style>


