<template>
    <c-popup
        :show="show"
        :z-index="zIndex || '921'"
        :title="title"
        :show-close="true"
        :show-title-line="true"
        :show-close-handler="false"
        :max-height="'calc(100vh - ' + (topbarHeight + 80) + 'px)'"
        :height="autoHeight ? 'auto' : 'calc(100vh - ' + (topbarHeight + 80) + 'px)'"
        border-radius="12px"
        close-icon="close-circle"
        class="rule-popup"
        scroll-view
        stop-scroll-through
        @close="onClose"
        @masktap="onClose"
    >
        <!-- <scroll-view 
            :style="{
                maxHeight: 'calc(100vh - ' + (topbarHeight + 80 + 38) + 'px)',
            }"
            scroll-y
            class="popup-con swan-security-padding-bottom"
        > -->
        <view v-if="content && content.length" class="rule-popup-cont c-color-333">
            <view
                v-for="(item, index) in content"
                :key="index"
                class="rule-popup-cont-item"
            >
                <!-- <view class="font-medium">{{ item.subTitle}}</view>
                <view>{{ item.subContent}}</view> -->
                <rich-text :nodes="item" @tap="tap(item)"/>
            </view>
            <!-- 投诉反馈 -->
        </view>
        <!-- </scroll-view> -->
    </c-popup>
</template>

<script>
/**
 * @file 活动规则
 * @author zhangqian51
 * @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: {
        zIndex: {
            type: String,
            default: '921'
        },
        /* 高度是否自适应 */
        autoHeight: {
            type: Boolean,
            default: false
        },
        /* 是否显示 */
        show: {
            type: Boolean,
            default: false
        },
        /* 标题 */
        title: {
            type: String,
            default: ''
        },
        /* 内容 */
        content: {
            type: Array,
            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() {
            /**
             * 关闭弹窗
             *
             * @event onClose
             */
            this.$emit('close');
            /**
             * 点击链接
             */
        },
        tap(item) {
            if (item && item[0] && item[0].attrs && item[0].attrs.href) {
                this.$emit('handleFeedBack', item[0].attrs.href);
            }
        }
    }
};
</script>

<style lang="less" scoped>
.rule-popup {
    position: relative;
    font-size: 14px;
    .popup-con {
        margin-top: 10px;
        box-sizing: border-box;
        ::-webkit-scrollbar {
            width: 0;
            height: 0;
            color: transparent;
        }
    }
    &-cont {
        padding: 0 0 0.17rem 0;
    }
}
.font-medium {
    font-family: PingFangSC-Medium;
}
</style>
