<template>
  <div class="exam_contaniner">
    <div class="top_box">
        <div class="week-box" v-if="!isCal"> 
            <div class="week_box" style="display:flex">
                <div class="week_num" v-for="item in weekData" :key="item">{{item}}</div>
            </div>
            <div class="week_text">
                <div class="week_txt" v-for="item in weekArr" :key="item" @click="changeDate(item)" :class="[(item < today ? 'week_none' : ''),item == isToday ? 'today_week' : '',numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)) ? numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)).isNum == 0 ? 'isnum' : 'none' : '']">
                    <div class="top_info"></div>
                    {{item}}
                    <div class="bottom_info" v-text="numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)) ? numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)).isNum == 0 ? '有号' :'无号' : ''"></div>
                </div>
            </div>
        </div>
        <div v-if="isCal">
            <van-swipe class="my-swipe"  :stop-propagation="false">
                <van-swipe-item>
                    <van-calendar 
                        class="can_box" 
                        ref="calendar" 
                        first-day-of-week="1" 
                        v-model="show" 
                        @confirm="onConfirm" 
                        :poppable="false" 
                        :show-mark="false" 
                        :show-title="false" 
                        :show-subtitle="false" 
                        :show-confirm="false"
                        :min-date="minDate"
                        :max-date="maxDate"
                        :formatter="formatter"
                    />
                </van-swipe-item>
                <van-swipe-item>
                    <van-calendar 
                        class="can_box" 
                        ref="calendar1" 
                        first-day-of-week="1" 
                        v-model="show" 
                        @confirm="onConfirm1" 
                        :poppable="false" 
                        :show-mark="false" 
                        :show-title="false" 
                        :show-subtitle="false" 
                        :show-confirm="false"
                        :min-date="minDate1"
                        :max-date="maxDate1"
                    />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="pull_box" @click="isShow">
            <img v-show="!isCal" src="~@/assets/image/pull.png" alt="">
            <img v-show="isCal" src="~@/assets/image/up.png" alt="">
        </div>
    </div>
    <div class="center_box">
        <div class="exam_box" v-for="item in examData" :key="item.name">
            <div class="exam_top">
                <div class="top_left">
                    <div class="name_txt">{{item.name}}</div>
                    <div class="posi_txt">
                        <img style="width:0.24rem;height:0.24rem" src="~@/assets/image/posi.png" alt="">
                        <div style="color: #999;font-size: 0.24rem;">{{item.position}}</div>
                    </div>
                </div>
                <div class="top_right"><div style="font-size:0.3rem;color:#333">{{item.residue}}</div><div style="font-size:0.22rem;color:rgba(51, 51, 51,0.5)">/{{item.total}}</div>
                </div>
            </div>
            <div class="exam_bottom">
                <div class="exam_txt" v-for="item1 in item.examArr" :key="item1.time" @click="clickExam(item,item1)" :class="[(item1.num == 0 ? 'isAct' : ''),(item1.isSelect ? 'active' : '')]">
                    <div class="txt" style="font-size:0.22rem;color:#666;"><span style="font-size:0.24rem;color:#666">{{item1.moment}}</span> {{item1.time}}</div>
                    <div style="font-size:0.24rem;color:#333333;">剩余:{{item1.num}}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="btn_box">
        <van-button v-show="selectArr.length == 0" type="info" block disabled >预约</van-button>
        <van-button v-show="selectArr.length !== 0" type="info" block  @click="handleExam">预约</van-button>
    </div>
  </div>
</template>

<script>
export default {
    data() {    
        return {
            show:true,
            text:"下拉",
            isCal:false,
            radio:1,
            weekArr:[],
            weekData:['一','二','三','四','五','六','日'],
            minDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date(new Date().getFullYear(),new Date().getMonth() + 1,0).getDate()),
            minDate1: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1),
            maxDate1: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date(new Date().getFullYear(),new Date().getMonth() + 2,0).getDate()),
            numData:[{date:'2023-02-09',isNum:1},{date:'2023-02-11',isNum:0},
            {date:'2023-02-15',isNum:1},{date:'2023-02-20',isNum:0}],
            examData:[
                {name:'单眼视力',position:'门诊楼3楼眼科门诊',total:20,residue:15,examArr:[
                    {moment:'上午',time:'8:00-8:30',num:2},
                    {moment:'上午',time:'8:30-9:00',num:0},
                    {moment:'上午',time:'9:00-9:30',num:1},
                    {moment:'上午',time:'9:30-10:00',num:1},
                ]},
                {name:'肢体',position:'门诊楼3楼',total:20,residue:15,examArr:[
                    {moment:'上午',time:'8:00-8:30',num:2},
                    {moment:'上午',time:'8:30-9:00',num:0},
                    {moment:'上午',time:'9:00-9:30',num:1},
                    {moment:'上午',time:'9:30-10:00',num:1},
                ]},
                {name:'听力',position:'门诊楼3楼听力门诊',total:20,residue:15,examArr:[
                    {moment:'上午',time:'8:00-8:30',num:2},
                    {moment:'上午',time:'8:30-9:00',num:0},
                    {moment:'上午',time:'9:00-9:30',num:1},
                    {moment:'上午',time:'9:30-10:00',num:1},
                ]}
            ],
            selectArr:[],
            selectDate:'',
            today:'',
            isToday:''
        }
    },
    created() {
        this.getList()
    },
    mounted() {
        var WeekFirstDay=new Date(new Date()-(new Date().getDay()-1)*86400000); 
        this.today = new Date().getDate();
        this.isToday = this.today;
        let year = new Date().getFullYear();
        let month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
        this.selectDate = year + '-' + month + '-' + (this.today < 10 ? '0' + this.today : this.today);
        for(var i = WeekFirstDay.getDate();i<= parseInt(WeekFirstDay.getDate()) + 6;i++){
            this.weekArr.push(i)
        }
        var todayWeek = new Date().getDay();
        this.weekData.map((item,index) =>{
            if(index + 1 == todayWeek){
                // item = '今日'
                this.weekData[index] = '今日'
            }
        })
    },
    methods: {
        getList(){
            this.examData.map(item =>{
                item.examArr.map(item1 =>{
                    item1.isSelect = false
                })
            })
            console.log(this.examData)
        },
        formatter(day){
            /*
                这里的参数包含以下属性
                bottomInfo: undefined
                date: Sat May 22 2021 00:00:00 GMT+0800 (中国标准时间) {}
                text: 22
                type: "

                我们只需要修改type值为 disabled 即可
            */
            if(day.date.getDate() < new Date().getDate()){
                day.type = 'disabled'
            }else{
                this.numData.forEach(item =>{
                    if(day.date.getDate() == item.date.slice(-2)){
                        item.isNum == 0 ? day.bottomInfo  = '有号' : day.bottomInfo  = '无号'
                        item.isNum == 0 ? day.className  = 'num1' : day.className  = 'num2'
                        
                    }
                })
            }
            // if(day.date.getDate() == new Date().getDate()){
                day.topInfo = ` `
                // day.className = 'today'
                
            // }
            return day
        },
        changeDate(item){
            console.log(item)
            this.isToday = item
        },
        isShow(){
            console.log(111)
            this.isCal = !this.isCal    
        },
        clickExam(val,val1){
            this.selectArr = []
            let arr = JSON.parse(JSON.stringify(this.examData))
            arr.find(item =>{
                if(item.name == val.name){
                    console.log(item)
                    item.examArr.find(item1 =>{
                        if(item1.time == val1.time){
                            item1.isSelect = true
                        }else{
                            item1.isSelect = false
                        }
                    })
                }
            })
            this.examData = arr
            this.examData.map(item =>{
                item.examArr.map(item1 =>{
                    if(item1.isSelect){
                        this.selectArr.push({
                            name:item.name,
                            posi:item.position,
                            time:item1.moment + ' ' +  item1.time,
                        })
                    }
                })
            })
        },
        onConfirm(date){
            let year = date.getFullYear();
            let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
            let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            let text = year + '-' + month + '-' + day
            let val = this.numData.find(item => item.date == text)
            console.log(val)
            if(val){
                this.selectDate = val.date
            }else{
                // this.$toast('异常')
            }
        },
        onConfirm1(){},
        handleExam(){
            console.log(this.selectArr,this.selectDate)
            this.$router.replace({
                name:'ExamProject',
                params:{
                    time:this.selectDate,
                    selectArr:this.selectArr
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.exam_contaniner{
    width: 100%;
    overflow-y: scroll;
    height: 100%;
    overflow-x: hidden;
    background: #F9F9F9;

    .top_box{
        background: #fff;
        .week-box{
            .week_box{
                width: 100%;
                height: 0.6rem;
                padding-top: 0.7rem;

                .week_num{
                    flex: 1;
                    font-size: 0.32rem;
                    line-height: 0.6rem;
                    text-align: center;
                }
            }
            .week_text{
                display: flex;
                width: 100%;
                height: 1.28rem;
                .week_txt{
                    position: relative;
                    width: 13.5%;
                    height: 84%;
                    font-size: 0.32rem;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    margin: 0.24rem 0.35% 0 0.35%;
                    // margin-top: 0.12rem;

                    .bottom_info{
                        position: absolute;
                        right: 0;
                        left: 0;
                        font-size: 10px;
                        line-height: 14px;
                        bottom: 6px;
                    }

                    .top_info{
                        position: absolute;
                        right: 0;
                        left: 0;
                        top: 6px;
                        font-size: 10px;
                        line-height: 14px;
                    }
                }
                .week_none{
                    color:#ccc;
                    pointer-events:none;
                }

                .none{
                    background: rgba(22, 119, 255,0.5);
                    border-radius: 50%;
                    color:#fff;
                }
                .isnum{
                    background: rgb(22, 119, 255,);
                    border-radius: 50%;
                    color:#fff;
                }
                .today_week{
                    background: #1677FF;
                    border-radius: 50%;
                    color:#fff;

                    .top_info{
                        width: 0.1rem;
                        height: 0.1rem;
                        background: #fff;
                        border-radius: 50%;
                        margin: 0 auto;
                        margin-top: 0.1rem;
                    }
                }
            }
        }

        .pull_box{
            display: flex;
            justify-content: center;
            margin-top: 0.24rem;

            img{
                width: 0.4rem;
                height: 0.4rem;
            }
        }
        .my-swipe .van-swipe-item {
            width: 100%;
            font-size: 0.4rem;
            text-align: center;
        }

        .can_box{
            padding-top:0.7rem
        }
    }
    .center_box{
        width: 100%;
        margin-top: 0.2rem;
        .exam_box{
            width: 100%;
            background: #fff;
            padding-bottom: 0.4rem;
            margin-bottom: 0.2rem;

            .exam_top{
                width: 100%;
                height: 1.6rem;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .top_left{
                    width: 80%;
                    height: 80%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    margin-left: 5%;

                    .name_txt{
                        font-size: 0.3rem;
                        color: #333;
                        font-weight: bold;
                    }
                    .posi_txt{
                        display: flex;
                        align-items: center;
                    }
                }
                .top_right{
                    width: 1.48rem;
                    height: 0.6rem;
                    border-top-left-radius: 0.4rem;
                    border-bottom-left-radius: 0.4rem;
                    border-right: none;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: rgba(72, 118, 255,0.2);
                }
            }
            .exam_bottom{
                width: 93%;
                display: flex;
                justify-content: space-between;
                margin: 0 auto;
                flex-wrap: wrap;

                .exam_txt{
                    width: 2.2rem;
                    height: 1rem;
                    background: #F6F6F6;
                    border: 1px solid #1677FF;
                    border-radius: 0.08rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;
                    font-size: 0.22rem;
                    margin-bottom: 0.2rem;
                }

                .isAct{
                    background: #F6F6F6;
                    border: 1px solid #F6F6F6;
                    pointer-events:none;
                    .txt{
                        color:rgba(102, 102, 102,0.3) !important;
                    }
                    div{
                        span{
                            color:rgba(102, 102, 102,0.3) !important;

                        }
                        color: rgba(51, 51, 51,0.3) !important;
                    }
                }

                .active{
                    background: #1677FF ;
                    div{
                        span{
                            color: #fff !important;
                        }
                        color: #fff !important;
                    }


                }
            }
        }
    }

    .btn_box{
        width:90%;
        height: 1.6rem;
        margin:0 auto;
        margin-top: 0.4rem;
        cursor: not-allowed
    }
}
::v-deep{
    .van-calendar__header {
        box-shadow: none !important;
    }
    .van-calendar__month-title{
        display: none;
    }
    .num1{
        background: rgb(22, 119, 255);
        border-radius: 50%;
        color: #fff;
    }
    .num2{
        background: rgba(22, 119, 255,0.5);
        border-radius: 50%;
        color: #fff;
    }
    .van-calendar__weekday{
        font-size: 0.32rem;
    }
        .van-calendar__selected-day{
            .van-calendar__top-info{
                width: 0.1rem;
                height: 0.1rem;
                background: #fff;
                border-radius: 50%;
                margin: 0 auto;
                margin-top: 0.1rem;
            }
        }
    .van-calendar__days{
        height: 6.4rem;

        .van-calendar__day{
            height: 17%;
            width: 13.5%;
            margin: 0 0.35%;

            .van-calendar__selected-day{
                width: 100%;
                height: 100%;
                background: #1677FF;
                border-radius: 50%;
            }
        }
    }
}
</style>