<template>
    <view class="qa-list">
        <view 
            v-for="(item, index) in data" 
            :key="index" 
            class="qa-list__item c-gap-bottom"
            @tap="onItemTap(item, index)"
        >
            <view class="qa-list__item__question">
                <view class="qa-list__item__question__pre c-font-small">问</view>
                <view class="c-font-15 qa-list__item__question__text c-color-title">{{ item.question }}</view>
                <view>
                    <c-icon
                        :name="index === selectIndex ? 'up' : 'down'"
                        font-size="12px"
                        :color="'#858585'"
                        class="qa-list__item__question__icon"
                    />
                </view>
            </view>
            <view v-show="index === selectIndex" class="qa-list__item__answer">
                <view class="qa-list__item__answer__pre c-font-small">答</view>
                <view class="qa-list__item__answer__text c-font-normal c-font-15 c-color-gray">{{ item.answer }}</view>
            </view>
        </view>
    </view>
</template>

<script>
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {ubcSend} from '@utils/log';
/**
 * @file 健康检测
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon
    },
    props: {
        /** 数据 */
        data: {
            type: Array,
            default: () => {
                return [];
            }
        },
        /** 日志 */
        log: {
            type: Object,
            default: () => {
                return {
                    page: '',
                    value: ''
                };
            }
        }
    },
    data() {
        return {
            selectIndex: -1
        };
    },
    methods: {
        onItemTap(item, index) {
            if (index === this.selectIndex) {
                this.selectIndex = -1;
            } else {
                this.selectIndex = index;
            }
            ubcSend({
                page: this.log.page,
                type: 'clk',
                value: this.log.value,
                ext: Object.assign({
                    pd: 'gene',
                    value_id: item.id
                }, this.log.ext || {})
            });
            /**
             * 列表点击
             */
            this.$emit('onQaItemTap');
        }
    }
};
</script>

<style lang="less" scoped>
.qa-list {
    &__item {
        background-color: #fafafa;
        padding: 0.11rem 0.13rem;
        border-radius: 0.09rem;
        &__question {
            display: flex;
            &__pre {
                margin-top: 0.03rem;
                width: 0.17rem;
                height: 0.17rem;
                border-radius: 0.03rem;
                text-align: center;
                line-height: 0.17rem;
                color: #fff;
                margin-right: 0.08rem;
                background-color: #FD503E;
                flex-shrink: 0;

            }
            &__icon {
                transition: all .3s cubic-bezier(.42, 0, .52, 1);
            }
            &__text {
                flex: 1;
                margin-right: 0.04rem;
            }
        }
        &__answer {
            display: flex;
            margin-top: 0.07rem;
            &__pre {
                margin-top: 0.03rem;
                width: 0.17rem;
                height: 0.17rem;
                border-radius: 0.03rem;
                text-align: center;
                line-height: 0.17rem;
                color: #fff;
                margin-right: 0.08rem;
                background-color: #00C8C8;
                flex-shrink: 0;
            }
        }
        &:last-child {
            margin-bottom: 0;
        }
    }
}
</style>
