<template>
  <div class="scene-config">
    <!--开放办公区-->
    <div class="time-box" :class="timerText.classColor">
      <!-- <img :src="parseImgUrl('page-officehome', 'work.svg')" alt="" /> -->
      <div class="time-text">
        <span>{{ timerText.text }}</span>
        <span>{{ timerText.timer }}</span>
      </div>
      <div
        class="time-btn"
        :class="timerText.showDel ? 'time-btn-small' : ''"
        @click="triggerWork"
      >
        <span> {{ timerText.btnText }}</span>
      </div>
    </div>
    <div class="time-del" v-if="timerText.showDel" @click="myLeaving">
      <img :src="parseImgUrl('page-officehome', 'goOffWork.svg')" alt="" />
      <div class="del-text">
        <span>我要</span>
        <span>离开</span>
      </div>
    </div>
  </div>
  <!--加班点击我要离开触发-->
  <leave-dailog
    :isShowLeaveDailog="isShowLeaveDailog"
    v-if="isShowLeaveDailog"
    @closeDailog="closeLeavDailog"
  >
  </leave-dailog>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  watch,
  getCurrentInstance,
} 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";
import { saveBatchCustomScene } from "@/apis/envmonitor";
// import { Dialog } from "vant";
import LeaveDailog from "@/views/envmonitor/components/workOvertime/LeaveDailog.vue";

export default defineComponent({
  props: {
    scenarioArr: {
      type: Array,
      default: () => [],
    },
    workkArr: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    LeaveDailog
  },
  setup(props, contx) {
    const proxyGlobal: any = getCurrentInstance();
    let router: any = useRouter();
    let timerText: any = {
      text: "",
      timer: "", // 工作时间
      btnText: "",
      showDel: false, // 是否展示我要离开按钮
      classColor: "grey",
    };
    const store = useStore();
    const delTimeArr: any = [];
    let customSceneList: any = [];
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      leaveBtnFlag: false,
      scenarioArr: props.scenarioArr,
      workkArr: props.workkArr,
      forcedOverTimeFlag: false, // 强制加班标记 false:不需要强制加班
      onSubmit(values: any) {
        router.push({ path: "/choice-project" });
      },
      // 触发加班按钮
      triggerWork() {
        contx.emit("triggerWork");
      },
      timerText: timerText,
      // 处理时间和第二天和未来连续的问题
      formateTimeContinuous() {},
      // 判断当前时间在不在加班时间里面
      beforeWorkTime(data: any, nowTime: any) {
        let flag: any = true; // 是否在所有加班时间之前
        for (let i = 0; i < data.length; i++) {
          if (data[i].startTime < nowTime) {
            flag = false;
          }
        }
        return flag;
      },
      // 当前时间是否在所有加班时间之后
      afterWorkTime(data: any, nowTime: any) {
        let flag: any = true; // 是否在所有加班时间之前
        for (let i = 0; i < data.length; i++) {
          if (data[i].endTime > nowTime) {
            flag = false;
          }
        }
        return flag;
      },
      // 查询时间段的范围
      checkWorkTime(data: any, nowTime: any) {
        let obj: any = {
          type: 0, // type=1 当前时间在所有加班时间之前 type=2 当前时间在所有加班时间后 type=3 当前时间在某段加班时间 type=4 当前时间在加班之外,在某一段中间
          startTime: 0,
          endTime: 0,
        };
        if (proxyData.beforeWorkTime(data, nowTime)) {
          obj.type = 1;
        } else if (proxyData.afterWorkTime(data, nowTime)) {
          obj.type = 2;
        } else {
          let flag = true;
          for (let i = 0; i < data.length; i++) {
            if (nowTime >= data[i].startTime && nowTime <= data[i].endTime) {
              obj.startTime = data[i].startTime;
              obj.endTime = data[i].endTime;
              obj.type = 3;
              flag = false;
              break;
            }
          }
          if (flag) {
            obj.type = 4;
          }
        }
        return obj;
      },
      // 格式化日期
      delTimeArr: delTimeArr,
      customSceneList: customSceneList, // 当前日期的加班
      formateWorkTime() {
        // debugger;
        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) {
            proxyData.customSceneList = customSceneList;
            // debugger
            // 1.当天没有服务定制时间和加班时间
            /**a.未来有服务定制和加班**/
            // 2.当天有服务定制时间无加班时间
            // 当天在服务定制之内+加班+和未来的时间连续
            // a.在服务定制之内
            // b.已过了服务定制和1相同处理
            // 3.当天有服务定制和加班时间
            // a.在服务定制之内,并和加班时间不连着
            // b.在服务定制之内,并和加班连续
            // c.在加班时间之内,并和后面加班时间连续
            // d.在加班时间之内,并且和后面加班不连续
            // e.不在服务定制之内,也不在加班时间内,但是当天和未来都有预约时间
            /**f.不在服务定制之内,也不在加班时间内,但是当天没有预约时间,未来有预约加班 */

            let startTime: any = "";
            let endTime: any = "";
            if ((!cusStartTime || !cusEndTime) && !customSceneList.length) {
              proxyData.timerText.text = "请选择工作时间段";
              proxyData.timerText.timer = "将自动开启办公服务";
              proxyData.timerText.classColor = "grey";
              proxyData.timerText.btnText = "预约时间";
              proxyData.timerText.showDel = false;
              proxyData.forcedOverTimeFlag = true;
            } else if (cusStartTime && cusEndTime && !customSceneList.length) {
              if (nowTime >= cusStartTime && nowTime <= cusEndTime) {
                proxyData.timerText.text = "工作时间";
                proxyData.timerText.timer =
                  formatTimerStr(cusStartTime) +
                  "~" +
                  formatTimerStr(cusEndTime);
                proxyData.timerText.classColor = "yellow";
                proxyData.timerText.btnText = "预约延时";
                proxyData.timerText.showDel = false;
                proxyData.forcedOverTimeFlag = false;
              } else {
                proxyData.timerText.text = "请选择工作时间段";
                proxyData.timerText.timer = "将自动开启办公服务";
                proxyData.timerText.classColor = "grey";
                proxyData.timerText.btnText = "预约时间";
                proxyData.timerText.showDel = false;
                proxyData.forcedOverTimeFlag = true;
              }
            } else {
              if (
                cusStartTime &&
                cusEndTime &&
                nowTime >= cusStartTime &&
                nowTime <= cusEndTime
              ) {
                // debugger
                startTime = cusStartTime;
                endTime = cusEndTime;
                customSceneList.map((item: any) => {
                  if (endTime === item.startTime) {
                    endTime = item.endTime;
                  }
                });
                /**
                 * 需要补加上和未来时间连续的问题
                 */
                proxyData.timerText.text = "工作时间";
                proxyData.timerText.timer =
                  formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
                proxyData.timerText.classColor = "yellow";
                proxyData.timerText.btnText = "预约延时";
                proxyData.timerText.showDel = false;
                proxyData.forcedOverTimeFlag = false;
              } else {
                let obj: any = proxyData.checkWorkTime(
                  customSceneList,
                  nowTime
                );
                if (obj.type === 3) {
                  startTime = obj.startTime;
                  endTime = obj.endTime;
                  customSceneList.map((item: any) => {
                    let oldTimeStart: any = startTime;
                    let oldTimeEnd: any = endTime;
                    // debugger
                    if (
                      startTime === item.startTime &&
                      endTime === item.endTime
                    ) {
                      // proxyData.delTimeArr.push(item);
                    } // 点击我要离开的时候需要删除的数据
                    if (oldTimeEnd === item.startTime) {
                      endTime = item.endTime;
                      // proxyData.delTimeArr.push(item);
                    }
                  });
                  if (cusStartTime && cusEndTime && nowTime < cusStartTime) {
                    // 在服务定制时间之前的时候需要处理连续时间的问题
                    if (endTime === cusStartTime) {
                      endTime = cusEndTime;
                    }
                    customSceneList.map((item: any) => {
                      if (endTime === item.startTime) {
                        endTime = item.endTime;
                      }
                    });
                  }
                  /**
                   * 需要补加上和未来时间连续的问题
                   */
                  proxyData.timerText.text = "工作时间";
                  proxyData.timerText.timer =
                    formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
                  proxyData.timerText.classColor = "yellow";
                  proxyData.timerText.btnText = "预约延时";
                  proxyData.timerText.showDel = true;
                  proxyData.forcedOverTimeFlag = false;
                } else {
                  customSceneList.map((item: any) => {
                    if (nowTime < item.startTime) {
                      let oldTimeStart: any = startTime;
                      let oldTimeEnd: any = endTime;
                      if (item.startTime < startTime) {
                        startTime = item.startTime;
                        endTime = item.endTime;
                      } else if (endTime === item.startTime) {
                        endTime = item.endTime;
                      }
                    }
                  });
                  /**
                   *需要补加上和未来时间连续的问题
                   */
                  if (startTime && endTime) {
                    proxyData.timerText.text = "已预约~(今日)";
                    proxyData.timerText.timer =
                      formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
                    proxyData.timerText.classColor = "grey";
                    proxyData.timerText.btnText = "预约时间";
                    proxyData.timerText.showDel = false;
                    proxyData.forcedOverTimeFlag = true;
                  } else {
                    proxyData.timerText.text = "请选择工作时间段";
                    proxyData.timerText.timer = "将自动开启办公服务";
                    proxyData.timerText.classColor = "grey";
                    proxyData.timerText.btnText = "预约时间";
                    proxyData.timerText.showDel = false;
                    proxyData.forcedOverTimeFlag = true;
                  }
                }
              }
            }
            // debugger
            // 记录开灯标记
            contx.emit("setForceOverTimeFlag", proxyData.forcedOverTimeFlag);
          }
        }
      },
      // 时间拼接
      timeJoin(customSceneList: any, nowTime: any) {
        let startTime: any = 0;
        let endTime: any = 0;
        let obj: any = proxyData.checkWorkTime(customSceneList, nowTime);
        if (obj.type === 3) {
          startTime = obj.startTime;
          endTime = obj.endTime;
          customSceneList.map((item: any) => {
            let oldTimeStart: any = startTime;
            let oldTimeEnd: any = endTime;
            // debugger
            if (startTime === item.startTime && endTime === item.endTime) {
              // proxyData.delTimeArr.push(item);
            } // 点击我要离开的时候需要删除的数据
            if (oldTimeEnd === item.startTime) {
              endTime = item.endTime;
              // proxyData.delTimeArr.push(item);
            }
          });

          /**
           * 需要补加上和未来时间连续的问题
           */
          proxyData.timerText.text = "工作时间";
          proxyData.timerText.timer =
            formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
          proxyData.timerText.classColor = "yellow";
          proxyData.timerText.btnText = "预约延时";
          proxyData.timerText.showDel = true;
          proxyData.forcedOverTimeFlag = false;
        } else {
          customSceneList.map((item: any) => {
            if (nowTime < item.startTime) {
              let oldTimeStart: any = startTime;
              let oldTimeEnd: any = endTime;
              if (item.startTime < startTime) {
                startTime = item.startTime;
                endTime = item.endTime;
              } else if (endTime === item.startTime) {
                endTime = item.endTime;
              }
            }
          });
          /**
           *需要补加上和未来时间连续的问题
           */
          if (startTime && endTime) {
            proxyData.timerText.text = "已预约~(今日)";
            proxyData.timerText.timer =
              formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
            proxyData.timerText.classColor = "grey";
            proxyData.timerText.btnText = "预约时间";
            proxyData.timerText.showDel = false;
            proxyData.forcedOverTimeFlag = true;
          } else {
            proxyData.timerText.text = "请选择工作时间段";
            proxyData.timerText.timer = "将自动开启办公服务";
            proxyData.timerText.classColor = "grey";
            proxyData.timerText.btnText = "预约时间";
            proxyData.timerText.showDel = false;
            proxyData.forcedOverTimeFlag = true;
          }
        }
      },
      // 格式化需要删除的数据
      formatDataDel() {
        proxyData.delTimeArr = [];
        let customSceneList: any = proxyData.customSceneList;
        let nowTime: any = getRelNowTime();
        let startTime: any = 0;
        let endTime: any = 0;
        let obj: any = proxyData.checkWorkTime(customSceneList, nowTime);
        if (obj.type === 3) {
          startTime = obj.startTime;
          endTime = obj.endTime;
          customSceneList.map((item: any) => {
            let oldTimeEnd: any = endTime;
            if (startTime === item.startTime && endTime === item.endTime) {
              item.type = 1;
              proxyData.delTimeArr.push(item);
            } // 点击我要离开的时候需要删除的数据
            if (oldTimeEnd === item.startTime) {
              endTime = item.endTime;
              item.type = 1;
              proxyData.delTimeArr.push(item);
            }
          });
        }
      },
      // 我要离开
      myLeaving() {
        proxyData.formatDataDel();
        console.log("删除了=====");
        console.log(proxyData.delTimeArr);
        proxyData.leaveBtnFlag = true;
        // 取消加班
        proxyData.saveBatchCustomScene();
      },
      // 取消加班记录
      saveBatchCustomScene() {
        // proxyGlobal.proxy.$loadingStart(0);
        proxyData.openLeavDailog();
        saveBatchCustomScene(proxyData.delTimeArr)
          .then((res) => {
            proxyData.leaveBtnFlag = false;
            console.log(res);
            // proxyGlobal.proxy.$loadinngEnd();
          })
          .catch(() => {
            proxyData.leaveBtnFlag = false;
            // proxyGlobal.proxy.$loadinngEnd();
          });
      },
      isShowLeaveDailog: false,
      openLeavDailog() {
        proxyData.isShowLeaveDailog = true;
      },
      closeLeavDailog() {
        proxyData.isShowLeaveDailog = false;
      },
    });
    watch(
      props,
      (newProps: any) => {
        proxyData.scenarioArr = newProps.scenarioArr;
        proxyData.workkArr = newProps.workkArr;
        if (proxyData.workkArr && proxyData.workkArr.length) {
          proxyData.formateWorkTime();
        }
      },
      {
        deep: false,
        immediate: true,
      }
    );
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
.scene-config {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 15px;
  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: rgba(206, 159, 39, 0.4);
  }
  .time-box {
    position: relative;
    // width: 69%;
    flex: 2.4;
    height: 100%;
    line-height: 70px;
    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: 20px;
          color: #4d5262;
        }
        &:nth-child(2) {
          font-family: "Montserrat";
          padding-top: 5px;
          font-style: normal;
          font-weight: 500;
          font-size: 15px;
          line-height: 20px;
          color: #1f2429;
        }
      }
    }
    .time-btn {
      position: absolute;
      // padding-top: 9px;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      display: inline-block;
      width: 98px;
      // width: 64px;
      height: 50px;
      line-height: 20px;
      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 {
        position: absolute;
        padding: 0 8px;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        font-size: 13px;
        // line-height: 16px;
        text-align: center;
        color: #000000;
      }
    }
    .time-btn-small {
      width: 64px;
    }
  }

  .time-del {
    // width: 27%;
    padding-top: 18px;
    flex: 1;
    margin-left: 10px;
    background: #f1f4f8;
    border-radius: 16px;
    text-align: center;
    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: 18px;
        text-align: center;
        color: #000000;
      }
    }
  }
}
</style>
<style lang="scss">
</style>
