<template>
    <view class="question-wrapper">
        <view
            v-for="(qaItem, i) in data"
            :key="i"
            :class="{
                'opened': i === opened,
            }"
            class="c-row question-item c-gap-inner-top-large c-gap-inner-bottom-large"
            @tap="itemTap(i)"
        >
            <view class="c-span1 iconw">
                <view class="m-icon m-icon-wenhao" style="font-size: 14px;margin-top: 2px;"/>
            </view>
            <view class="c-span1 infow">
                <view class="infow-q">
                    <view>
                        <text class="c-color c-font-15 c-gap-left-small">
                            {{ qaItem.question }}
                        </text>
                    </view>
                    <view class="icon-right">
                        <c-icon
                            name="right"
                            font-size="12px"
                            :style="{
                                color: '#666',
                            }"
                        />
                    </view>
                </view>
                <view
                    v-show="i === opened"
                    class="infow-a c-color-gray c-font-13 c-gap-top-small"
                >
                    {{ qaItem.answer }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file questions
* @author zhangeryi
*/

import Icon from '@baidu/med-ui/components/Icon/Icon';
// import {send} from '../../utils/log';
export default {
    config: {
        component: true
    },
    props: {
        data: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            opened: ''
        };
    },
    components: {
        'c-icon': Icon
    },
    methods: {
        itemTap(i) {
            if (this.opened === i) {
                this.opened = '';
            }
            else {
                this.opened = i;
            }
        }
    }
};
</script>
<style lang="less" scoped>
.question {
    &-item {
        border-bottom: 1px solid #f7f7f7;
        &.opened {
            .infow {
                .icon-right {
                    transform:rotate(90deg);
                }
            }
        }
        .iconw {
            flex: none;
            white-space: nowrap;
            color: #fd503e;
            width: auto;
        }
        .infow {
            .infow-q {
                position: relative;
                overflow: hidden;
                padding-right: 18px;
            }
            .icon-right {
                position: absolute;
                right: 0;
                top: 2px;
            }
        }
    }
}
</style>


