<template>
    <view class="buyer-reading">
        <view 
            class="buyer-reading__title c-gap-top-large c-gap-bottom c-font-big-less c-color-title"
            @tap="onTap"
        >
            <text>{{ data.title }}</text>
            <c-icon
                :name="toggle ? 'up' : 'down'"
                font-size="0.14rem"
                class="icon"
                style="color: #858585"
            />
        </view>
        <view v-show="toggle" class="buyer-reading__list c-font-normal c-color-gray c-gap-inner-bottom">
            <template v-if="data.content">
                <view 
                    v-for="(item, index) in data.content"
                    :key="index"
                    class="buyer-reading__list__item c-gap-bottom-small"
                >{{ item.value }}</view>
            </template>
        </view>
    </view>
</template>

<script>
import CIcon from '@baidu/med-ui/components/Icon/Icon';
/**
 * @file 健康检测-买家必读
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon
    },
    props: {
        /**
         * 数据
         */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            toggle: true
        };
    },
    methods: {
        onTap() {
            this.toggle = !this.toggle;
        }
    }
};
</script>

<style lang="less" scoped>
.buyer-reading {
    margin-left: 0.17rem;
    margin-right: 0.17rem;
    overflow: hidden;
    &__title {
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>
