<template>
    <c-popup
        :show="show"
        :z-index="'921'"
        :title="title"
        :show-close="true"
        :show-close-handler="false"
        :mask-close="false"
        :title-style="{color: '#1f1f1f'}"
        max-height="80%"
        height="80%"
        border-radius="0.21rem"
        close-icon="close"
        class="service-popup"
        scroll-view
        stop-scroll-through
        @close="onClose('btn')"
        @masktap="onClose('mask')"
    >
        <view v-if="content.list" class="service-popup__inner">
            <view 
                v-for="(item, index) in content.list"
                :key="index"
                :class="['service-popup__item', 'service-popup__item--' + item.type]"
            >
                <view v-if="item.prefix" class="service-popup__item__prefix">{{ item.prefix }}</view>
                <view v-if="item.text" class="service-popup__item__text">{{ item.text }}</view>
            </view>
        </view>
    </c-popup>
</template>

<script>
/**
* @file 健康检测服务弹窗
* @author mayifan02
* @categories 业务组件
* @tags [component]
*/
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CPopup
    },
    props: {
        /* 是否显示 */
        show: {
            type: Boolean,
            default: false
        },
        /* 标题 */
        title: {
            type: String,
            default: ''
        },
        /* 内容 */
        content: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        return {
            isSwan,
            topbarHeight: 42
        };
    },
    watch: {
        show(newVal, oldVal) {
            if (this.show !== newVal) {
                this.show = newVal;
            }
        }
    },
    created() {
        const systemInfoSync = getSystemInfo();
        if (process.env.MARS_ENV === 'swan') {
            this.topbarHeight = systemInfoSync.statusBarHeight + systemInfoSync.navigationBarHeight;
        }
    },
    methods: {
        onClose(type) {
            /**
             * 关闭弹窗
             *
             * @event onClose
             */
            this.$emit('close');
        }
    }
};
</script>

<style lang="less" scoped>
.service-popup {
    
    &__inner {
        padding-bottom: 0.3rem;
    }
    &__item {
        display: flex;
        &--title {
            color: #1f1f1f;
            font-size: 0.18rem;
            font-weight: bold;
            margin-bottom: 0.1rem;
        }
        &--subTitle {
            color: #1f1f1f;
            font-size: 0.16rem;
            font-weight: bold;
            margin-bottom: 0.1rem;
        }
        &--threeLevel {
            font-size: 0.15rem;
            padding-left: 8px;
            position: relative;
            margin-bottom: 0.12rem;
            &::after {
                content: '';
                position: absolute;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: #00C8C8;
                left: 0;
                top: 7px;
            }
            .service-popup__item__text {
                color: #858585;
            }
        }
        &--text {
            color: #525252;
            font-size: 0.15rem;
            line-height: 0.22rem;
            margin-bottom: 0.12rem;
        }
        &__prefix {
            color: #525252;
            flex-shrink: 0;
        }
        &__text {

        }
    }
}
</style>
