<template>
    <div>
        <div class="lock">
            <div class="imgparent">
                <van-nav-bar
                    title="考勤记录"
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"
                />
            </div>
            <div class="lock_header">
                <div class="lock_headerth">
                    <p>本月考勤记录</p>
                    <p @click="cords"><span>详细记录</span><img
                            src="../assets/img/icon_xxjl_blue.png"
                            alt=""
                        > </p>
                </div>
                <div class="lock_headerthbt">
                    <p>
                        <span>1</span>
                        <span>迟到</span>
                    </p>
                    <p>
                        <span>1</span>
                        <span>早退</span>
                    </p>
                    <p>
                        <span>1</span>
                        <span>请假</span>
                    </p>
                </div>
            </div>
            <div class="bottom tten_bottom">
                <van-calendar
                    color="#1989fa"
                    :poppable="false"
                    :show-confirm="false"
                    :style="{ height: '350px' }"
                    :show-title="false"
                    :formatter="formatter"
                    :min-date="minDate" :max-date="maxDate"
                />
                <!-- <inline-calendar
      v-model="value"
      :start-date="minDate"
      :end-date="maxDate"
      :return-six-rows="false"
      :render-function="buildSlotFn"
      @on-change="chooseCalendarDay"
    ></inline-calendar> -->

            </div>

            <p></p>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      text: "选择日期",
      value: "",
      showPicker: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2022, 10, 1),
      currentDate: new Date(),
      gettime: "",
      gettimetwo: "",
      timeList:['2021-05-26','2021-05-27']

    };
  },
  created() {
    this.time();
  },
  methods: {
    pathPush() {},
    onClickLeft() {
      this.$router.go(-1)
    },
    buildSlotFn (){

    },
    chooseCalendarDay(){

    },
    // 查看详细记录
    cords(){
      this.$router.push("/record");
    },
     formatter(day) {
      const month = day.date.getMonth() + 1;
      const datee = day.date.getDate();
      let date = new Date(day.date);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      const time = y + "-" + m + "-" + d;
      console.log(day)
      for(var i = 0 ; i < this.timeList.length; i++){
          if(this.timeList[i] == time){
               day.bottomInfo = "正常";
          }
      }
      if (month === 5) {
        if (datee === 1) {
          day.topInfo = '劳动节';
        } else if (datee === 4) {
          day.topInfo = '青年节';
        } else if (datee === 11) {
          day.text = '今天';
        }
      }

    //   if (day.type === 'start') {
    //     day.bottomInfo = '正常';
    //   } else if (day.type === 'end') {
    //     day.bottomInfo = '离店';
    //   }

      return day;
    },
    // 日期
    time() {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      _this.gettimetwo =
        yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
      _this.gettime = hh + ":" + mf + ":" + ss;
      console.log(this.gettime);
    }
  }
};
</script>


<style lang="less">
.tten_bottom {
  .van-calendar__header {
    box-shadow: 0 0 0 !important;
  }
  .van-calendar__bottom-info{
     color: #009FE8;
  }
//   .van-calendar__selected-day{
//     background-color: #009FE8;
//     border-radius:44px;
//     width: 37px;
//     height: 37px;
//   }
}
</style>



<style scoped lang="less">
.lock {
  height: 100vh;
  background: #fff;
  padding: 0 17px;
  padding-bottom: 40px;
  .lock_header {
    height: 29.6vw;
    padding: 4.533vw;
    box-shadow: 0px 0px 6px 0px rgba(153, 152, 152, 0.39);
    border-radius: 3px;
    margin-top: 30px;
    .lock_headerth {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p:nth-child(1) {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #343434;
      }
      p:nth-child(2) {
        display: flex;
        align-items: center;
        span {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #009fe8;
        }
        img {
          width: 1.333vw;
          height: 2.4vw;
          margin-left: 5px;
        }
      }
    }
    .lock_headerthbt {
      display: flex;
      justify-content: space-between;
      p {
        flex: 1;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 30px;
        span:nth-child(1) {
          margin-bottom: 5px;
          font-size: 17px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #343434;
        }
        span:nth-child(2) {
          font-size: 11px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #343434;
        }
      }
    }
  }
  //   第二部分样式
  .bottom {
    box-shadow: 0px 0px 6px 0px rgba(153, 152, 152, 0.39);
    border-radius: 3px;
    margin-top: 15px;
    padding: 0 16px;
    padding-top: 27px;
  }
  //   按钮样式
  .lock_navebut {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
    p:nth-child(1) {
      width: 167px;
      height: 56px;
      background: #009fe8;
      box-shadow: 0px 3px 3px 0px rgba(3, 141, 204, 0.39);
      border-radius: 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 13px;
      span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
      }
      span:nth-child(2) {
        font-weight: 500;
        margin-top: 3px;
      }
    }
    p:nth-child(2) {
      img {
        width: 10px;
        height: 10px;
      }
      span {
        font-size: 10px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        margin-left: 5px;
      }
    }
  }
}
</style>