<template>
    <view class="spread">
        <view
            :style="{
                maxHeight: spreadStatus && spread && !contentType ? maxHeight + 'px' : contentHeight + 'px'
            }"
            class="spread__content"
        >
            <view id="spreadContent"><slot></slot></view>
        </view>
        <slot v-if="showBtn && spread && !contentType" name="button">
            <view
                class="spread__btn SHOW_LOG_MODULE"
                data-show="spread-switch"
                @tap="spreadChange"
            >
                <view>{{ spreadStatus ? spreadText : holdText }}</view>
                <view
                    :class="{
                        'spread__btn__icon': true,
                        'spread__btn--up': spreadStatus,
                        'spread__btn--down': !spreadStatus,
                    }"
                ></view>
            </view>
        </slot>
    </view>
</template>
<script>
/**
 *  @file 折叠
 *  @author yantingxi
 */
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system.js';
import {Mars as MarsUtils} from '@baidu/med-utils';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        // 折叠高度屏占比计算容差
        heightDifference: {
            type: Number,
            default: 44
        },
        // 是否折叠
        spread: {
            type: Boolean,
            default: true
        },
        // 折叠屏占比
        heightRatio: {
            type: Number,
            default: 1.5
        },
        spreadText: {
            type: String,
            default: '展开'
        },
        holdText: {
            type: String,
            default: '收起'
        },
        logUrl: {
            type: String,
            default: ''
        },
        contentType: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            contentHeight: 9999,
            maxHeight: 9999,
            showBtn: false,
            tcLog: false,
            spreadStatus: true
        };
    },
    mounted() {
        this.init();
    },
    watch: {
        spread(val) {
            this.init();
        }
    },
    methods: {
        async init() {
            if (this.spread) {
                const {windowHeight} = getSystemInfo();
                this.maxHeight = Math.floor(windowHeight * this.heightRatio - this.heightDifference);
                this.$mpUpdated().then(async () => {
                    this.contentHeight = await this.getContentHeight();
                    this.showBtn = this.maxHeight < this.contentHeight;
                });
            }
        },
        getContentHeight() {
            return new Promise(rel => this.$api.createSelectorQuery()
                .in(this)
                .select('#spreadContent')
                .boundingClientRect(rect => {
                    rect && rel(rect.height);
                })
                .exec()
            );
        },
        spreadChange() {
            if (!this.tcLog) {
                MarsUtils.send({
                    type: 'o',
                    action: 'click',
                    extra: {
                        mod: 'spread',
                        logUrl: this.logUrl
                    }
                });
                this.tcLog = true;
            }
            this.spreadStatus = !this.spreadStatus;
            this.$emit('change', this.spreadChange);
        }
    }
};
</script>
<style lang="less" scoped>
.spread {
    &__content {
        overflow: hidden;
        transition: all .3s cubic-bezier(.18, 0, .26, 1);
    }

    &__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: .48rem;
        border-top: 2 solid #f2f2f2;
        border-bottom: 1px solid #e1e1e1;
        background: #fafafa;
        text-align: center;
        font-size: .14rem;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

        &__icon {
            display: inline-block;
            width: .14rem;
            height: .14rem;
            margin-left: 5px;
            overflow: hidden;
            background-size: 100%;
        }

        &--up {
            background-image: url(https://med-fe.cdn.bcebos.com/images/up.png);
        }

        &--down {
            background-image: url(https://med-fe.cdn.bcebos.com/images/down.png);
        }
    }
}
</style>
