<template>
  <div class="scene-config">
    <!--开放办公区-->
    <div class="time-box">
      <img :src="parseImgUrl('page-officehome', 'work.svg')" alt="" />
      <div class="time-text">
        <span>工作时间</span>
        <span>09:00~20:00</span>
      </div>
      <div class="time-btn" @click="triggerWork">
        <span> 预约</span>
        <span>延时</span>
      </div>
    </div>
    <div class="time-del">
      <img :src="parseImgUrl('page-officehome', 'goOffWork.svg')" alt="" />
      <div class="del-text">
        <span>我要</span>
        <span>离开</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  watch,
} from "vue";
import { useRouter } from "vue-router";
import {
  formatDate,
  formatDateStr,
  formatTimerStr,
  getRelNowTime,
  parseImgUrl,
} from "@/utils";
import { UserActionTypes } from "@/store/modules/user/action-types";
import { useStore } from "@/store";

export default defineComponent({
  props: {
    scenarioArr: {
      type: Array,
      default: () => [],
    },
    workkArr: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, contx) {
    let router: any = useRouter();
    let timerText: any = {
      timer: "", // 工作时间
      showDel: false, // 是否展示我要离开按钮
      classColor: "grey",
    };
    const store = useStore();
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      scenarioArr: props.scenarioArr,
      workkArr: props.workkArr,
      onSubmit(values: any) {
        router.push({ path: "/choice-project" });
      },
      // 触发加班按钮
      triggerWork() {
        contx.emit("triggerWork");
      },
      timerText: timerText,
      // 格式化日期
      formateWorkTime() {
        let data: any = proxyData.workkArr;
        let nowDate: any = formatDate("YYYY-MM-DD");
        for (let i = 0; i < data.length; i++) {
          let date: any = formatDateStr(data[i].date);
          let cusStartTime: any = data[i].cusStartTime;
          let cusEndTime: any = data[i].cusEndTime;
          let customSceneList: any = data[i]?.customSceneList ?? [];
          let nowTime: any = getRelNowTime();
          console.log("nowTime===" + nowTime);
          if (date === nowDate) {
            // 1.当天没有服务定制时间和加班时间
               /**a.未来有服务定制和加班**/
            // 2.当天有服务定制时间无加班时间
             // 当天在服务定制之内+加班+和未来的时间连续  
            // a.在服务定制之内
            // b.已过了服务定制和1相同处理
            // 3.当天有服务定制和加班时间
            // a.在服务定制之内,并和加班时间不连着
            // b.在服务定制之内,并和加班连续
            // c.在加班时间之内,并和后面加班时间连续
            // d.在加班时间之内,并且和后面加班不连续
            // e.不在服务定制之内,也不在加班时间内,但是当天和未来都有预约时间
            /**f.不在服务定制之内,也不在加班时间内,但是当天没有预约时间,未来有预约加班 */

            if ((!cusStartTime || !cusEndTime) && !customSceneList.length) {
              proxyData.timerText.timer ===
                "请选择工作时间段将自动开启办公服务";
              proxyData.timerText.showDel = false;
              proxyData.timerText.classColor = "grey";
            } else if (cusStartTime && cusEndTime && !customSceneList.length) {
              if (nowTime >= cusStartTime && nowTime <= cusEndTime) {
                proxyData.timerText.timer =
                  formatTimerStr(cusStartTime) +
                  "~" +
                  formatTimerStr(cusEndTime);
                proxyData.timerText.showDel = false;
                proxyData.timerText.classColor = "yellow";
              } else {
                proxyData.timerText.timer ===
                  "请选择工作时间段将自动开启办公服务";
                proxyData.timerText.showDel = false;
                proxyData.timerText.classColor = "grey";
              }
            } else if (cusStartTime && cusEndTime && customSceneList.length) {
              
            }
          }
        }
      },
    });
    watch(props, (newProps: any) => {
      proxyData.scenarioArr = newProps.scenarioArr;
      proxyData.workkArr = newProps.workkArr;
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
.scene-config {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
  width: 100%;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 25px;
  .grey {
    background: rgba(159, 183, 205, 0.15) !important;
  }
  .yellow {
    background: #ffe723;
  }
  .time-box {
    position: relative;
    // width: 69%;
    flex: 2.4;
    height: 100%;
    line-height: 58px;
    background: rgba(206, 159, 39, 0.4);
    // opacity: 0.4;
    border-radius: 16px;
    img {
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      height: 20px;
      margin-left: 10px;
    }
    .time-text {
      display: inline-block;
      vertical-align: middle;
      padding-left: 10px;
      span {
        display: block;
        &:nth-child(1) {
          font-family: "Montserrat";
          font-style: normal;
          font-weight: 500;
          font-size: 12px;
          line-height: 15px;
          color: #4d5262;
        }
        &:nth-child(2) {
          font-family: "Montserrat";
          font-style: normal;
          font-weight: 500;
          font-size: 15px;
          line-height: 18px;
          color: #1f2429;
        }
      }
    }
    .time-btn {
      position: absolute;
      padding-top: 9px;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      display: inline-block;
      width: 48px;
      height: 50px;
      background: #ffffff;
      box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
        0px 4px 10px rgba(0, 0, 0, 0.07);
      border-radius: 12px;
      span {
        display: block;
        font-size: 13px;
        line-height: 16px;
        text-align: center;
        color: #000000;
      }
    }
  }

  .time-del {
    // width: 27%;
    padding-top: 13px;
    flex: 1;
    margin-left: 10px;
    background: #f1f4f8;
    border-radius: 16px;
    img {
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      height: 20px;
      margin-left: 10px;
    }
    .del-text {
      display: inline-block;
      vertical-align: middle;
      padding-left: 10px;
      //   padding-top: 9px;
      span {
        display: block;
        font-size: 13px;
        line-height: 16px;
        text-align: center;
        color: #000000;
      }
    }
  }
}
</style>
<style lang="scss">
</style>
