<template>
    <view class="body">
        <view class="body_content">
            <view class="reservation_con">
                <radio-group @change="radioChange" class="radio_group d_flex a_center">
                    <label class="label d_flex a_center" v-for="(item, index) in items" :key="item.name">
                        <view>
                            <radio :value="index" :checked="index==current" />
                        </view>
                        <view>{{item.name}}</view>
                    </label>
                </radio-group>
                <view class="reservation_input d_flex j_between a_center">
                    <view class="left">姓名</view>
                    <view class="right"><input class="input" type="text" placeholder="请输入姓名" v-model="name" /></view>
                </view>
                <view class="reservation_input d_flex j_between a_center" v-if="neddPhone"> 
                    <view class="left">联系方式</view>
                    <view class="right"><input class="input" type="number" placeholder="请输入联系方式" v-model="phone" /></view>
                </view>
                <view class="reservation_input d_flex j_between a_center" v-if="neddCard">
                    <view class="left">身份证</view>
                    <view class="right"><input class="input" type="idcard" placeholder="请输入身份证" v-model="yycard" /></view>
                </view>
                <view v-if="current==1" class="reservation_input d_flex j_between a_center">
                    <view class="left">团队人数</view>
                    <view class="right"><input class="input" type="number" placeholder="请输入团队人数" v-model="num" /></view>
                </view>
                <radio-group v-if="current==1" @change="radioChange2" class="radio_group d_flex a_center">
                   <view class="mr_30">是否需要讲解</view>
                    <label class="label d_flex a_center" v-for="(item, index) in items2" :key="item.name">
                        <view>
                            <radio :value="item.value" :checked="item.value==current2" />
                        </view>
                        <view>{{item.name}}</view>
                    </label>
                </radio-group>
                <view v-if="current==1" class="reservation_input reservation_input2">
                    <view class="left">其他需求</view>
                    <view class="right">
                        <textarea class="input" type="text" placeholder="请输入预约留言" v-model="content"></textarea>
                    </view>
                </view>
            </view>
            <scroll-view scroll-x="true" class="reservation_tab">
                <view class="reservation_tab_nav" v-for="(item, index) in tabs" :key="index" :class="tabIndex == index ? 'on' : ''" @click="tabClick(index)">
                    <view class="reservation_tab_week" v-text="item.week"></view>
                    <view class="reservation_tab_title" v-text="item.title"></view>
                </view>
            </scroll-view>
            <view class="reservation_time" v-show="current==0">
                <view v-if="timeTitles.length > 0" class="reservation_time_nav" v-for="(item, index) in timeTitles" :key="index" @click="timeClick(index)">
                    <view class="title">预约时段：{{item.title}}</view>
                    <view class="subtitle">预约进度：<text class="num_box">{{item.currentNum}}/{{item.maxnum}}</text></view>
                    <view class="yy_btn" @click="subMitData(index)">点击预约</view>
                </view>
                <view v-if="timeTitles.length == 0" class="reservation_time_txt">~ 暂无预约时间 ~</view>
            </view>
            <view class="reservation_con reservation_con2" v-show="current==1">
                <view class="reservation_input font_32 d_flex j_between a_center" @click="startClick">
                    <view class="left">开始时间</view>
                    <view class="right">
                        <text v-if="startDate" v-text="startDate"></text>
                        <text v-else class="color_999">请选择</text>
                    </view>
                </view>
                <view class="reservation_input font_32 d_flex j_between a_center" @click="endClick">
                    <view class="left">结束时间</view>
                    <view class="right">
                        <text v-if="endDate" v-text="endDate"></text>
                        <text v-else class="color_999">请选择</text>
                    </view>
                </view>
            </view>
            <view v-show="current==1" class="yy_btn2" @click="subMitData2">点击预约</view>
        </view>
        <w-picker
            :visible.sync="visible1"
            mode="time" 
            :startYear="year"
            :endYear="year2"
            :value="startDate"
            :current="false"
            fields="minute"
            :second="false" 
            @confirm="onConfirm($event,'date')"
            @cancel="onCancel"
            :disabled-after="false"
            ref="date1" 
        ></w-picker>
        <w-picker
            :visible.sync="visible2"
            mode="time" 
            :startYear="year" 
            :endYear="year2"
            :value="endDate"
            :current="false"
            fields="minute" 
            :second="false" 
            @confirm="onConfirm2($event,'date1')"
            @cancel="onCancel2"
            :disabled-after="false"
            ref="date2" 
        ></w-picker>
    </view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import wPicker from "@/components/w-picker/w-picker.vue";
export default {
    mixins: [MescrollMixin],
    components: {
        wPicker
    },
    data() {
        return {
            year:new Date().getFullYear(),
            year2:new Date().getFullYear(),
            startDate:"",
            endDate:"",
            visible1:false,
            visible2:false,
            mescroll: null,
            downOption: {
                use: false, //是否启用下拉刷新
                auto: false //是否自动加载
            },
            upOption: {
                use: false, //是否启用上拉加载更多
                auto: false //是否自动加载
            },
            id: '',
            tabs:[],
            tabIndex: 0,
            subIndex:null,
            timeTitles: [],
            name: '',
            phone: '',
            yycard:"",
            neddCard:0,
            neddPhone:0,
            items: [{
                    name: '个人'
                },
                {
                    name: '团队'
                }
            ],
            current: 0,
            items2: [{
                    name: '是',
                    value:1
                },
                {
                    name: '否',
                    value:0
                }
            ],
            current2: 0,
            num:"",
            content:""
            
        };
    },
    onLoad(options) {
        let that = this;
        that.id = options.id;
        that.getDetail();
    },
    onReady() {},
    onShow() {
        
    },
    methods: {
        startClick(e){
            this.$refs.date1.show()
        },
        endClick(e){
            this.$refs.date2.show()
        },
        onConfirm(e){
            console.log(e);
            this.startDate = e.value;
        },
        onCancel(e){
            
        },
        onConfirm2(e){
            console.log(e);
            this.endDate = e.value;
        },
        onCancel2(e){
            
        },
        radioChange: function(e) {
            this.current = e.detail.value;
        },
        radioChange2: function(e) {
            this.current2 = e.detail.value;
        },
        getDetail(){
            let that = this;
            that.$doPost('Server.aspx', {
                mod:'getCSinfo',
                cgid:that.id
            })
            .then(res => {
                if (res.data.resultcode != 0) {
                    that.$util.showToast(res.data.msg);
                    return;
                }
                let body = res.data.data;
                that.neddCard = body.neddCard;
                that.neddPhone = body.neddPhone;
                that.getMenus();
            })
            .catch(err => {
                console.log('request fail', err);
            });
        },
        subMitData(index){
            let that = this;
            let subIndex = index;
            let timeTitles = that.timeTitles;
            if(!that.name){
                that.$util.showToast("请输入姓名");
                return;
            }
            if(that.neddPhone){
                if(!that.phone){
                    that.$util.showToast("请输入联系方式");
                    return;
                }
                if(!that.$util.isPhone(that.phone)){
                    that.$util.showToast("联系方式格式错误");
                    return;
                }
            }
            if(that.neddCard){
                if(!that.yycard){
                    that.$util.showToast("请输入身份证");
                    return;
                };
                if(!that.$util.isCardNo(that.yycard)){
                    that.$util.showToast("请输入正确的身份证");
                    return;
                }
            }
            let data = {
                mod: 'addCSorder',
                stime:that.$util.strDateFormat(timeTitles[subIndex].stime,"yyyy-MM-dd hh:mm"),
                etime:that.$util.strDateFormat(timeTitles[subIndex].etime,"yyyy-MM-dd hh:mm"),
                listid:timeTitles[subIndex].ImgId,
                cgid:that.id,
                yyname:that.name
            }
            if(that.neddPhone){
                data.yyphone = that.phone;
            }
            if(that.neddCard){
                data.yycard = that.yycard;
            }
            that.$doPost('Server.aspx', data)
            .then(res => {
                if (res.data.resultcode != 0) {
                    that.$util.showToast(res.data.msg);
                    return;
                }
                uni.showModal({
                    title: '提示',
                    content: "预约成功",
                    showCancel:false,
                    success: function (res) {
                        uni.navigateBack();
                    }
                });
            })
            .catch(err => {
                console.log('request fail', err);
            });
        },
        subMitData2(index){
            let that = this;
            let tabs = that.tabs;
            let tabIndex = that.tabIndex;
            let startDate = that.startDate;
            let endDate = that.endDate;
            if(!that.name){
                that.$util.showToast("请输入姓名");
                return;
            }
            if(that.neddPhone){
                if(!that.phone){
                    that.$util.showToast("请输入联系方式");
                    return;
                }
                if(!that.$util.isPhone(that.phone)){
                    that.$util.showToast("联系方式格式错误");
                    return;
                }
            }
            if(that.neddCard){
                if(!that.yycard){
                    that.$util.showToast("请输入身份证");
                    return;
                };
                if(!that.$util.isCardNo(that.yycard)){
                    that.$util.showToast("请输入正确的身份证");
                    return;
                }
            }
            if(!that.num){
                that.$util.showToast("请输入团队人数");
                return;
            };
            if(!startDate){
                that.$util.showToast("请选择开始时间");
                return;
            };
            if(!endDate){
                that.$util.showToast("请选择结束时间");
                return;
            };
            startDate = that.tabs[tabIndex].time + " " + startDate;
            endDate = that.tabs[tabIndex].time + " " + endDate;
            if(that.$util.strToDate(startDate) <= new Date()){
                that.$util.showToast("开始时间不能小于等于当前时间");
                return;
            }
            if(that.$util.strToDate(endDate)<=that.$util.strToDate(startDate)){
                that.$util.showToast("结束时间不能小于等于开始时间");
                return;
            }
            let data = {
                mod: 'addCSorderTeam',
                stime:startDate,
                etime:endDate,
                cgid:that.id,
                yyname:that.name,
                yynum:that.num,
                yycontent:that.content,
                havejs:that.current2
            }
            if(that.neddPhone){
                data.yyphone = that.phone;
            }
            if(that.neddCard){
                data.yycard = that.yycard;
            }
            that.$doPost('Server.aspx', data)
            .then(res => {
                if (res.data.resultcode != 0) {
                    that.$util.showToast(res.data.msg);
                    return;
                }
                uni.showModal({
                    title: '提示',
                    content: "申请成功，请等待审核",
                    showCancel:false,
                    success: function (res) {
                        uni.navigateBack();
                    }
                });
            })
            .catch(err => {
                console.log('request fail', err);
            });
        },
        tabClick(index){
            if(this.tabIndex==index){
                return;
            }
            this.tabIndex = index;
            this.subIndex = null;
            this.getData();
        },
        timeClick(index) {
            let that = this;
            let timeTitles = that.timeTitles;
            if(timeTitles[index].expired){
                return;
            }
            that.subIndex = index;
        },
        getMenus(){
            let that = this;
            that.$doPost('Server.aspx', {
                mod: 'getcgordertime7',
                cgid: that.id
            })
            .then(res => {
                if (res.data.resultcode != 0) {
                    that.$util.showToast(res.data.msg);
                    return;
                }
                let body = res.data.data;
                body.filter(function(item,index){
                    item.title = that.$util.strToDate(item.time,"MM-dd");
                })
                that.tabs = body;
                that.getData();
            })
            .catch(err => {
                console.log('request fail', err);
            });
        },
        getData() {
            let that = this;
            that.$doPost('Server.aspx', {
                mod: 'getcgordertimelist',
                cgid: that.id,
                daytime:that.tabs[that.tabIndex].time
            })
            .then(res => {
                if (res.data.resultcode != 0) {
                    that.$util.showToast(res.data.msg);
                    return;
                }
                let body = res.data.data;
                body.filter(function(item,index){
                    if(item.synum<=0){
                        item.currentNum = 0;
                    }else{
                        item.currentNum = item.maxnum - item.synum;
                    }
                    item.title = that.$util.strDateFormat(item.stime,"hh:mm") + " - " + that.$util.strDateFormat(item.etime,"hh:mm");
                })
                that.timeTitles = body;
            })
            .catch(err => {
                console.log('request fail', err);
            });
        }
    }
};
</script>

<style lang="scss">
page,
.body {
    background: #f5f5f5;
}
.radio_group{
    border-bottom: 1upx solid #e5e5e5;
    padding-top: 30upx;
    padding-bottom:30upx;
    font-size: 32upx;
}
.radio_group .label{
    margin-right: 30upx;
}
.reservation_con {
    padding: 0 30upx;
    background: #fff;
    margin-top: 20upx;
}
.reservation_con2{
    margin-top: 0;
}
.reservation_input {
    height: 100upx;
    border-bottom: 1upx solid #e5e5e5;
    line-height: 100upx;
    color: #333333;
}
.reservation_input:last-child {
    border-bottom: none;
}
.reservation_input .left {
    height: 100%;
    font-size: 32upx;
}
.reservation_input .right {
    height: 100%;
    width: 70%;
    text-align: right;
}
.reservation_input .input {
    height: 100%;
    width: 100%;
    font-size: 32upx;
}
.reservation_tab {
    height: 140upx;
    border-bottom: 1upx solid #e5e5e5;
    white-space: nowrap;
    background: #fff;
    margin-top: 20upx;
}
.reservation_tab .reservation_tab_nav {
    display: inline-block;
    padding: 0 30upx;
    position: relative;
    text-align: center;
    height: 100%;
}
.reservation_tab .reservation_tab_nav::after {
    height: 27upx;
    background: #ccc;
    width: 2upx;
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.reservation_tab .reservation_tab_nav:last-child::after {
    height: 0;
    width: 0;
    content: initial;
}
.reservation_tab .reservation_tab_nav .reservation_tab_week {
    font-size: 28upx;
    color: #131313;
    padding-top: 34upx;
    padding-bottom: 10upx;
}
.reservation_tab .reservation_tab_nav .reservation_tab_title {
    font-size: 24upx;
    color: #c5c5c5;
}
.reservation_tab .reservation_tab_nav.on .reservation_tab_week {
    color: #ff570e;
}
.reservation_tab .reservation_tab_nav.on .reservation_tab_title {
    color: #ff570e;
}
.content_btn_con {
    padding-left: 80upx;
    padding-right: 80upx;
}
.main_content_btn {
    border-radius: 60upx;
    font-size: 36upx;
    font-weight: initial;
    height: 84upx;
    line-height: 84upx;
}
.reservation_time{
    width: 100%;
    overflow: hidden;
    background: #fff;
    margin-top: 20upx;
}
.reservation_time_txt{
    width: 100%;
    text-align: center;
    color:#999;
    font-size: 28upx;
    line-height: 140upx;
    height: 140upx;
}
.reservation_time_nav{
    border-bottom: 1upx solid #e5e5e5;
    font-size: 28upx;
    padding:30upx 30upx;
    position:relative;
}
.reservation_time_nav.on{
    color:#ff4c4c;
}
.reservation_time_nav.line{
    color:#c5c5c5;
}
.reservation_time_nav .title{
    margin-bottom: 10upx;
}
.reservation_time_nav .num_box{
    border:1upx solid $color_orange;
    padding: 0 10upx;
    border-radius: 20upx;
}
.yy_btn{
    position: absolute;
    background: $color_orange;
    width:160upx;
    height:66upx;
    line-height:66upx;
    text-align: center;
    color:#fff;
    font-size: 28upx;
    right: 30upx;
    top: 50%;
    border-radius: 40upx;
    transform: translateY(-50%);
}

.reservation_input2{
    height: auto;
    overflow: hidden;
    padding-bottom: 30upx;
}
.reservation_input2 .right{
    text-align: left;
    width: 100%;
}
.reservation_input2 .input{
    border: 1upx solid #e5e5e5;
    padding: 20upx;
    height: 200upx;
    box-sizing: border-box;
    line-height: 40upx;
}
.yy_btn2{
    background: $color_orange;
    height:88upx;
    line-height:88upx;
    text-align: center;
    color:#fff;
    font-size: 32upx;
    border-radius: 40upx;
    margin:30upx 30upx 50upx 30upx;
}

</style>
