<template>
    <view class="rules-dialog">
        <c-dialog
            :show="dialog.show"
            :btn-opts="[]"
            :gap-top="0"
            :gap-bottom="68"
            :btn-slot-height="68"
            :max-height="0.55"
            >
            <view slot="title" class="rules-dialog-tit">
                <view v-if="dialog.title">{{ dialog.title }}</view>
            </view>
            <view>
                <view v-if="dialog.subTit" class="rules-dialog-subtit c-color-normal">
                    {{ dialog.subTit }}
                </view>
                <view v-if="dialog.content && dialog.content.length" class="rules-dialog-content c-gap-top-small">
                    <view
                        v-for="(ruleItem, ruleIndex) in dialog.content"
                        :key="ruleIndex"
                        class="c-color-normal c-font-normal">
                        {{ dialog.content.length > 1 ? ruleIndex + 1 + '、' : '' }}{{ ruleItem }}
                    </view>
                </view>
            </view>
            <view slot="btn" class="rules-dialog-bottom">
                <view class="rules-dialog-shadow"></view>
                <view class="rules-dialog-btn-wrap">
                    <c-button
                        @tap="closeDialog"
                        @touchmove.prevent
                        type="primary"
                        primary-color="#489AF6"
                        background="linear-gradient(134deg, #489AF6 0%, #82CBFF 100%)"
                        border-radius="22px"
                        :font-size="15"
                        font-weight="bold"
                        :height="38"
                        class="rules-dialog-btn">
                        我知道了
                    </c-button>
                </view>
            </view>
        </c-dialog>
    </view>
</template>

<script>

/**
 * @file 挂号规则弹窗
 * @author wangying51
 *
*/

import Dialog from '@baidu/med-ui/components/Dialog/Dialog';
import Button from '@baidu/med-ui/components/Button/Button';

export default {
    config: {
        component: true
    },
    props: {
        dialog: {
            'type': Object,
            'default': {
                title: '',
                subTit: '',
                content: null,
                show: false
            }
        }
    },
    data() {
        return {
        };
    },
    components: {
        'c-dialog': Dialog,
        'c-button': Button
    },
    methods: {
        closeDialog() {
            this.$emit('closeDialog');
        }
    }
};
</script>
<style lang="less" scoped>
.rules-dialog {
    &-tit {
        height: .57rem;
        line-height: .57rem;
        font-size: .2rem;
        text-align: center;
        color: #333;
        font-weight: bold;
    }
    &-subtit {
        font-size: .2rem;
        line-height: .2rem;
    }
    &-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9;
    }
    &-shadow {
        width: 100%;
        height: 30px;
        background: linear-gradient(top, rgba(216, 216, 216, .05), rgba(51, 51, 51, .05));
        background-color: transparent;
    }

    &-btn-wrap {
        padding: 15px 24px;
        background: #ffffff;
        border-bottom-right-radius: 13px;
        border-bottom-left-radius: 13px;
    }
    &-btn {
        width: 100%;
    }
}
</style>


