<template>
    <c-popup
        show-title-line
        :show="show"
        :z-index="'921'"
        :show-close="true"
        :show-close-handler="false"
        max-height="500px"
        height="500px"
        :title="title"
        border-radius="12px"
        close-icon="close-circle"
        class="rule-popup"
        stop-scroll-through
        scroll-view
        :mask-close="true"
        @close="handleCloseClick"
        @masktap="handleCloseClick"
    >
        <view v-if="data && data.length" class="qa-popup">
            <view
                v-for="(item, index) in data"
                :key="'qa' + index"
                class="qa-item"
            >
                <view class="title">{{ item.label }}</view>
                <view class="desc">{{ item.detail }}</view>
            </view>
            <!-- <view class="bottom-wrapper">
                <view class="bottom-wrapper-handle-btn flex-grow-1" @tap="handleCloseClick">
                    <text class="button-text">确定</text>
                </view>
            </view> -->
        </view>
    </c-popup>
</template>

<script>
/**
 * @file 服务保障弹窗说明
 * @categories 业务组件
 * @tags [component]
*/

/* global Page swan  getApp */
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';

export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    components: {
        CPopup
    },
    props: {
        /**
         * 是否显示
         */
        show: {
            'type': Boolean,
            'default': false
        },
        /**
         * 资质数据
         */
        data: {
            'type': Array,
            'default': () => {
                return [];
            }
        },
        /**
         * 标题
         */
        title: {
            'type': String,
            'default': ''
        }
    },
    data() {
        return {
            screenHeight: 0,
            maxHeight: 0
        };
    },
    created() {
        const systemInfoSync = getSystemInfo();
        this.screenHeight = systemInfoSync.screenHeight;
        if (process.env.MARS_ENV === 'h5') {
            this.maxHeight = (this.screenHeight - 74) * 0.85 - 56;
        } else {
            this.maxHeight = this.screenHeight * 0.85 - 56;
        }
    },
    methods: {
        handleCloseClick() {
            this.$emit('close');
        }
    }
};
</script>
<style lang="less" scoped>
.qa-popup {
    display: flex;
    flex-direction: column;
    height: calc(100% - 28px);
    padding-top: 15px;
    position: relative;
    .qa-item {
        margin-bottom: 30px;
        .title {
            font-size: 18px;
            color: #1F1F1F;
            letter-spacing: 0;
            line-height: 18px;
        }

        .desc {
            font-family: PingFangSC-Regular;
            font-size: 15px;
            color: #858585;
            letter-spacing: 0;
            line-height: 20px;
            margin-top: 7px;
        }
    }
}
 .bottom-wrapper {
        height: 0.56rem;
        background-color: #fff;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 0.01rem solid #E6E6E6;
        .bottom-wrapper-handle-btn {
            background: linear-gradient(90deg, #FD503E 0%, #FF3E00 100%, #F7603E 100%);
            color: #fff;
            text-align: center;
            height: 0.4rem;
            border-radius: 0.22rem;
            position: relative;
            width: 394px;
            .button-text {
                padding: 0 0.23rem;
                font-size: 0.15rem;
                line-height: 0.44rem;
                font-family: PingFangSC-Semibold;
            }
        }
    }
</style>
