<template>
    <view>
        <!-- <view
            v-if="!isNewStyle"
            class="fever"
            :class="gap ? 'gap' : ''"
            :style="{background: background}"
        >
            <c-label
                v-if="healthNotice.label"
                :text="healthNotice.label"
                color="box_red"
                class="c-gap-right-middle notice-label"
            />
            <view class="tips c-gap-right-small">
                {{ healthNotice.text }}
            </view>
            <view
                :style="{background: feedBg}"
                class="notice-feed"
                @tap="handleFeed"
            >
                <image src="https://med-fe.cdn.bcebos.com/card/phone.png" class="notice-feed-tel-icon"/>
                <text>反馈</text>
            </view>
        </view> -->
        <view
            class="fever"
            :class="gap ? 'gap' : ''"
            :style="{background: background}"
            @tap="handleFeedBack"
        >
            <c-label
                v-if="healthNotice.label"
                :text="healthNotice.label"
                color="box_red"
                class="c-gap-right-middle notice-label"
            />
            <view class="tips c-gap-right-small">
                {{ healthNotice.text }}
            </view>
            <view
                :style="{background: feedBg}"
                class="notice-feed"
            >
                <text>{{ noticeText }}</text>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 医院非官方提示
 * @author zhaoqiang07
 * @tags [sub-component]
 */
import CLabel from '@baidu/med-ui/components/Label/Label';
export default {
    config: {
        component: true,
    },
    components: {
        CLabel,
    },
    props: {
        healthNotice: {
            type: Object,
            default: () => ({}),
        },
        background: {
            type: String,
            default: '#fff',
        },
        feedBg: {
            type: String,
            default: '#fff',
        },
        isNewStyle: {
            type: Boolean,
            default: false,
        },
        gap: {
            type: Boolean,
            default: false,
        },
        noticeText: {
            type: String,
            default: '申请入驻',
        },
    },
    data() {
        return {

        };
    },
    methods: {
        handleFeed() {
            this.$api.makePhoneCall({
                phoneNumber: '4009213008',
            });
        },
        handleFeedBack() {
            this.$emit('handleTap');
        },
    },
};
</script>

<style lang="less" scoped>
    .fever {
        margin: 8px 10px 0;
        display: flex;
        align-items: center;
        height: .44rem;
        padding-left: 12px;
        border-radius: .12rem;
        font-size: .14rem;
        color: #1f1f1f;
        background: #fff;
        box-sizing: border-box;

        &.gap {
            margin-left: 17px;
            margin-right: 17px;
        }

        .notice-label {
            flex-shrink: 0;
        }

        .tips {
            flex: 1;
        }

        .notice-feed {
            height: .25rem;
            line-height: .25rem;
            padding: 0 .1rem;
            color: #00c8c8;
            font-size: .13rem;
            border-radius: .12rem;
            margin-right: .08rem;

            &-tel-icon {
                display: inline-block;
                width: .13rem;
                height: .13rem;
                vertical-align: middle;
                margin-right: .03rem;
            }
        }
    }
</style>
