<style lang="less">
#punchClock{
    >.days{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 15px;
        >.num{
            >span{
                font-weight: 500;
                font-size: 34px;
                color:#000;
            }
            color:#777;
        }
        >.card{
            border-radius: 50px;
            padding: 7px 16px;
            color: #fff;
            background: linear-gradient(45deg, #0081ff, #1cbbb4);
            box-shadow: 2px 2px 3px rgba(23,189,187,0.4);
        }
    }
    >.calendar{
        margin: 10px;
        background: #fff;
        border-radius: 3px;
        box-shadow: 0px 1px 3px #bababa;
        >.head{
            display: flex;
            justify-content: space-between;
            height: 30px;
            >span{
                display: flex;
                align-items: center;
                &.iconfont{
                    color: #888;
                    width: 40px;
                    font-size:13px;
                    padding: 5px;
                    box-sizing: border-box;
                }
                &:not(.iconfont){
                color: #555;
                font-size: 14px;
                }
            }
        }
        >table{
            width:100%;
            tr{
                &:first-child{
                    background: #f2f2f2;
                    color: #777;
                }
                >td{
                    text-align: center;
                    height:30px;
                    line-height: 30px;
                    >div{
                        &.now{
                            color:#55B2B4;
                        }
                        >img{
                            width: 15px;
                            position: absolute;
                        }
                    }
                }
            }
        }
        >.foot{
            text-align: center;
            height: 30px;
            line-height: 30px;
            background: #f6f6f6;
            color: #777;
            border-top: 1px solid #ddd;
        }
    }
}
</style>
<template>
  <div id="punchClock">
      <div class="days">
          <div class="num">
              <span>0</span>
              天连续打卡
          </div>
          <div class="card" @click="toDetail">今日健康打卡</div>
      </div>
      <div class="calendar">
            <div class="head">
                    <span class="iconfont icon-back" @click="setCalendar(-1)"></span>
                    <span>{{nowMonth}}</span>
                    <span class="iconfont icon-back" @click="setCalendar(1)" style="transform: rotate(180deg);"></span>
            </div>
            <table>
                <tr>
                    <td>日</td>
                    <td>一</td>
                    <td>二</td>
                    <td>三</td>
                    <td>四</td>
                    <td>五</td>
                    <td>六</td>
                </tr>
                <tr v-for="(v1,k1) in calendarList" :key="k1">
                    <td v-for="(v2,k2) in v1" :key="k2">
                        <div :class="{now:v2.isNow}">
                            {{v2.value}}
                            <!-- <img v-if="" src="./image/tick.png" /> -->
                        </div>
                    </td>
                </tr>
            </table>
            <!-- <div class="foot">
                展开日历
            </div> -->
      </div>
  </div>
</template>

<script>
import util from "@/libs/util.js"

export default {
    name: 'punchClock',
    data () {
        return {
            nowDate:new Date(),
            calendarList:[],
            id:"",
            openId:"",
        }
    },
    created(){
        window.health=this
        console.log(config)
        this.id=this.$route.query.id
        this.openId=this.$route.query.openId
        this.setCalendar(0)
    },
    methods:{
        setCalendar(number){//设置日期
            this.nowDate.setDate(1)
            var date=this.nowDate=new Date(this.nowDate.setMonth(this.nowDate.getMonth()+number))
            date.setMonth(date.getMonth()+1)
            date.setDate(0)
            this.calendarList=[]
            this.getDate(this.nowDate.getDay(),1,date.getDate())
        },
        getDate(week,day,days){
            var weeks=[]
            for(var i=0;i<7;i++){
                if(i<week||day>days){
                    weeks.push({})
                }else{
                    weeks.push({
                        value:day,
                        isNow:this.isNow(day)
                    })
                    day++
                }
            }
            this.calendarList.push(weeks);

            if(day>=days)return;
            this.getDate(0,day,days)
        },
        isNow(day){
            if(this.nowDate.getFullYear()!=new Date().getFullYear()){
                return false
            }else if(this.nowDate.getMonth()!=new Date().getMonth()){
                return false
            }else if(day!=new Date().getDate()){
                return false
            }else {
                return true
            }
        },
        toDetail(){
            wx.miniProgram.postMessage({data:345})
            return
            if(this.openId){
                this.$router.push({path:"/healthCard/punchClockDetail",query:{id:this.id,openId:this.openId}})
            }else{
                wx.miniProgram.postMessage("asdf")
            }
        }
    },
    computed:{
        nowMonth(){
            return util.dateFormat(this.nowDate,"yyyy年MM月")
        }
    }
}
</script>