<template>
    <view class="calendar-item__weeks-box main-center cross-center" :style="[selectStyle]" @click="choiceDate(weeks)">
        <view class="calendar-item__weeks-box-item dir-top-nowrap main-center cross-center">
            <text v-if="weeks.isDay" :style="{color: (!weeks.disable && !weeks.beforeMultiple && weeks.fullDate != calendar.fullDate) ? selectColor: 'inherit'}">
                今天
            </text>
            <text v-else>{{ weeks.date }}</text>
            <text v-if="weeks.beforeMultiple" class="calendar-item__s">开始</text>
            <text v-if="weeks.afterMultiple" class="calendar-item__s">结束</text>
            <!-- 悬浮框 -->
            <view v-if="weeks.beforeMultiple && !weeks.afterTime"
                  class="place__fixed">
                <view class="t-omit"></view>
                <text>{{ endTitle }}</text>
            </view>
            <view v-if="weeks.afterMultiple" class="place__fixed">
                <view class="t-omit"></view>
                <text>共{{ hasKuatian == 1 ? weeks.dayNum - 1 : weeks.dayNum }}{{placeUnit}}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        activeColor: String,
        noactiveColor: String,
        selectColor: String,
        hasKuatian: [String,Number],
        placeUnit: String,
        endTitle: String,
        range: {
            type: Boolean,
            default: false
        },

        weeks: {
            type: Object,
            default() {
                return {}
            }
        },
        calendar: {
            type: Object,
            default: () => {
                return {}
            }
        },
    },
    data() {
        return {}
    },
    computed: {
        selectStyle() {
            let {
                weeks,
                noactiveColor,
                activeColor,
                range,
                selectColor,
                calendar,
            } = this;
            let style = {
                color: weeks.disable ? noactiveColor : activeColor
            };
            if (!weeks.fullDate) {
                return style;
            }
            if (range) {
                if (weeks.multiple) {
                    Object.assign(style, {
                        backgroundColor: this.$utils.colorRgba(selectColor, 0.15)
                    })
                }
                if (weeks.beforeMultiple) {
                    Object.assign(style, {
                        backgroundColor: selectColor,
                        borderRadius: `20rpx 0 0 20rpx`,
                        color: 'white',
                    })
                }
                if (weeks.afterMultiple) {
                    Object.assign(style, {
                        backgroundColor: selectColor,
                        borderRadius: `0 20rpx 20rpx 0`,
                        color: 'white',
                    })
                }
            } else {
                if (weeks.fullDate === calendar.fullDate) {
                    Object.assign(style, {
                        backgroundColor: selectColor,
                        borderRadius: '20rpx',
                        color: 'white',
                    })
                }
            }
            return style;
        },
    },
    methods: {
        choiceDate(weeks) {
            this.$emit('change', weeks)
        }
    }
}
</script>

<style lang="scss" scoped>
.calendar-item__weeks-box {
    flex: 1;
}

.calendar-item__s {
    font-size: 20#{rpx};
    color: #FFFFFF;
}

.calendar-item__weeks-box-item {
    position: relative;
    height: 84#{rpx};
    width: auto;
    font-size: 28#{rpx};
}

.place__fixed {
    background: #242424;
    opacity: 0.6;
    border-radius: 10#{rpx};
    position: absolute;
    font-size: 20#{rpx};
    color: #FFFFFF;
    padding: 10#{rpx} 18#{rpx};
    top: -70#{rpx};
    text-align: center;

    > text {
        white-space: nowrap;
    }

    > view {
        position: absolute;
        bottom: -20#{rpx};
        left: calc(50% - 6px);
        height: 20#{rpx};
        width: 12#{rpx};
        border-top: 12#{rpx} solid #242424;
        border-bottom: 10#{rpx} solid transparent;
        border-left: 10#{rpx} solid transparent;
        border-right: 10#{rpx} solid transparent;
    }
}
</style>
