<template>
    <c-popup
        :show="show"
        scroll-view
        visibility-only-mask
        :max-height="'80%'"
        :height="'80%'"
        class="date-popup"
        :row-tile="true"
        close-icon="close-circle"
        @close="handlePopupClose"
        @masktap="handlePopupClose"
    >
        <view class="select-date">
            <view class="select-date-head">
                <!-- <view class="select-date-topline"/> -->
                <view class="title">
                    {{ data.selectText }}
                    <c-icon
                        v-if="showClose"
                        class="btn-close"
                        name="close-circle"
                        font-size="16px"
                        @tap="handlePopupClose"
                    />
                </view>
            </view>
            <view v-if="data.tipText" class="tip-box">{{ data.tipText }}</view>
            <b-calendar
                class="select-date-wrapper"
                :date-group="dateGroup"
                type="default"
                :primary-color="ueConf.detailColor"
                :show-title="showTitle"
                :is-tap="isTap"
                @changeDate="changeDate"
            />
            <view v-if="showBtn" class="bottom-wrapper swan-security-padding-bottom">
                <view
                    class="btn-cont c-font-medium"
                    :style="{background: ueConf.detailBgColor}"
                    @tap="onSubmit"
                >确定</view>
            </view>
        </view>
    </c-popup>
</template>

<script>
/**
 * @file 预约popup
 * @author zhanngqian51@baidu.com
 * @categories 通用组件
 * @tags [component]
*/

/* global Page swan  getApp */
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import CIcon from '@baidu/med-ui/components/Icon/Icon';

import BCalendar from './calendar';

export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    components: {
        CPopup,
        BCalendar,
        CIcon
    },
    props: {
        /**
         * 是否显示
         */
        show: {
            'type': Boolean,
            'default': false
        },
        /**
         * 数据
         */
        data: {
            'type': [Object, Array],
            'default': () => {
                return {};
            },
            required: true
        },
        /**
         * 配置颜色
         */
        ueConf: {
            type: Object,
            default: () => {
                return {
                    'detailBgColor': 'linear-gradient(134deg, #489AF6 0%, #82CBFF 100%)',
                    'detailColor': '#FD503E'
                };
            }
        },
        showClose: {
            'type': Boolean,
            'default': false
        },
        showTitle: {
            type: Boolean,
            default: true
        },
        isTap: {
            type: Boolean,
            default: true
        },
        showBtn: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            selected: 'date-start',
            curView: '',
            calendarData: null,
            selectedDate: this.data.defaultDate || '',
            dateGroup: this.data.dateGroup || []
        };
    },
    watch: {
        data(newVal, oldVal) {
            this.dateGroup = newVal.dateGroup;
        }
    },
    methods: {
        handlePopupClose() {
            /**
             * 关闭事件
             */
            this.$emit('onClose');
        },
        changeDate(date) {
            this.selectedDate = date;
        },
        onSubmit() {

            /**
             * 日期提交
             */
            this.$emit('selectDateTime', this.selectedDate);
            this.handlePopupClose();
        }
    }
};
</script>
<style lang="less" scoped>
.select-date {
    position: relative;
    height: 100%;
    &-head {
        width: 100%;
        text-align: center;
        // position: absolute;
        // top: 0;
        // left: 50%;
        // transform: translateX(-50%);
        // z-index: 1;
    }
    &-topline {
        position: relative;
        width: 100%;
        height: 4px;
        padding-top: 5px;
        // &::after {
        //     content: '';
        //     position: absolute;
        //     top: 5px;
        //     left: 50%;
        //     transform: translateX(-50%);
        //     display: inline-block;
        //     width: 50px;
        //     height: 6px;
        //     background: #EEE;
        //     border-radius: 3px;
        // }
    }
}
.title {
    width: 100%;
    background: #fff;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #333;
    padding: 17px 0;
    z-index: 1;
    position: relative;
    .btn-close {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: bold;
    }
}
// .select-date-wrapper {
//     margin-top: 30px;
// }
.bottom-wrapper {
    width: 100%;
    position: fixed;
    height: .66rem;
    padding-top: 8px;
    bottom: 0;
    background: #fff;
    &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 1px;
        background: #E6E6E6;
        transform: scaleY(0.5);
    }
}
.btn-cont {
    width: calc(100% - 34px);
    height: 44px;
    text-align: center;
    color: #FFFFFF;
    line-height: 44px;
    border-radius: 22px;
    margin: 0 auto;
}
.tip-box {
    background: #FFE6E6;
    height: 34px;
    font-size: 13px;
    color: #FD503E;
    letter-spacing: 0;
    line-height: 34px;
    width: 100vw;
    padding-left: 17px;
    box-sizing: border-box;
    margin-bottom: 12px;
}
</style>
