<template>
    <view v-if="data && data.length" class="service-process c-font-normal c-color">
        <view
            v-for="(item, index) in data"
            :key="index"
            class="service-process__item"
            :class="'service-process__item__' + item.type"
        >
            <view v-if="item.type === 'img'">
                <c-image
                    has-compress
                    :src="item.value"
                    width="100%"
                    height="auto"
                    mode="widthFix"
                    :hack-white-stroke="false"
                    :is-round="false"
                />
            </view>
            <view v-else-if="item.type === 'text'" :style="{margin}">
                <text>{{ item.value }}</text>
            </view>
        </view>
    </view>
</template>

<script>
import CImage from '@components/common/image';
/**
 * @file 基因检测-服务流程
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CImage
    },
    props: {
        /* 数据 */
        data: {
            type: Array,
            default: () => {
                return [];
            }
        },
        /** 文字间距 */
        margin: {
            type: String,
            default: '0 0.07rem 0.1rem'
        },
        /** controlSpace */
        controlSpace: {
            type: Boolean,
            default: () => {
                return false;
            }
        }
    },
    data() {
        return {};
    },
    methods: {}
};
</script>

<style lang="less" scoped>
.service-process {
    &__item {
        &__img {
            // border-bottom: 1px solid #f1f1f1;
            margin-bottom: 0.11rem;

            .image {
                width: 100%;
                height: auto;
                display: block;
            }
        }

        &__text {
            &:last-child {
                margin-bottom: 0 !important;
            }
        }
    }
}
</style>
