<template>
    <view class="pcr-process">
        <view class="c-gap-inner-left c-gap-inner-right">
            <view class="c-gap-top">
                <c-image
                    v-if="data.img"
                    has-compress
                    :src="data.img"
                    width="100%"
                    height="auto"
                    mode="widthFix"
                    :hack-white-stroke="false"
                    :is-round="false"
                    display="inline-block"
                />
            </view>

        </view>

        <view v-if="data.subTitle" :class="['pcr-title', 'c-font-medium', 'pcr-process-sub']">{{ data.subTitle }}</view>
        <view v-if="data.subList && data.subList.length" class="c-gap-top">
            <view
                v-for="(msg, msgIndex) in data.subList"
                :key="msgIndex"
                class="c-font-normal c-gap-bottom-small"
            >
                <text class="c-color-333 c-font-wb c-gap-right-small">{{ msg.title }}:</text>
                <text>{{ msg.text }}</text>
            </view>
        </view>
        <view
            v-if="data.tip"
            class="pcr-process-tip"
            :style="{background: tipBgColor}"
        >
            <view class="c-font-15 cl-bold c-gap-bottom-small" :style="{color: color}">{{ data.tip.title }}</view>
            <view class="c-font-13 c-color pcr-process-tip-text">{{ data.tip.text }}</view>
        </view>
    </view>
</template>

<script>
import CImage from '@components/common/image';
/**
* @file 机构
* @author chenshuo04
*/
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CImage
    },
    props: {
        data: {
            type: Object,
            required: true
        },
        color: {
            type: String,
            default: '#ff6161'
        },
        tipBgColor: {
            type: String
        }
    }
};
</script>

<style lang="less" scoped>
.pcr-process {
    &-img {
        width: 100%;
    }

    &-sub {
        border-top: 1px solid #f1f1f1;
        padding-top: 10px;
    }

    &-tip {
        background: #fff5f5;
        border-radius: 8px;
        padding: 10px;

        &-text {
            line-height: 19px;
        }
    }

    .cl-bold {
        font-weight: bold;
    }
}
</style>
