<template>
  <div>
      <div  @click="handleLast()">上一周</div>
       <div  @click="handleNext()">下一周</div>

      <el-calendar
        ref="monChild"
        v-model="value"
        :first-day-of-week="7"
        :range="[starttime, endtime]"
        style="height: 82px;"
      >
        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
        <!-- slot="dateCell" -->
        <!-- slot-scope="{date, data}"> -->
        <template #dateCell="{ data }">
          <div
            :class="data.isSelected ? 'is-selected' : ''"
            @click="handleClick(data)"
          >
            <div style="line-height: 18px">
              {{ parseTime(data.day, "{d}") }}
            </div>
            <!-- 圆点显示 -->
            <div class="g-flexcenter">
              <div v-if="dateList.findIndex((res) => res.scheduleTime === data.day) !==-1" :class="data.isSelected? 'g-color-blue': 'g-color-blue'">
                ·
              </div>
            </div>
          </div>
        </template>
      </el-calendar>
    
  </div>
</template>

<script>

import dayjs from "dayjs";

export default {
  name: "",

  data() {
    return {
      value: new Date(), //选中的日期 默认当天
      starttime: "",
      endtime: "",
      timeLength: "", //时长
    };
  },

  
  created() {
    this.weekCheckingIn();
  },
  methods: {
    /**获取近一周的日期  开始周起始日，结束周结束日*/
    weekCheckingIn() {
      let now = new Date(this.value);
      let nowTime = now.getTime();
      let day = now.getDay() || 7; // 不加 || 7.周末会变成下周一
      let oneDayTime = 24 * 60 * 60 * 1000;
      let SundayTime = nowTime - day * oneDayTime; //显示周日
      let SaturdayTime = nowTime + (7 - day - 1) * oneDayTime; //显示周六
      this.starttime = dayjs(SundayTime).format("YYYY-MM-DD");
      this.endtime = dayjs(SaturdayTime).format("YYYY-MM-DD");
    },

    /**上一周 */
    handleLast() {
      const last = new Date(this.value);
      last.setDate(last.getDate() - 7); //日期相加减
      this.value = last;
      this.weekCheckingIn();
    },
    /**下一周 */
    handleNext() {
      const next = new Date(this.value);
      next.setDate(next.getDate() + 7);
      this.value = next;
      this.weekCheckingIn();
    },

   
    /**选中的日期 */
    handleClick(data) {
      this.value = data.day;
     //调详情列表
    
    },

    //给list添加一个字段timeLength
    // this.$set(item,'timeLength',(new Date(endTime) - new Date(startTime)) / (1000 * 60 * 60))

  },
};
</script>

  <style lang="scss" scoped>

::v-deep .el-calendar__header {
  display: none;
  font-size: 12px;
  padding: 10px 0px;
  .el-button--mini {
    padding: 2px 5px;
    border-radius: 3px;
  }
}
::v-deep .el-calendar__body {
  padding: 0;

  .el-calendar-table thead th {
    font-size: 12px;
    font-weight: 400;
    color: #8f959e;
    padding: 12px 0 8px !important;
  }
}

::v-deep .el-calendar-table .el-calendar-day {
  height: auto;
  padding: 5px;
 
}
::v-deep .el-calendar-table td.is-selected .el-calendar-day {
  height: 27px !important;
  width: 27px !important;
  background: none !important;
  background-color: #ebeefc !important;
  font-size: 14px !important;
  font-weight: bold !important;
  color: #ffffff !important;
  background: #3370ff !important;
}
::v-deep .el-calendar-table tr td {
  border: 0px;
  text-align: center;
  font-weight: bold !important;
}
::v-deep .el-calendar-table td.is-selected {
  display: flex;
  justify-content: center;
  background: #fff;

  .el-calendar-day {
    width: 34px;
    height: 31px;
    background: url("~@/assets/images/workbench/icon_date.png") no-repeat;
    background-size: 100% 100%;
    border-radius: 50%;
    // font-family: PingFang SC;
    font-weight: bold;
    color: #409eff;
  }
}
::v-deep .el-calendar-table td :hover {
  background: none;
  color: #409eff;
}
::v-deep .el-calendar-table td.is-selected :hover {
  border-radius: 50%;
}

</style>