<template>
    <div class="date">
        <div class="head">
            <div @click="shang">
                <img src="../../static/images/left.png" alt=""> 
                上一月
            </div>
            {{month.year}}年{{month.yue}}月
            <a-button type="primary" class="button" @click="navto()">
                周日历
            </a-button>
            <div @click="xia">
                下一月
                <img src="../../static/images/right.png" alt="">
            </div>
        </div>
        <div class="yue">
            <div class="heads">
                <div :class="{zhou: yue == 0 && month.zhou == 0}">周日</div>
                <div :class="{zhou: yue == 0 && month.zhou == 1}">周一</div>
                <div :class="{zhou: yue == 0 && month.zhou == 2}">周二</div>
                <div :class="{zhou: yue == 0 && month.zhou == 3}">周三</div>
                <div :class="{zhou: yue == 0 && month.zhou == 4}">周四</div>
                <div :class="{zhou: yue == 0 && month.zhou == 5}">周五</div>
                <div :class="{zhou: yue == 0 && month.zhou == 6}">周六</div>
            </div>
            <div class="body">
                <div class="row" v-for="(item,index) in month.date" :key="index">
                    <div v-for="(i,j) in item" :key="j">
                        <div class="day">
                            <div :class="{ing:i.s == 1, old: i.s == 2 ,next: i.s == 0 }" @click="navto(i.time)">
                                    {{i.day}}
                                    <div class="item" @click.stop="gotolive(i.id, i.statit)" v-for="(i,j) in i.list" :key="j">
                                        <div></div><p>{{i.title}}</p>
                                    </div>
                                <!-- <span class="ing"></span> -->
                                <!-- <span class="next"></span> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.date{
    display: flex;
    flex-direction: column;
    align-items: center;
    .head{
        width: 1320px;
        height: 57px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        >div{
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #0DBBA4;
            cursor: pointer;
            >img{
                width: 7px;
                height: 11px;
            }
        }
        >div:first-child{
            margin-right: 90px;
            >img{
                margin-right: 11px;
            }
        }
        >div:last-child{
            margin-left: 90px;

            >img{
                margin-left: 11px;
            }
        }
        .button{
            width: 57px;
            height: 26px;
            background-color: #0DBBA4;
            border-right: 4px;
            border: none;
            font-size: 10px;
            color: #fff;
            padding: 0;
            position: absolute;
            right: 40px;
        }
    }
    .yue{
        width: 1320rpx;
        .heads{
            width: 1320px;
            height: 63px;
            display: flex;
            >div{
                width: 100%;
                height: 100%;
                background-color: #F5FEFD;
                text-align: center;
                line-height: 63px;
                font-size: 13px;
                color: #08AE98;
                border-right: 1px solid #eee;
                box-sizing: border-box;
            }
            .zhou{
                color: #fff;
                background: #08AE98;
            }
        }
        .body{
            .row{
                    background-color: #fff;
                    height: 126px;
                    width: 100%;
                    display: flex;
                    >div{
                        width: 100%;
                        border-top: 1px solid #eee;
                        border-right: 1px solid #eee;
                        .day{
                            width: 100%;
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            color: #111;
                            >div{
                                height: 100%;
                                border-radius: 6px;
                                padding: 18px;
                                overflow: hidden;
                                .item{
                                    display: flex;
                                    align-items: center;
                                    margin-top: 11px;
                                    >div{
                                        width: 6px;
                                        height: 6px;
                                        background-color: #111;
                                        margin-right: 6px;
                                        border-radius: 50%;
                                    }
                                    >p{
                                        line-height: 1;
                                        margin: 0;
                                    }
                                }
                            }
                            .old{
                                background-color: #F7F7F7;
                            }
                            .ing{
                                background-color: #0DBBA4;
                                color: #fff;
                                .item{
                                    >div{
                                        background-color: #fff;
                                    }
                                }
                            }
                            .next{
                                background-color: #CEF9F0;
                                color: #0DBBA4;
                                .item{
                                    >div{
                                        background-color: #0DBBA4;
                                    }
                                }
                            }
                        }
                          
                    }
                    >div::last-child{
                        border: unset;
                    }
            }
        }
    }
       
}
</style>
<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue';
import { getdate, getDay } from "@/utils/date"
import { getdatelist } from '@/api';
import store from '@/store';
import router from '@/router';

export default defineComponent({
    props:{

    },
    setup(){
        console.log(1)
        const date = getdate();
        console.log(date)
        const month: any = ref(date);
        const yue = ref(0);
        const userid = computed(() => {
            return store.state.userinfo.memberid;
        
        })
        async function getdates(userid: number){
            getdatelist(month.value.start, month.value.end, userid).then((res: any)=>{
                console.log(res)
                for(const i in res){
                    const day = getDay(res[i].dateline)
                    for(const j in month.value.date){
                        for(const k in month.value.date[j]){
                            console.log(month.value.day, 111)
                            if(yue.value == 0 && month.value.date[j][k].day == month.value.day + 1){
                                month.value.date[j][k].s = 1
                            } 
                            if(month.value.date[j][k].day == day){
                                if(month.value.date[j][k].list == undefined){
                                    month.value.date[j][k].list = [];
                                }
                             
                                if(!month.value.date[j][k].s){
                                    month.value.date[j][k].s = res[i].livestatus
                                }else if(month.value.date[j][k].s != 1){
                                    res[i].livestatus == 0 && month.value.date[j][k].s == 2 ? month.value.date[j][k].s = 0 : month.value.date[j][k].s = 2
                                }
                                month.value.date[j][k].list.push({title: res[i].title, id: res[i].liveid, statit: res[i].livestatus});
                                console.log(day)
                            }
                        }
                    }
                }
                console.log(month.value.date, 121)
            })
        }
        function xia(){
            yue.value  = yue.value + 1;
            month.value = getdate(yue.value)
            getdates(userid.value)
        }
        
        watch(userid, ()=> {
            getdates(userid.value);
        })
        function shang(){
            yue.value  = yue.value  - 1;
            month.value = getdate(yue.value)
            getdates(userid.value)
        }
      
        function navto(date: string){
            router.push("/regime/week?time=" + (!date? '' : date) )
        }
        function gotolive(id: string, s: number){
            let url = '';
            switch (s) {
                case 1:
                    url = '/regime/liveing';
                    break;
                default:
                    url = '/regime/livedetail';
            }
            router.push({path: url,query: { id: id }})
        }
        getdates(userid.value);
        return {
            month,
            xia,
            shang,
            yue,
            navto,
            gotolive
        }
    }
})
</script>