<template>
    <navigate
        :url="url"
        class="qa-item"
        :log="{
            page: page,
            type: 'clk',
            value: 'DRUG_INFO_EXPERT_QA_ITEM',
        }"
        @tap="spreadHandeler"
    >
        <view class="qaa c-row">
            <view class="c-span1 i-icon-wrapper">
                <view class="qst-icon i-icon">问</view>
            </view>
            <view class="c-span8">
                <view
                    :class="{
                        'c-line-clamp1': !isOpen,
                    }"
                    class="c-font-medium qst-info"
                >
                    {{ data.title }}
                </view>
            </view>
        </view>
        <view
            v-for="(aswItem, idx) in data.answers"
            :key="idx"
            class="answer-item"
        >
            <view
                class="qaa c-row c-gap-top-mini"
            >
                <view class="c-span1 i-icon-wrapper">
                    <view class="asw-icon i-icon">答</view>
                </view>
                <view class="c-span8">
                    <view
                        :class="{
                            'open': isOpen,
                        }"
                        class="spread"
                    >
                        <view
                            :class="{
                                'c-line-clamp2': !spread,
                            }"
                            class="c-font-15 asw-info"
                        >
                            <rich-text
                                :nodes="aswItem.answer"
                            />
                        </view>
                        <view
                            v-if="spread && !isOpen"
                            class="spread-handeler c-font-15 c-color-gray"
                        >
                            展开
                        </view>
                    </view>
                    <view
                        class="qa-info c-flex-row c-color-gray c-font-normal"
                    >
                        <view class="c-span-8 qa-doc">
                            <view class="c-line-clamp1">
                                <text class="c-gap-right-small">{{ aswItem.doctorName }}</text>
                                <text class="c-gap-right-small">{{ aswItem.doctorTitle }}</text>
                                <text class="c-gap-right-small">{{ aswItem.hospital }}</text>
                            </view>
                        </view>
                        <view class="qa-time">
                            {{ aswItem.time }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </navigate>
</template>

<script>
/**
* @file qa-item
* @author zhangeryi
*/

import Navigate from '../common/navigate';
export default {
    config: {
        component: true
    },
    props: {
        data: {
            type: Object,
            default() {
                return {};
            }
        },
        isJump: {
            'type': Boolean,
            'default': false
        },
        isOpen: {
            'type': Boolean,
            'default': false
        },
        spread: {
            'type': Boolean,
            'default': false
        },
        url: {
            type: String
        },
        logkey: {
            type: String
        },
        page: {
            type: String,
            default: ''
        }
    },
    components: {
        'navigate': Navigate
    },
    methods: {
        spreadHandeler() {
            if (this.isJump || this.isOpen) {
                return;
            }
            this.$emit('spreadOpen');
        }
    }
};
</script>
<style lang="less" scoped>
.qaa {
    .i-icon {
        width: 17px;
        padding: 2.5px 0;
        text-align: center;
        font-size: 12px;
        line-height: 1;
        border-radius: 3px;
        margin-top: 3px;
        color: #fff;
        overflow: hidden;
        &.qst-icon {
            background: #fd503e;
        }
        &.asw-icon {
            background: #00c8c8;
        }
        &-wrapper {
            white-space: nowrap;
            flex: none;
            width: auto;
        }
    }
    .qst-info {
        color: #1f1f1f;
    }
    .asw-info {
        margin-bottom: 0;
        color: #1f1f1f;
        &.c-line-clamp2 {
            margin-bottom: 4px;
        }
    }
    .qa-info {
        .qa-doc {
            overflow: hidden;
        }
        .qa-time {
            white-space: nowrap;
            flex: none;
            width: auto;
            text-align: right;
        }
    }
    .spread {
        position: relative;
        max-height: 46px;
        overflow: hidden;
        &.open {
            max-height: none
        }
        &-handeler {
            position: absolute;
            bottom: 0;
            right: 0;
            padding-left: .1rem;
            background: #fff;
            &:before {
                content: '';
                position: absolute;
                right: 100%;
                top: 0;
                bottom: 0;
                background: url(https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3362704604,3642013397&fm=179&app=35&f=PNG?w=152&h=60&s=19843C7A4B6347241CD5D1DA0300E0B1) right top repeat-y;
                background-size: 100% 100%;
                width: 50px;
            }
        }
    }
}
</style>


