<template>
    <view class="appointlist-hospital-calendar">
        <view class="appointlist-hospital-calendar__header">
            <view class="appointlist-hospital-calendar__header__department c-font-medium">{{ appoint.department }}</view>
            <view v-if="appoint && appoint.dategroup && appoint.dategroup.length > 1" class="appointlist-hospital-calendar__header__tabs c-gap-right-xmiddle">
                <c-tabs
                    :data="appoint.dategroup | tabsFilter"
                    :wrap-style="{
                        background: '#f5f5f5',
                    }"
                    @handleItemTap="handleTabsTap"
                />
            </view>
        </view>

        <view
            v-if="appoint && appoint.dategroup && appoint.dategroup.length"
            class="appointlist-hospital-calendar__detail c-gap-top"
        >
            <view
                v-for="(day, dayIndex) in groups"
                :key="dayIndex"
                :class="[
                    'appointlist-hospital-calendar__detail__day',
                    'appointlist-hospital-calendar__detail__day--' + day.status,
                ]"
            >
                <view
                    v-if="dayIndex === 5"
                    class="appointlist-hospital-calendar__detail__day--all c-color-333"
                    @tap="onChangeSpread"
                >
                    <view>全部</view>
                    <view>日期</view>
                    <view
                        :class="[
                            'appointlist-hospital-calendar__detail__day__all__icon',
                            spread
                                ? 'appointlist-hospital-calendar__detail__day__all__icon--down'
                                : 'appointlist-hospital-calendar__detail__day__all__icon--up',
                        ]"
                    />
                </view>
                <view
                    v-else
                    @tap.stop="handleDayTap(day)"
                >
                    <view>{{ day.week }}</view>
                    <view>{{ day.dateFormatMD }}</view>
                    <view>{{ day.btnText }}</view>
                </view>
            </view>
        </view>

        <c-popup
            :show="showPopup"
            @close="hanldeClosePopup"
        >
            <view v-if="currentDay && currentTime" class="c-gap-inner-bottom-middle">
                <view class="appointlist-hospital-calendar__popup__title c-color-333 c-font-large c-gap-top-large c-font-wb">
                    <view>{{ currentTime.dateNew }}（{{ currentTime.week }}）</view>
                    <view class="appointlist-hospital-calendar__popup__close" @tap="hanldeClosePopup"><c-icon name="close-circle" font-size=".17rem"/></view>
                </view>
                <view class="c-color-333 c-font-large c-font-wb">
                    <text v-if="hospitalName">{{ hospitalName }}/</text>
                    <text v-if="appoint.department">{{ appoint.department }}/</text>
                    <text v-if="doctor">{{ doctor }}</text>
                </view>
                <template v-if="currentTime.price && currentTime.price.length">
                    <view
                        v-for="(price, priceIndex) in currentTime.price"
                        :key="priceIndex"
                        class="c-color c-gap-bottom-small c-font-medium appointlist-hospital-calendar--xgap"
                    >
                        <text v-if="price.name" class="c-gap-right-small">{{ price.name }}:</text>
                        <text class="c-gap-right-small">{{ price.type }}</text>
                        <text class="c-color-mall">{{ price.value }} </text>
                        <text class="c-color-default c-font-normal appointlist-hospital-calendar--line-through c-gap-right-xsmall">{{ price.old }}</text>
                        <text class="c-color-gray c-font-normal">{{ price.mode }}</text>
                    </view>
                </template>
                <view
                    v-if="currentDay.list && currentDay.list.length"
                    class="appointlist-hospital-calendar__popup__filter"
                >
                    <view
                        v-for="(filter, filterIndex) in currentDay.list"
                        :key="filterIndex"
                        :style="{
                            width: currentDay.list.length > 2 ? 'calc((100% - 20px) / 3)' : 'calc((100% - 10px) / 2)',
                        }"
                        :class="{
                            'appointlist-hospital-calendar__popup__filter__item': true,
                            'appointlist-hospital-calendar__popup__filter__item--selected': currentTime.time === filter.time,
                        }"
                        @tap="handlePopupFilterTap(filterIndex)"
                    >
                        {{ filter.time }}
                    </view>
                </view>
                <view v-if="currentTime.tips && currentTime.tips.length" class="appointlist-hospital-calendar__popup__tips">
                    <rich-text
                        v-for="(tip, tipIndex) in currentTime.tips"
                        :key="tipIndex"
                        :nodes="tip"
                        class="appointlist-hospital-calendar__popup__tip c-color-gray"
                    />
                </view>
                <view
                    v-if="currentTime.btnText"
                    class="appointlist-hospital-calendar__popup__button c-gap-top-ll swan-security-margin-bottom"
                    @tap="handleButtonTab"
                >
                    {{ currentTime.btnText }}
                </view>
            </view>
        </c-popup>
    </view>
</template>

<script>
/**
 * @file 医院挂号日历
 * @author 颜廷熙
 * @categories 业务组件
 * @tags [component]
 */

import CTabs from '@baidu/med-ui/components/Tabs/Tabs';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import {Mars as MarsUtils} from '@baidu/med-utils';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        /**
         * 医院数据
         */
        appoint: {
            type: Object,
            default: () => ({})
        },

        /**
         * 医院名称
         */
        hospitalName: String,

        /**
         * 医生
         */
        doctor: String
    },
    data() {
        return {
            currentTabIndex: 0,
            spread: true,
            showPopup: false,
            currentDay: null,
            currentTime: null
        };
    },
    watch: {
        currentTime(data) {
            if (data && data.tips) {
                data.tips = data.tips.map(html => html.replace(/<em>/img, '<em class="em" style="color: #FF6F61;font-style: normal;">'));
            }
        }
    },
    filters: {
        tabsFilter(tabs) {
            return tabs.map(tab => (tab.text = tab.name, tab));
        }
    },
    computed: {
        groups() {
            let list = this.appoint.dategroup[this.currentTabIndex].content;
            if (list && list.length >= 5 && list[5] !== 'all') {
                list.splice(5, 0, 'all');
            }
            if (this.spread) {
                list = list.slice(0, 6);
            }
            return list || [];
        }
    },
    components: {
        CIcon,
        CTabs,
        CPopup
    },
    methods: {
        onChangeSpread() {
            this.spread = !this.spread;
        },
        handleTabsTap({index}) {
            this.currentTabIndex = index;
        },
        handleDayTap(day) {
            if (day.status !== '1') {
                return;
            }
            this.showPopup = true;
            this.currentDay = day;
            this.currentTime = day.list[0];
        },
        hanldeClosePopup() {
            this.showPopup = false;
            this.currentDay = null;
        },
        handlePopupFilterTap(index) {
            this.currentTime = this.currentDay.list[index];
        },
        handleButtonTab() {
            if (this.currentTime && (this.currentTime.url || this.currentTime.outerLink)) {
                const params = {
                    url: this.currentTime.url,
                    urlType: this.currentTime.urlType,
                    extra: {
                        mod: 'appoint-calendar-button'
                    }
                };

                if (this.currentTime.outerLink) {
                    params.url = this.currentTime.outerLink;
                    params.urlType = '2';
                }
                MarsUtils.navigate(params);
            }
        }
    }
};
</script>
<style lang="less" scoped>
.appointlist-hospital-calendar {
    &--xgap {
        margin-top: .03rem;
    }
    &__header {
        display: flex;
        justify-content: space-between;
        height: .24rem;
        align-items: center;

        &__department {
            display: flex;
            align-items: center;
            &::before {
                content: '';
                display: inline-block;
                height: .15rem;
                width: .03rem;
                background: #00C8C8;
                border-radius: .01rem;
                margin-right: .09rem;
            }
        }

        &__tabs {
            width: 46.19%;
            margin-bottom: .05rem;
        }
    }

    &__detail {
        display: flex;
        flex-wrap: wrap;

        &__day {
            padding: 7px 0;
            width: calc((100vw - 20px) / 6);
            text-align: center;
            position: relative;
            font-size: .13rem;
            color: #999;
            line-height: .19rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: perspective(1000);

            &::before {
                content: '';
                display: block;
                width: 1px;
                height: .27rem;
                background: #F6F6F6;
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
            }

            &:nth-child(6n + 1) {
                &::before {
                    display: none;
                }
            }

            &--1 {
                color: #00C8C8;
            }

            &__all {
                &__icon {
                    width: .1rem;
                    height: .1rem;
                    background-image: url(https://med-fe.cdn.bcebos.com/gh/down.png);
                    background-size: 100%;
                    background-repeat: no-repeat;
                    background-position: center;
                    margin-left: 50%;
                    margin-top: 3px;
                    transform-origin: center center;
                    transform-style: preserve-3d;
                    transform: translateX(-50%) rotateX(180deg);

                    &--up {
                        transform: translateX(-50%) rotateX(180deg);
                    }

                    &--down {
                        transform: translateX(-50%) rotateX(0);
                    }
                }
            }
        }
    }

    &__popup {
        &__title {
            display: flex;
            justify-content: space-between;
        }
        &__close {
            font-weight: 400;
        }
        &__filter {
            display: flex;
            justify-content: space-between;
            margin: .25rem 0 .22rem;

            &__item {
                height: .7rem;
                line-height: .7rem;
                background: #F6F6F6;
                border-radius: .04rem;
                text-align: center;
                font-size: .17rem;
                font-weight: 500;
                color: #555;
                width: calc((100% - 10px) / 2);
                flex: 0 0 auto;

                &--selected {
                    background: #E5FAF8;
                    color: #00C8C8;
                    font-weight: 700;
                }
            }
        }
        &__button {
            background-image: linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
            box-shadow: 0 3px 7px 0 rgba(0, 200, 200, .30);
            border-radius: .22rem;
            height: .44rem;
            line-height: .44rem;
            text-align: center;
            font-size: .16rem;
            font-weight: 500;
            color: #FFF;
        }

        &__tips {
            min-height: .67rem;
        }
    }

    &--line-through {
        text-decoration: line-through;
    }
}

</style>

<style lang="less">
.appointlist-hospital-calendar__popup__tip {
    display: block;
    position: relative;
    padding-left: .1rem;
    &::before {
        content: '*';
        color: #FF6F61;
        vertical-align: middle;
        position: absolute;
        left: 0;
        top: .02rem;
    }
    .em,
    em {
        color: #FF6F61;
        font-style: normal;
    }
}
</style>
