<template>
    <!-- <view class="scheduling-wrapper"> -->
    <view class="scheduling-content">
        <view class="picker-border">
            <!-- <picker bindchange="bindSchedulingTypeChange" value="{{schedulingTypeIndex}}" range="{{schedulingTypeArr}}" range-key="descripts">
				<mp-cell link hover value="号别" footer="{{schedulingTypeArr[schedulingTypeIndex].descripts}}"></mp-cell>
            </picker> -->
            <mp-cell link hover value="号别" :footer="resourceTypeDesc"></mp-cell>
        </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>
    <!-- </view> -->
</template>

<script>
import Cache from '../../../../utils/cache';
// pages/oneselfCenter/components/schedulingDetail/schedulingDetail.js
import { $http } from '../../../../config/https.js';
const app = getApp();
export default {
    components: {},
    data() {
        return {
            timeRange: {},
            activeNames: ['1'],

            // 查看的日期
            lookDate: '',

            resourceTypeID: '',

            // 上下午时段ID
            timeRangeID: '',

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

            // 排班类型
            schedulingTypeArr: [],

            schedulingTypeIndex: 0,

            // 时段间隔
            timeArr: [],

            timeIndex: 0,

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

            timeDetailTypeIndex: {},
            saveflag: false,
            descripts: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        timeRange: {
            type: Object,
            default: () => ({}),
            observers: function (newVal, oldVal) {
                this.timeRange = newVal;
            }
        },
        resourceTypeID: {
            type: String,
            default: ''
        },
        resourceTypeDesc: {
            type: String,
            default: ''
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        // 组件所在页面的生命周期函数
        handlePageShow: function () {},

        handlePageHide: function () {},
        handlePageResize: function () {},

        // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
        ready: function (options) {
            // console.log('this.properties.timeRange:',this.properties.timeRange)
            this.setData(
                {
                    timeRangeID: this.timeRange.id
                },
                () => {
                    this.getTimeInterval(this.timeRange.id);
                }
            );
        },

        // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
        attached: function () {},

        onChange(event) {
            this.setData({
                activeNames: event.detail
            });
        },

        // 时段间隔
        getTimeInterval(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.$emit('getTimeRange', {
                                        detail: {
                                            timeIntervalID: res.result[0].id,
                                            timeRangeID
                                        }
                                    });
                                    this.getTimeDetails();
                                }
                            );
                        }
                    }
                }
            });
        },

        // 时段明细
        getTimeDetails() {
            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') {
                        let timeDetailArr = [];
                        res.result.forEach((item, index) => {
                            item.timeRangeID = this.timeRangeID;
                            item.timeIntervalID = this.timeIntervalID;
                        });
                        this.setData({
                            timeDetailArr: res.result
                        });
                    }
                }
            });
        },

        //输入时段
        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
                    },
                    () => {
                        let { timeIndex, timeIntervalID } = this;
                        let timeRangeID = this.timeRange.id;
                        this.$emit('getTimeRange', {
                            detail: {
                                timeIndex,
                                timeIntervalID,
                                timeRangeID
                            }
                        });
                        this.getTimeDetails();
                    }
                );
            }
        },

        /**输入分时段号源设置 */
        formInputChange: function (e) {
            let { index } = e.target.dataset;
            this.timeDetailArr[index].registNum = e.detail.value;
            this.setData(
                {
                    timeDetailArr: this.timeDetailArr
                },
                () => {
                    this.$emit('getResourceTime', {
                        detail: this.timeDetailArr
                    });
                }
            );
        },

        // 获取职称ID
        getRegTitleId: function () {
            let array = this.schedulingTypeArr;
            if (array.length > 0) {
                return array[this.schedulingTypeIndex].id;
            }
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    moved: function () {},
    destroyed: function () {},
    created: function () {}
};
</script>
<style>
/* pages/oneselfCenter/page/schedulingHandle/schedulingHandle.wxss */
page {
    width: 100%;
    height: 100%;
}
.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>
