<template> 
    <view class="detail__qa__answer" datv-module="回答">
        <view class="detail__qa__answer__title">
            医生回答({{ answer.length }})
        </view>
        <view v-for="(item, index) in answer" :key="index" class="detail__qa__answer__box">
            <view @click="toAsk(item, $event)">
                <view
                    :class="['c-gap-bottom-small', 'c-row']">
                    <view :style="{marginTop: '-5px'}" class="c-span10">
                        <doctor-info :doctorData="item"/>
                    </view>
                    <view v-if="item.docIntroHref || item.swanDocIntroHref" class="c-span2">
                        <c-button class="detail__qa__answer__doctor-counsel" size="small" text="去咨询"></c-button>
                    </view>
                </view>
            </view>
            <view class="detail__qa__answer__content">
                <view class="detail__qa__answer__content__img"></view>
                <view
                    :class="{
                        'detail__qa__answer--bottom-line': index < answer.length - 1
                    }"
                    class="detail__qa__answer__content__analy c-gap-inner-bottom-large">
                    <view
                        v-if="item.description.content"
                        :class="{'detail__qa__answer--pad-large': !item.description.guide_content}"
                    >
                        <rich-text :nodes="item.description.content_title + item.description.content"></rich-text>
                    </view>
                    <view
                        v-if="item.description.guide_content"
                        class="detail__qa__answer--pad-large c-gap-inner-bottom"
                    >
                        <rich-text :nodes="item.description.guide_title + item.description.guide_content"></rich-text>
                    </view>
                    <view class="detail__qa__answer__bottom-info">
                        <view class="detail__qa__answer--question-tip-info">{{ item.description.time }}</view>
                        <interaction
                            v-if="like && like.likeUrl && item.like"
                            :like="item.like"
                            :common="common"
                            type="small"
                            class="health-answer-like"
                        />
                    </view>
                    <view v-if="item.description.ask.length > 0" class="detail__qa__answer__content__more-ask">
                        <view v-for="(moreAsk, index) in item.description.ask" :key="index">
                            <view v-if="moreAsk.description" class="c-gap-inner-bottom detail__qa__answer__content__more-ask-question">
                                <view class="detail__qa__answer--black-tip detail__qa__answer--green-tip">患者追问：</view>
                                <view class="c-gap-inner-bottom-small">{{ moreAsk.description }}</view>
                                <view class="detail__qa__answer--question-tip-info">{{ moreAsk.ask_time }}</view>
                            </view>
                            <view v-if="moreAsk.content" class="c-gap-inner-bottom">
                                <view class="detail__qa__answer--black-tip">医生答复：</view>
                                <view class="c-gap-inner-bottom-small">{{ moreAsk.content }}</view>
                                <view class="detail__qa__answer--question-tip-info">{{ moreAsk.answer_time }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>

/**
 *  @file 回答
 *  @author yantingxi
 */

import Interaction from './../../common/interaction';
import DoctorInfo from './DoctorInfo';
export default {
    config: {
        component: true
    },
    props: {
        answer: {
            type: [Array, Object],
            default: () => []
        },
        common: {
            type: Object,
            default: () => {}
        },
        like: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            sLoading: false
        };
    },
    components: {
        DoctorInfo,
        Interaction
    }
};
</script>

<style lang="less" scoped>
.detail__qa__answer {
    background: #fff;
    line-height: .26rem;
    color: #333;

    &__box {
        &:last-child {

        }
    }

    &--pad-large {
        padding-bottom: .04rem;
    }

    &--black-tip {
        font-weight: 700;
    }

    &--green-tip {
        color: #02b7ca;
    }

    &__title {
        font-size: .19rem;
        padding-top: .16rem;
    }

    &__content {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        text-align: justify;

        &__more-ask {
            background: #f8f8f8;
            padding: 0.13rem 0.15rem 0.04rem 0.15rem;
            border-radius: .03rem;
            margin-top: .15rem;
            margin-bottom: .04rem;
            line-height: .22rem;
            font-size: .14rem;
        }

        &__img {
            width: .36rem;
            height: .36rem;
            border-radius: 50%;
            flex: 0 0 auto;
        }

        &__analy {
            flex: 1;
            margin-left: .1rem;
            padding-bottom: .15rem;
        }

        &__more-ask-question {
            padding-bottom: 0.2rem;
        }
    }

    &--question-tip-info {
        color: #999;
        font-size: .13rem;
        line-height: .13rem;
    }

    &__doctor-counsel {
        border: 1px solid #707379;
        text-overflow: clip;
    }

    &__bottom-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    &--bottom-line {
        border-bottom: 1px solid #f1f1f1;
    }
}
</style>
