<template>
  <div class="activities">
    <ReturnHead text="活动详情"></ReturnHead>
    <div class="main">
      <div class="notice" :style="{ display: closeBtn ? 'flex' : 'none' }">
        <span class="text">{{ data?.activityNotice }}</span>
        <span class="close" @click="isShowClose"></span>
      </div>
      <div class="title">
        <div class="titlemain">
          <div class="timeposition">
            <div
              calss="titlecontent"
              style="
                font-size: 14px;
                font-weight: bold;
                line-height: 21.6px;
                margin-bottom: 8px;
              "
            >
              {{ data?.activityName }}
            </div>
            <div class="time">
              <img
                style="width: 13px; height: 14.5px; margin-right: 5.5px"
                src="../../assets/image/faceteach/time.png"
              />
              <div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
                {{ data?.activityStartTime ? data?.activityStartTime : "-" }} 至
                {{ data?.activityEndTime ? data?.activityEndTime : "-" }}
              </div>
            </div>
            <div class="time" style="margin-top: 9px">
              <img
                style="width: 13px; height: 15px; margin-right: 5.5px"
                src="../../assets/image/faceteach/position.png"
              />
              <div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
                {{ data?.activityAddress }}
              </div>
            </div>
          </div>
          <div v-if="projectStatus && projectEndTime" class="sign">
            <div
              v-if="
                projectStatus !== '3' &&
                new Date(changeTime(projectEndTime)).getTime() >
                  new Date().getTime()
              "
              class="sign"
            >
              <botton
                v-if="isAllowSign"
                class="btn"
                :style="{
                  background: data.signFlag ? '#999' : 'rgb(57, 146, 249)',
                }"
                @click="signClick"
                >{{ data.signFlag ? "已签到" : "签到" }}
              </botton>
              <botton
                v-else
                class="btn"
                :style="{ background: '#999' }"
                @click="signClick"
                >{{ data.signFlag ? "已签到" : "签到" }}
              </botton>
            </div>
          </div>
          <div v-else class="sign">
            <div class="sign">
              <button
                v-if="isAllowSign"
                class="btn"
                :style="{
                  background: data.signFlag ? '#999' : 'rgb(57, 146, 249)',
                }"
                @click="signClick"
              >
                {{ data.signFlag ? "已签到" : "签到" }}
              </button>
              <button
                v-else
                class="btn"
                :style="{ background: '#999' }"
                @click="signClick"
              >
                {{ data.signFlag ? "已签到" : "签到" }}
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="details">
        <div class="details_title">活动详情</div>
        <div class="details_content">
          <div>
            <span>活动时长：</span>
            <div class="content">
              {{
                data?.activityDuration ? data?.activityDuration + "分钟" : "-"
              }}
            </div>
          </div>
          <div>
            <span>活动地点：</span>
            <div class="content">
              {{ data?.activityAddress ? data?.activityAddress : "-" }}
            </div>
          </div>
          <div>
            <span>活动考勤：</span>
            <div class="content">
              {{
                data?.beforeSignIn
                  ? "活动开始前" + data?.beforeSignIn + "分钟开始签到"
                  : "-"
              }}
            </div>
            <div class="content">
              {{
                data?.afterSignIn
                  ? "活动开始后" + data?.afterSignIn + "分钟结束签到"
                  : "-"
              }}
            </div>
          </div>
          <!--
              <div>
                <div>活动完成标准：</div>
                <div class="content">
                  {{ data?.standardSettings ? "仅签到" : "-" }}
                </div>
              </div>
              -->

          <div>
            <span>活动说明：</span>
            <div class="content">
              {{ data?.activityExplain ? data?.activityExplain : "-" }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { TASK_ACTIVITY_SIGN, ACTIVITY, checkStudentExist } from "@/api/api";
import { request, useRequest } from "@/api/request";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router/dist/vue-router";
import { ElMessage } from "element-plus";
import { reactive, onUnmounted, toRefs, watch } from "vue";
import ReturnHead from "@/components/ReturnHead.vue";
import { changeTime } from "@/api/method";
const router = useRouter();
const returnclick = () => {
  router.back();
};
const {
  query: { courseId: activityId, id: taskId, type, chapterOrStageId, infoId },
} = useRoute();
console.log("query", activityId, taskId, type);
const state = reactive({
  isAllowSign: false,
  closeBtn: true,
});
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
const { isAllowSign, closeBtn } = toRefs(state);

const { data } = useRequest(ACTIVITY, { activityId, type }, (e) => {
  useRequest(
    checkStudentExist,
    {
      targetId: infoId,
      type: type,
      chapterId: chapterOrStageId,
      courseId: taskId,
    },
    (res) => {
      console.log("判断任务是否删除", res);
      if (res.code === 7) {
        router.push({
          path: "/loseefficacy",
        });
      } else {
        if (res.code === 6) {
          router.push({
            path: "/notpath",
          });
        }
      }
    }
  );
});

console.log("data", data);
const signClick = (tab, event) => {
  if (data.value.signFlag) {
    return;
  }

  if (!state.isAllowSign) {
    // console.log("data.signFlag", data.value.signFlag, isAllowSign);
    ElMessage.warning("未在允许签到时间范围内");
    return;
  }

  data.value.signFlag = true;
  ElMessage.warning("签到成功");
  request(TASK_ACTIVITY_SIGN, {
    courseId: activityId,
    taskId,
    type,
  });
};
let timer = null;
//判断能否签到
function isSignClick() {
  // timer = setInterval(() => {
  if (
    data &&
    data.value &&
    data.value.activityStartTime &&
    data.value.activityEndTime
  ) {
    let newStartTime = changeTime(data.value.activityStartTime);
    let newEndTime = changeTime(data.value.activityEndTime);
    console.log("newStartTime", newStartTime, newEndTime);
    let beginTime = new Date(newStartTime).getTime();
    let endTime = !data.value.afterSignIn
      ? new Date(newEndTime).getTime()
      : new Date(newStartTime).getTime();
    let nowTime = new Date().getTime();
    if (
      data.value.beforeSignIn &&
      data.value.afterSignIn &&
      data.value.beforeSignIn !== "0" &&
      data.value.afterSignIn !== "0"
    ) {
      //有开始前有开始后
      beginTime = beginTime - data.value.beforeSignIn * 60 * 1000;
      endTime = endTime + data.value.afterSignIn * 60 * 1000;
      console.log("1111");
    } else if (
      data.value.beforeSignIn &&
      !data.value.afterSignIn &&
      data.value.beforeSignIn !== "0" &&
      data.value.afterSignIn !== "0"
    ) {
      //只有开始前无开始后
      beginTime = beginTime - data.value.beforeSignIn * 60 * 1000;
      console.log("11112222");
    } else if (
      !data.value.beforeSignIn &&
      data.value.afterSignIn &&
      data.value.beforeSignIn !== "0" &&
      data.value.afterSignIn !== "0"
    ) {
      //无开始前有开始后
      endTime = endTime + data.value.afterSignIn * 60 * 1000;
      console.log("1111333");
    }

    // console.log(nowTime, beginTime, endTime, data.value);
    // console.log(nowTime < endTime, nowTime > beginTime);
    // console.log(state.isAllowSign);
    if (nowTime < endTime && nowTime > beginTime) {
      state.isAllowSign = true;
    } else {
      state.isAllowSign = false;
    }
  }

  // console.log(
  //   "isAllowSign",
  //   state.isAllowSign,
  //   nowTime,
  //   endTime,
  //   beginTime,
  //   nowTime < endTime,
  //   nowTime > beginTime
  // );
  // }, 1000);
}
watch(data, () => {
  isSignClick();
});
// isSignClick();

//是否显示头部公告
const isShowClose = () => {
  state.closeBtn = false;
};
</script>

<style lang="scss">
.activities {
  width: 100%;

  .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    //margin-top: -14.5px;
    .notice {
      background-color: rgba(255, 251, 238, 1);
      width: 100%;
      height: 25px;
      display: flex;
      // justify-content: center;
      position: relative;

      .text {
        //display: flex;
        height: 25px;
        //position: absolute;
        color: rgba(255, 158, 0, 1);
        padding: 6px 41px 6.5px 15.5px;
        font-size: 12px;
        //line-height: 24px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .close {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        width: 9.5px;
        height: 9.5px;
        background-image: url(../../assets/image/pathmap/close.png);
        margin-top: 10px;
        margin-right: 16px;
        margin-bottom: 8px;
      }
    }

    .title {
      width: 100%;
      //height: 74px;
      //border-radius: 4px;
      background-color: rgba(255, 255, 255, 1);
      display: flex;
      justify-content: center;

      .titlemain {
        width: 90%;
        display: flex;
        margin-top: 10px;
        margin-bottom: 15px;
        justify-content: space-between;
        align-items: center;

        .timeposition {
          .time {
            display: flex;
            align-items: center;
          }
          width: calc(100% - 93px);
          // background-color: pink;
        }

        .titlebtn {
          width: 83px;
          height: 33px;
          background: rgba(0, 150, 250, 1);
          //box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          line-height: 12px;
          cursor: pointer;
        }
        .sign {
          width: 93px;
          height: 33px;
          .btn {
            width: 93px;
            height: 33px;
            border-radius: 6px;
            border: 0;
            font-size: 14px;
            cursor: pointer;
            flex-shrink: 0;
            color: #fff;
          }
        }
      }
    }

    .details {
      width: 100%;
      margin-top: 11.5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: rgba(255, 255, 255, 1);
      padding-bottom: 20px;

      .details_title {
        width: 90%;
        display: flex;
        font-size: 16px;
        font-weight: 500;
        line-height: 12px;
        color: rgba(13, 35, 58, 1);
        padding: 17px 0 17px 0px;
        border-bottom: 0.5px solid rgba(241, 242, 243, 1);
      }

      .details_content {
        // display: flex;
        width: 90%;
        margin-top: 15px;
        font-size: 13px;
        color: rgba(110, 123, 132, 1);
        line-height: 30.29px;
        .content {
          // margin: 25px 24px 49px 49px;
          color: #677d86;
          width: 361px;
          // height: 304px;
          // line-height: 24px;
          // font-size: 16px;
          font-weight: bold;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
