<template>
  <div class="homeworkpage">
    <ReturnHead text="作业详情"></ReturnHead>

    <div class="notice">
      <div class="noticebox">
        <div class="mani">
          <div class="joininfo">{{ data?.workName }}</div>
          <div class="contenttitle">
            <img class="timeimg" src="../../assets/image/ballotpage/time.png" />
            <div class="timee">
              {{ data?.submitStartTime }}至{{ data?.submitEndTime }}
            </div>
          </div>
          <div class="timebox">
            <div class="samez" style="margin-left: 18px">
              {{ hour }}
            </div>
            <div class="samey">时</div>
            <div class="samez">
              {{ minute }}
            </div>
            <div class="samey">分</div>
            <div class="samez">
              {{ seconds }}
            </div>
            <div class="samey">秒</div>
          </div>
        </div>
      </div>
    </div>

    <div class="notice">
      <div class="noticebox">
        <div class="mani">
          <div class="joininfo">作业详情</div>
          <div class="line"></div>
          <div class="contentone">
            <div class="ballotdetail">
              {{ data?.workRequirement }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="notice">
      <div class="noticebox">
        <div class="mani">
          <div class="joininfo">历史纪录</div>
          <div class="line"></div>
          <div class="contentone" style="margin-bottom: 10px">
            <div class="hiscon">
              <div
                class="historyitem clearfix"
                v-for="(item, index) in submitList"
                :key="index"
                :style="index % 2 !== 0 ? null : 'background-color:#F2F5F7'"
              >
                <div class="itemtime">{{ item.createTime }}</div>
                <div style="display: flex; align-items: center">
                  <div class="itemtitle" :title="item.workUploadContent">
                    {{ item.workUploadContent }}
                    {{
                      item.workUploadAddress ? "-" + item.workUploadAddress : ""
                    }}
                  </div>
                  <img
                    v-if="item.workUploadAddress"
                    style="width: 18px; height: 18px; margin-right: 10px"
                    src="../../assets/image/urlImg.png"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="btnc" @click="dohomework">
            <button class="btncc">交作业</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  computed,
  onUnmounted,
  onBeforeUnmount,
  reactive,
  ref,
  toRefs,
  watch,
} from "vue";
import { request, useRequest } from "@/api/request";
import {
  TASK_WORK_COMMIT,
  TASK_WORK_DETAIL,
  TASK_WORK_SUBMIT_LIST,
  WORK_HISTROY,
} from "@/api/api";
import dayjs from "dayjs";
import { useRouter } from "vue-router";
// import UploadImg from "@/components/img/UploadImg.vue";
import FileTypeImg from "@/components/FileTypeImg.vue";
import { useRoute } from "vue-router/dist/vue-router";
import { ElMessage, ElLoading } from "element-plus";
import ReturnHead from "@/components/ReturnHead.vue";
const fileList = ref([]);
// const fielPath = ref(import.meta.env.VITE_FILE_PATH);
const uploadRef = ref();

const centerDialogVisible = ref(false);
const sbValue = ref({
  content: "",
  attach: "",
});
const router = useRouter();
const returnclick = () => {
  router.back();
};
const {
  query: { courseId: workId, type, id: taskId, infoId },
} = useRoute();
// 从报错信息来看 是因为内部 把这个组件看成了个异步组件  中间有代码是异步执行的  导致unmounted执行的时机不对。。放上面就好了
onBeforeUnmount(() => {
  console.log("清除定时器");
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});
// console.log("type", type);
const loading = ref(false); // loading
const openLoading = () => {
  loading.value = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
};
openLoading();
const closeLoading = () => {
  loading.value.close();
};

const { data } =
  taskId && taskId !== "undefined"
    ? useRequest(TASK_WORK_DETAIL, { workId, taskId, type }, (e) => {
        closeLoading();
        if (e.code === 6) {
          console.log("作业判断", e);
          router.push({
            path: "/notpath",
          });
        }
      })
    : useRequest(TASK_WORK_DETAIL, { workId, type }, (e) => {
        closeLoading();
        if (e.code === 6) {
          console.log("作业判断", e);
          router.push({
            path: "/notpath",
          });
        }
      });

console.log("data==----->", data);
//作业倒计时
const state = reactive({
  hour: 0,
  minute: 0,
  seconds: 0,
});
const { hour, minute, seconds } = toRefs(state);

let timer = setInterval(() => {
  console.log("endTime", data.value.submitEndTime);
  if (data && data.value.submitEndTime) {
    let endTime = parseInt(new Date(data.value.submitEndTime).getTime() / 1000);
    let nowTime = parseInt(new Date().getTime() / 1000);
    console.log("endTime222", endTime, nowTime);
    if (endTime > nowTime) {
      state.hour = parseInt(
        dayjs(data.value.submitEndTime).diff(dayjs(), "minute") / 60
      );
      state.minute = parseInt(
        dayjs(data.value.submitEndTime).diff(dayjs(), "minute") % 60
      );
      state.seconds = parseInt(
        dayjs(data.value.submitEndTime).diff(dayjs(), "seconds") -
          (state.hour * 60 + state.minute) * 60
      );
    } else {
      clearInterval(timer);
    }
  }
}, 1000);

const { data: submitList } = useRequest(TASK_WORK_SUBMIT_LIST, {
  workerId: workId,
});
console.log("submitList==----->", submitList);
//交作业
const dohomework = () => {
  console.log("workId", workId, type, taskId);
  router.push({
    path: "/uploadwork",
    query: { type: type, workId: workId, taskId: taskId },
  });
};
// const open = () => {
//   centerDialogVisible.value = true;
// };
// const showFileList = computed(() => {
//   return fileList.value.length;
// });

// const handleClick = () => {
//   console.log(fileList.value, uploadRef.value);
//   if (!sbValue.value.content) {
//     if (fileList.value.length === 0) {
//       return ElMessage.warning("请输入作业内容");
//     }
//   }
//   request(TASK_WORK_COMMIT, {
//     projectOrRouterLogo: type,
//     workUploadContent: sbValue.value.content,
//     workUploadAddress: fileList.value.map((e) => e.url).join(",") || "",
//     workId,
//     type,
//     taskId: taskId || infoId,
//   }).then((res) => {
//     console.log(res);
//     submitList.value.unshift(res.data);
//     open();
//     sbValue.value.content = "";
//     fileList.value = [];
//     remove(0);
//     clearFiles();
//   });
// };

// function clearFiles() {
//   uploadRef.value.clearFiles();
// }

// function remove(i) {
//   uploadRef.value.remove(i);
// }

// function reUpload(i) {
//   uploadRef.value.reUpload(i);
// }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}
.homeworkpage {
  width: 100%;
  padding-bottom: 20px;
  .notice {
    width: 100%;
    display: flex;
    justify-content: center;
    // margin-top: -17.5px;
    margin-top: 10px;
    .noticebox {
      width: 100%;
      background: #fff;
      // border-radius: 4px;
      position: relative;
      display: flex;
      justify-content: center;
      .line {
        width: 100%;
        height: 0;
        border-top: 1px solid #f1f2f3;
        margin-top: 17px;
        position: absolute;
        left: 0;
      }
      .mani {
        width: 90%;
        margin-top: 20px;
        // position:relative;
        .joininfo {
          color: #0d233a;
          font-size: 16px;
          font-weight: bold;
        }

        .contenttitle {
          width: 100%;
          // height:10px;
          margin-top: 15px;
          // background-color: #bfa;
          display: flex;
          .timeimg {
            width: 12.8px;
            height: 13px;
          }
          .timee {
            color: #6e7b84;
            font-size: 14px;
            line-height: 13px;
            margin-left: 6px;
          }
        }
        .timebox {
          display: flex;
          width: 100%;
          height: 49px;
          background-color: #f2f5f7;
          margin-top: 17.5px;
          margin-bottom: 27.5px;
          border-radius: 10px;
          .samez {
            color: #0060ff;
            font-size: 18px;
            line-height: 49px;
            margin-left: 13px;
          }
          .samey {
            color: #6e7b84;
            font-size: 14px;
            line-height: 49px;

            margin-left: 13px;
          }
        }
        .contentone {
          margin-top: 43px;
          display: flex;
          justify-content: space-between;
          width: 100%;
          margin-bottom: 20px;
          // height: 200px;

          .ballotdetail {
            color: #6e7b84;
            line-height: 30px;
            font-size: 13px;
          }
          .hiscon {
            width: 100%;
            .historyitem {
              // margin-left: 21px;
              width: 100%;
              border-radius: 4px;
              .itemtime {
                color: #6e7b84;
                margin-left: 21px;
                font-size: 12px;
                margin-top: 11px;
              }
              .itemtitle {
                line-height: 22px;
                font-size: 13px;
                color: #333330;
                margin: 10.5px 0 10.5px 21px;
                width: 90%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
        .btnc {
          width: 100%;
          display: flex;
          justify-content: center;
          .btncc {
            margin-bottom: 19px;
            height: 33px;
            width: 88%;
            border: 0;
            background-color: #2478ff;
            border-radius: 6px;
            color: #fff;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
