<!-- 排班表 -->
<template>
    <view class="main" :style="{ paddingTop: (menu.bottom + 28) + 'px' }">
        <view class="summaryTab" :style="{ height: (menu.bottom + 14) + 'px' }">
            <view class="leftArrow" :style="{ top: (menu.top + ((menu.height - 24) / 2)) + 'px' }">
                <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"
                    @click="handleBack"></image>
                <view class="picker" :style="{ top: (menu.bottom + 24) + 'px' }" @click="handleChangeService">
                    <view class="selectService">
                        <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
                        <view class="select">
                            <view class="content">
                                <view class="uni-input">{{ serviceInfo.SERVERPART_NAME ? serviceInfo.SERVERPART_NAME :
                                    '' }}
                                </view>
                                <image class="rightArrow"
                                    src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>


        <view class="rosterContent">
            <view class="rosterContentTop">
                <view>
                    <picker>
                        {{ selectPerson || "-" }}
                    </picker>
                </view>


                <!-- 居中的日历时间 -->
                <!-- <view class="dateBox">
                    <view class="centerDateBox">
                        <image class="arrowIcon" src="https://eshangtech.com/cyy_DIB/leftArrowIcon.png"
                            @click="handleChangeDate(2)" />
                        <view class="center">
                            <text class="date-text">{{ selectDate ? $util.cutDate(new Date(selectDate), 'YYYY-MM') : ""
                            }}</text>
                        </view>
                        <image class="arrowIcon" src="https://eshangtech.com/cyy_DIB/rightArrowIcon.png"
                            @click="handleChangeDate(1)" />
                    </view>
                </view> -->
            </view>

            <view class="calendarBpx">
                <uni-calendar ref="calendar" class="selectDateCalendar" :insert="true" :startDate="info.startDate"
                    :selected="selectedList" />
            </view>

        </view>
    </view>
</template>

<script>
export default {
    data() {
        const nowDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD') // 有数据的最近日期
        return {
            menu: {},
            serviceInfo: {},
            selectDate: nowDay,// 选中的时间
            selectPerson: "张三",
            selectedList: [
                {
                    date: '2025-08-11',
                    info: "班",
                },
                {
                    date: '2025-08-12',
                    info: "班",
                    color: "#000"
                },
                {
                    date: '2025-08-13',
                    info: "班",
                },
                {
                    date: '2025-08-14',
                    info: "班",
                },
                {
                    date: '2025-08-15',
                    info: "班"
                },
                {
                    date: '2025-08-16',
                    info: "休",
                },
                {
                    date: '2025-08-17',
                    info: "休",
                },
                {
                    date: '2025-08-18',
                    info: "班",
                }
            ]
        }
    },
    onLoad() {
        this.menu = uni.getMenuButtonBoundingClientRect()
        let currentService = uni.getStorageSync('currentService')
        this.serviceInfo = currentService
    },
    methods: {
        // 修改日期
        async handleChangeDate(type) {
            //  type  1 加一天  2 减一天
            // 兼容 iOS，把 2025-08-15 转成 2025/08/15
            const cur = new Date((this.selectDate || '').replace(/-/g, '/'));
            if (Number.isNaN(cur.getTime())) return;

            // 1：加一月；2：减一月；其他：不变
            const delta = type === 1 ? 1 : (type === 2 ? -1 : 0);

            // 目标月份的最后一天：new Date(年, 目标月+1, 0)
            const last = new Date(cur.getFullYear(), cur.getMonth() + delta + 1, 0);

            const y = last.getFullYear();
            const m = String(last.getMonth() + 1).padStart(2, '0');
            const d = String(last.getDate()).padStart(2, '0');

            this.selectDate = `${y}-${m}-${d}`;
        },
    }
}
</script>


<style lang="less" scoped>
@bg: #f8f9fa;
@muted: #666;
@card: #fff;
@shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@primary: #27B25F;
@primary2: #4CCC7F;
@ok: #2ed573;
@warn: #ff9f43;
@danger: #ff4757;


.main {
    width: 100vw;
    min-height: 100vh;
    background-color: #f0f2f3;
    box-sizing: border-box;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    padding: 16rpx 32rpx 0;

    .summaryTab {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        // background: #fff;
        background-image: url("https://eshangtech.com/minTestImg/pageBg.png");
        z-index: 99;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-bottom: 16px;

        .leftArrow {
            width: 100%;
            height: 24px;
            position: absolute;
            // left: 16px;
            z-index: 99999999999;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            padding: 0 32rpx;

            .img {
                width: 24px;
                height: 24px;
                margin-right: 8px;
                z-index: 99;
            }

            .picker {
                .selectService {
                    display: flex;
                    align-items: center;

                    .img {
                        width: 40px;
                        height: 40px;
                        z-index: 2;
                    }

                    .select {
                        height: 32px;
                        background: #fff;
                        border-radius: 0 16px 16px 0;
                        transform: translateX(-40px);
                        box-sizing: border-box;
                        padding-left: 35px;
                        padding-right: 8rpx;
                        display: flex;
                        align-items: center;

                        .content {
                            display: flex;
                            align-items: center;

                            .uni-input {
                                padding: 0;
                                background: transparent;
                                font-size: 28rpx;
                                font-family: PingFangSC-Semibold, PingFang SC;
                                font-weight: 600;
                                color: #160002;
                            }

                            .area {
                                font-size: 12px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #786B6C;
                                line-height: 40px;
                                margin-left: 4px;
                            }

                            .rightArrow {
                                width: 12px;
                                height: 12px;
                            }

                            .noticeText {
                                font-size: 24rpx;
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                color: #B6BACB;
                                line-height: 40rpx;
                                white-space: nowrap;
                            }
                        }

                    }
                }
            }
        }
    }

    .rosterContent {
        width: 100%;
        background-color: #fff;
        box-sizing: border-box;
        padding: 0 24rpx;
        border-radius: 8rpx;

        .rosterContentTop {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .dateBox {
                box-sizing: border-box;
                padding: 16rpx 0;
                display: flex;
                align-items: center;
                justify-content: center;

                .centerDateBox {
                    display: flex;
                    align-items: center;
                    gap: 10rpx;
                    padding: 10rpx 20rpx;
                    border-radius: 30rpx;
                    background-color: #fff;
                    // border: 2rpx solid #27B35F;
                    // background: rgba(255, 255, 255, .15);

                    .arrowIcon {
                        width: 40rpx;
                        height: 40rpx;
                    }

                    .center {
                        .date-text {
                            font-size: 28rpx;
                            font-weight: 700;
                        }
                    }

                }
            }
        }

        .calendarBpx {
            /deep/ .uni-calendar-item__weeks-box-item {
                width: calc(100% / 7);

                .uni-calendar-item__weeks-box-circle {
                    display: none;
                }
            }

            /deep/ .uni-calendar-item--checked {
                background-color: transparent;
                color: #000 !important;
                opacity: 1 !important;
            }

            /deep/ .uni-calendar-item--isDay {
                background-color: transparent;
                color: #000 !important;
                opacity: 1 !important;
            }

            /deep/ .uni-calendar-item--isDay-text {
                white-space: nowrap;
                color: #000;
            }

            /deep/ .uni-calendar__backtoday {
                display: none;
            }

            /* === info 文字颜色控制 === */
            .selectDateCalendar ::v-deep .uni-calendar__info {
                color: #000 !important;
                /* 默认黑色 */
            }

            /* 如果 info 等于“休”，文字改为红色 */
            .selectDateCalendar ::v-deep .uni-calendar__info[title="休"],
            .selectDateCalendar ::v-deep .uni-calendar__info[data-info="休"] {
                color: red !important;
            }
        }



    }
}
</style>
