<template>
    <div class="movement-tip">
        <!-- 运动强度说明 -->
         <span @click="visible = !visible">
            <slot>
                <doc-icon type="doc-question-circle" />
            </slot>
         </span>
        <!-- <van-popup v-model:show="visible" round style="height: 70%;"> -->
        <van-overlay :show="visible" @click="visible = false"
            class="flex items-center justify-center">
            <div class="py-3 px-2 panel" @click.stop>
                <div class="title mb-2">确定有氧运动强度的常用方法</div>
                <table class="w-full">
                    <tr>
                        <th>强度分级</th>
                        <th>PRE(0-10分)</th>
                        <th>谈话实验</th>
                    </tr>
                    <tr>
                        <td>低</td>
                        <td>很轻松(&lt;3)</td>
                        <td rowspan="2">能说话也能唱歌</td>
                    </tr>
                    <tr>
                        <td>较低</td>
                        <td>很轻松到轻松(3-4)</td>
                    </tr>
                    <tr>
                        <td>中等</td>
                        <td>轻松到有些吃力(5-6)</td>
                        <td>能说话不能唱歌</td>
                    </tr>
                    <tr>
                        <td>较大</td>
                        <td>有些吃力到很吃力(7-8)</td>
                        <td rowspan="2">不能说出完整句子</td>
                    </tr>
                    <tr>
                        <td>次最大到最大</td>
                        <td>很吃力(≥9)</td>
                    </tr>
                </table>
            </div>
            <doc-icon type="close-circle" class="close-btn" @click="visible = false"/>
        </van-overlay>

        <!-- </van-popup> -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            visible: false
        }
    }
}
</script>

<style lang="less" scoped>
.panel {
    background-color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    color: #262626;
    max-height: 80%;
    overflow-y: auto;
    border-radius: 8px;
    .title {
        color: #000;
        font-size: 14px;
        // font-weight: 600;
        text-align: center;
    }
}
table {
    border-collapse: collapse;
    border-right: 1px solid #768092;
    border-bottom: 1px solid #768092;
    font-size: 12px;
    text-align: center;
    td, th{
        border-left: 1px solid #768092;
        border-top: 1px solid #768092;
        padding: 8px 4px;
    }
    th {
        font-weight: 600;
    }
}
.close-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 24px;
}
</style>