<template>
    <view>
        <!-- pages/oneselfCenter/page/schedulingHandle/schedulingRange.wxml -->
        <nav-bar :navbarData="navbarData"></nav-bar>
        <view class="scheduling-wrapper" :style="'margin-top: ' + (height * 2 + 10) + 'rpx; height: calc(100vh - ' + (height * 2 + 10) + 'rpx)'">
            <view class="scheduling-content" :style="'top: ' + (height * 2 - 2) + 'rpx;'">
                <view class="picker-border">
                    <picker @change="bindSchedulingTypeChange" :value="schedulingTypeIndex" :range="schedulingTypeArr" range-key="descripts">
                        <mp-cell link hover value="号别" :footer="schedulingTypeArr[schedulingTypeIndex].descripts"></mp-cell>
                    </picker>
                </view>
                <view class="picker-border">
                    <picker @change="timeRangeChange" :value="timeRangeIndex" :range="timeRange" range-key="descripts">
                        <mp-cell link hover value="时段" :footer="timeRange[timeRangeIndex].descripts"></mp-cell>
                    </picker>
                </view>
                <view class="picker-border">
                    <picker @change="bindTimeChange" :value="timeIndex" :range="timeArr" range-key="descripts">
                        <mp-cell link hover value="时段间隔(分钟)" :footer="timeArr[timeIndex].descripts"></mp-cell>
                    </picker>
                </view>
                <view class="picker-times">
                    <mp-cell value="时段明细"></mp-cell>
                </view>
                <view class="picker-border" v-for="(item, index) in timeDetailArr" :key="index">
                    <view class="picker-border">
                        <mp-cell :value="item.timeDatail"></mp-cell>
                    </view>

                    <mp-cell title="号源设置">
                        <view class="rightStyle">
                            <view class="rightLable">输入号源</view>
                            <input type="number" class="rightInput" @input="formInputChange" placeholder="请输入" :value="item.registNum" :data-index="index" :data-item="item" />
                        </view>
                    </mp-cell>
                </view>
            </view>

            <button class="handle-btn" @tap="addScheduling" :disabled="saveflag">{{ saveflag && saveflag ? '保存中' : '保存排班' }}</button>
        </view>
    </view>
</template>

<script>
import Cache from '../../../../utils/cache';
import navBar from '@/pages/components/navbar/index';
// pages/oneselfCenter/page/schedulingHandle/schedulingRange.js
import { $http } from '../../../../config/https.js';
const app = getApp();
export default {
    components: {
        navBar
    },
    data() {
        return {
            // 查看的日期
            lookDate: '',

            resourceTypeID: '',
            timeRange: [],

            // 上下午时段ID
            timeRangeIndex: 0,

            // 时段间隔ID
            timeIntervalID: '',

            // 排班类型
            schedulingTypeArr: [],

            schedulingTypeIndex: 0,

            // 时段间隔
            timeArr: [],

            timeIndex: 0,

            // 时段明细列表
            timeDetailArr: [],

            timeDetailTypeIndex: {},
            stDate: '',
            endDate: '',

            navbarData: {
                background: '',
                title: '排班',
                //导航栏 中间的标题
                height: '100',
                bottom: true,
                isGoBack: true,
                titleAlign: 'left',
                saveflag: false
            },

            height: app.globalData.height,
            timeRangeID: '',
            saveflag: false,
            descripts: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let { navbarData } = this;
        navbarData.title = '排班 ' + options.stDate + '—' + options.endDate;
        this.setData(
            {
                navbarData,
                resourceTypeID: options.resourceTypeID,
                stDate: options.stDate,
                endDate: options.endDate
            },
            () => {
                this.getTimeRange();
                this.getSchedulingType();
            }
        );
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        bindSchedulingTypeChange: function (e) {
            this.setData({
                schedulingTypeIndex: e.detail.value
            });
        },

        timeRangeChange: function (e) {
            console.log(e);
            this.setData(
                {
                    timeRangeIndex: e.detail.value,
                    timeRangeID: this.timeRange[e.detail.value].id
                },
                () => {
                    this.getTimeInterval(this.timeRange[e.detail.value].id);
                }
            );
        },

        // 排班类型
        getSchedulingType: function () {
            let userData = Cache.get('userData');
            let { userID, groupID, locID, hospID } = userData;
            let data = {
                params: [
                    {
                        userID: userID,
                        groupID: groupID,
                        locID: locID,
                        hospID: hospID,
                        resTypeID: this.resourceTypeID
                    }
                ]
            };
            $http.post('urlDeault', this, {
                code: '03100130',
                data: data,
                success: function (res) {
                    if (res.errorCode == '0') {
                        this.setData({
                            schedulingTypeArr: res.result.Data
                        });
                    }
                }
            });
        },

        // 获取时段
        getTimeRange: function () {
            let data = {
                params: [{}]
            };
            $http.post('urlDeault', this, {
                code: '01040010',
                data: data,
                success: function (res) {
                    if (res.errorCode == '0') {
                        this.setData(
                            {
                                timeRange: res.timeRange,
                                timeRangeID: res.timeRange[0].id
                            },
                            () => {
                                if (res.timeRange.length > 0) {
                                    this.getTimeInterval(res.timeRange[0].id);
                                } else {
                                    uni.showToast({
                                        title: '未维护排班时段',
                                        icon: 'none'
                                    });
                                }
                            }
                        );
                    }
                }
            });
        },

        // 时段间隔
        getTimeInterval: function (timeRangeID) {
            let data = {
                params: [
                    {
                        timeRangeID: timeRangeID
                    }
                ]
            };
            $http.post('urlDeault', this, {
                code: '03100055',
                data: data,
                success: function (res) {
                    if (res.errorCode == '0') {
                        if (res.result.length > 0) {
                            this.setData(
                                {
                                    timeArr: res.result,
                                    timeIntervalID: res.result[0].id
                                },
                                () => {
                                    this.getTimeDetails();
                                }
                            );
                        }
                    }
                }
            });
        },

        // 时段明细
        getTimeDetails: function () {
            let userData = Cache.get('userData');
            let { userID, locID, hospID } = userData;
            let data = {
                params: [
                    {
                        userID: userID,
                        locID: locID,
                        hospID: hospID,
                        timeRangeID: this.timeRangeID,
                        timeIntervalID: this.timeIntervalID,
                        resModelID: ''
                    }
                ]
            };
            $http.post('urlDeault', this, {
                code: '03100064',
                data: data,
                success: function (res) {
                    if (res.errorCode == '0') {
                        this.setData({
                            timeDetailArr: res.result
                        });
                    }
                }
            });
        },

        // 新增排班
        addScheduling: function () {
            let that = this;
            if (that.saveflag == true) {
                throw SyntaxError();
            }
            that.setData({
                saveflag: true
            }); //请求前禁用标记改为true,防止重复请求
            let userData = Cache.get('userData');
            let { userID, locID, hospID } = userData;
            let resTimes = this.timeDetailArr
                // .filter(data=>{
                //   if(data.registNum !== ""){
                //     return data;
                //   }
                // })
                .map((data) => {
                    let mark = data.registNum;
                    if (mark == '') {
                        mark = 0;
                    }
                    return {
                        timeDetailID: data.timeDetailID,
                        registNum: mark
                    };
                });
            // let resTimes = this.data.timeDetailArr
            let { stDate, endDate } = this;
            let data = {
                params: [
                    {
                        userID: userID,
                        locID: locID,
                        hospID: hospID,
                        regTitleID: this.getRegTitleId(),
                        resourceTypeID: this.resourceTypeID,
                        timeRangeID: this.timeRangeID,
                        timeIntervalID: this.timeIntervalID,
                        roomID: '',
                        registNum: '',
                        addNum: '',
                        resTime: resTimes,
                        stDate: stDate.substring(0, 4) + '-' + stDate.substring(4, 6) + '-' + stDate.substring(6, 8),
                        endDate: endDate.substring(0, 4) + '-' + endDate.substring(4, 6) + '-' + endDate.substring(6, 8)
                    }
                ]
            };
            $http.post('urlDeault', this, {
                code: '03100135',
                data: data,
                success: function (res) {
                    if (res.errorCode == '0') {
                        uni.navigateBack({});
                    }
                    setTimeout(() => {
                        that.setData({
                            saveflag: false
                        }); //请求成功禁用标记改回false
                    }, 1000);
                },
                fail: function () {
                    setTimeout(() => {
                        that.setData({
                            saveflag: false
                        }); //请求虽然失败,禁用标记也改回false
                    }, 1000);
                }
            });
        },

        // 编辑排班
        editScheduling: function () {},

        // 获取职称ID
        getRegTitleId: function () {
            let array = this.schedulingTypeArr;
            if (array.length > 0) {
                return array[this.schedulingTypeIndex].id;
            }
        },

        bindTimeChange: function (e) {
            if (this.timeIndex !== e.detail.value) {
                let item = this.timeArr[e.detail.value];
                this.setData(
                    {
                        timeIndex: e.detail.value,
                        timeIntervalID: item.id
                    },
                    () => {
                        this.getTimeDetails();
                    }
                );
            }
        },

        formInputChange: function (e) {
            let { index } = e.target.dataset;
            this.timeDetailArr[index].registNum = e.detail.value;
            this.setData({
                timeDetailArr: this.timeDetailArr
            });
        }
    }
};
</script>
<style>
/* pages/oneselfCenter/page/schedulingHandle/schedulingHandle.wxss */
.scheduling-wrapper {
    width: 100%;
    height: 100%;
}
.scheduling-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 100rpx;
    overflow: auto;
    background-color: #ffffff;
}
.picker-border {
    border-bottom: 1px solid var(--weui-FG-3);
}
.detail-input .weui-cell > .weui-cell__bd {
    text-align: right;
}

.handle-btn {
    background-color: #0079fe;
    color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    line-height: 100rpx;
}
.picker-times .weui-cell {
    color: #333333;
    font-weight: bold;
    height: 100rpx;
    background-color: #f5f4f4;
    line-height: 100rpx;
    margin: 0;
    padding: 0 16px;
}
button {
    border-radius: initial;
}
.rightStyle {
    display: flex;
    justify-content: center;
    align-items: center;
}
.rightLable {
    flex: 1;
    text-align: right;
    margin-right: 5px;
}
.rightInput {
    border: 1px solid #eee;
    width: 60px;
    border-radius: 5px;
    text-align: center;
}
</style>
