<template>
    <view
        v-if="question && question.length"
        class="c-gap-top c-gap-inner-right-middle"
    >
        <view
            v-for="(list, index) in question"
            :key="index"
            :class="index !== 0 ? 'ask-space' : ''"
            class="ask"
            @tap="navigateTo(list.link)"
        >
            <view v-if="list.title" class="ask-title">
                <view class="ask-title-icon">问</view>
                <view
                    class="ask-title-text c-gap-left-middle c-color-title c-font-normal c-line-clamp1"
                >{{ list.title }}</view>
            </view>
            <view v-if="list.count" class="ask-number c-color-gray c-font-normal">
                {{ list.count }}条回答
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file 医院主页问一问模块
* @author chenhongfan
*/
import {navigate} from '@utils/navigate';
export default {
    config: {
        component: true
    },
    props: {
        question: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        navigateTo(jumpUrl) {
            jumpUrl && navigate({
                url: jumpUrl,
                log: {
                    type: 'clk',
                    value: 'hos_wdj_detail'
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
.ask {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-title {
        display: flex;
        align-items: center;
        width: 85%;

        &-icon {
            flex-shrink: 0;
            width: 16px;
            text-align: center;
            height: 16px;
            line-height: 16px;
            background-color: #ff6f61;
            color: #fff;
            border-radius: 4px;
            font-size: 12px;
        }
    }

    &-space {
        margin-top: 6px;
    }

    &-number {
        flex-shrink: 0;
    }
}
</style>
