<template>
    <view class="bk-reference">
        <view class="bk-reference-title">参考资料</view>
        <view
            v-for="(reference, index) in referenceListShow"
            :key="index"
            class="bk-reference-wrap"
        >
            <view class="bk-reference-num">[{{ index + 1 }}]</view>
            <view class="bk-reference-detail">{{ reference }}</view>
        </view>
        <view
            v-if="referenceData.length > maxNumber"
            class="bk-reference-spread c-color-gray c-font-small"
            @tap="handleIconTap"
        >
            {{ direction === 'down' ? '展开全部' : '收起内容' }}
            <c-icon
                :name="direction"
                :style="{
                    color: '#999',
                }"
            />
        </view>
    </view>
</template>

<script>
/**
 * @file 参考资料
 * @author yumingzhi
 * @categories
 * @tags
 */
import Icon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    components: {
        CIcon: Icon
    },
    props: {
        /**
         * 数据集合
         */
        referenceData: {
            type: Array,
            default: () => []
        },
        /**
         * 默认展示条数
         */
        maxNumber: {
            type: Number,
            default: 2
        }
    },
    data() {
        return {
            referenceListShow: [],
            direction: 'down'
        };
    },
    mounted() {
        this.referenceListShow = this.referenceData.slice(0, this.maxNumber);
        setTimeout(() => {
            /**
             * 透传已经加载好
             */
            this.$emit('isload', true);
        }, 500);
    },
    methods: {
        handleIconTap() {
            /**
             * 透传已经加载好
             */
            this.$emit('isload', true);
            if (this.direction === 'down') {
                this.direction = 'up';
                this.referenceListShow = this.referenceData;
            } else {
                this.direction = 'down';
                this.referenceListShow = this.referenceData.slice(0, this.maxNumber);
            }
        }
    }
};
</script>
<style lang="less" scoped>
.bk-reference {
    &-title {
        font-family: 'PingFang-SC-Medium';
        font-size: 23px;
        color: #1f1f1f;
        letter-spacing: 0;
        line-height: 23px;
        padding: 30px 0 10px 0;
        font-weight: bold;
    }

    &-wrap {
        display: flex;
        align-items: flex-start;
        color: #999;
        letter-spacing: 0;
        font-size: 14px;
        font-family: 'ArialMT';
        margin-bottom: 5px;

        .bk-reference-num {
            flex: 0 0 auto;
            margin-right: 15px;
            margin-top: -1px;
        }

        .bk-reference-detail {
            line-height: 20px;
            width: 0;
            flex: 1;
            word-wrap: break-word;
            word-break: break-all;
        }
    }

    &-spread {
        width: 100%;
        text-align: center;
    }
}
</style>
