<template>
  <div class="ballotpage">
    <!-- <TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead> -->
    <ReturnHead text="投票详情"></ReturnHead>
    <div class="notice">
      <div class="noticebox">
        <div class="mani">
          <div class="joininfo" style="margin-left: -8px">
            【投票】{{ data?.voteName }}
          </div>
          <div class="contenttitle">
            <img class="timeimg" src="../../assets/image/ballotpage/time.png" />
            <div class="timee">
              {{ data?.voteStartTime + " 至 " + data?.voteEndTime }}
            </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="same ba">
              <div class="samenum" style="color: #089dff">
                {{
                  data?.numberOfInvolved || data?.numberOfInvolved == 0
                    ? data?.numberOfInvolved
                    : "-"
                }}
              </div>
              <div class="samego">参与数</div>
            </div>
            <div class="same bt">
              <div class="samenum" style="color: #387df7">
                {{
                  data?.votesTotal || data?.votesTotal == 0
                    ? data?.votesTotal
                    : "-"
                }}
              </div>
              <div class="samego">总票数</div>
            </div>
            <div class="same bh">
              <div class="samenum" style="color: #00c1fc">
                {{
                  data?.numberOfBrowse || data?.numberOfBrowse == 0
                    ? data?.numberOfBrowse
                    : "-"
                }}
              </div>
              <div class="samego">浏览数</div>
            </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?.voteExplain }}
            </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-top: 15px">
            <div class="ballotjoincontainer">
              <div class="ballotjoin">
                <div
                  class="ballotitem"
                  v-for="(item, index) in data?.voteStemDtoList"
                  :key="index"
                >
                  <div class="stem">
                    {{ item.voteStemName }}
                  </div>
                  <div
                    class="upitem"
                    v-for="(elem, key) in item?.optionDetailList"
                    :key="key"
                  >
                    <div class="left">
                      <div style="display: flex; align-items: center">
                        <img
                          class="leftimg"
                          src="../../assets/image/ballotpage/left.png"
                        />
                        <div class="leftcontent">{{ elem.optionName }}</div>
                      </div>
                      <img
                        v-if="elem.optionPictureAddress"
                        :src="elem.optionPictureAddress"
                        style="
                          width: 70px;
                          height: 70px;
                          margin-left: 20px;
                          margin-top: 10px;
                        "
                      />
                    </div>
                    <button
                      class="btn"
                      :style="{
                        backgroundColor: elem.isAnswer ? '#ddd' : '#2478ff',
                      }"
                      @click="choiceQuestion(item, elem)"
                    >
                      投票
                    </button>
                  </div>
                  <!-- <div
                    :class="
                      index === data?.ballotVo?.voteStemVoList.length - 1
                        ? null
                        : 'thinline'
                    "
                  ></div> -->
                </div>
                <div
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    margin-top: 30px;
                  "
                >
                  <button
                    class="submitbtn btn01"
                    :style="{
                      background:
                        new Date().getTime() >
                          new Date(changeTime(data?.voteEndTime)).getTime() ||
                        new Date().getTime() <
                          new Date(changeTime(data?.voteStartTime)).getTime()
                          ? '#ccc'
                          : data.isSubmit
                          ? '#ccc'
                          : '',
                    }"
                    @click="submitVote(data)"
                  >
                    {{ data.isSubmit ? "已提交" : "提交" }}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, computed, onUnmounted, ref, watch } from "vue";
import ReturnHead from "@/components/ReturnHead.vue";
// import TitleHead from "@/components/TitleHead.vue";
import { useRequest, request } from "@/api/request";
import {
  VOTE_DETAIL3,
  VOTE_DETAIL_SUBMIT,
  EditVoteInvolvedAndBrowse,
  NO_COMMIT,
  checkStudentExist,
} from "@/api/api";
import dayjs from "dayjs";
import store from "@/store";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router/dist/vue-router";
import { changeTime } from "@/api/method";
const router = useRouter();
const {
  query: { courseId, chapterOrStageId, infoId, id, btype, type },
} = useRoute();
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});

const userInfo = computed(() => store.state.userInfo);
const { data } = useRequest(VOTE_DETAIL3, { voteId: courseId, type }, (e) => {
  useRequest(
    checkStudentExist,
    {
      targetId: infoId,
      type: type,
      chapterId: chapterOrStageId,
      courseId: id,
    },
    (res) => {
      console.log("判断任务是否删除", res);
      if (res.code === 7) {
        router.push({
          path: "/loseefficacy",
        });
      } else {
        if (res.code === 6) {
          router.push({
            path: "/notpath",
          });
        }
      }
    }
  );
});
// 增加浏览量
watch(data, () => {
  data.value.numberOfBrowse = Number(data.value.numberOfBrowse) + 1;
  useRequest(EditVoteInvolvedAndBrowse, {
    operationType: "2",
    voteId: data.value.id,
  },(res)=>{
    let noCommitParams = {
      beginTime: answerTime,
      chapterOrStageId: chapterOrStageId ? chapterOrStageId : 0,
      result: JSON.stringify(data.value),
      targetId: infoId, // 项目 路径图 id
      taskId: id,
      type: btype, // 1 项目  2 路径图
      voteId: data.value.id,
      voteName: data.value.voteName,
    }
    useRequest(NO_COMMIT, noCommitParams);
  });
});
console.log("投票基本信息", data);
//投票倒计时
let hour = ref(0);
let minute = ref(0);
let seconds = ref(0);
let timer = setInterval(function () {
  if (data && data.value && data.value.voteEndTime) {
    let newEndTime = changeTime(data.value.voteEndTime);
    let endTime = parseInt(new Date(newEndTime).getTime() / 1000);
    let nowTime = parseInt(new Date().getTime() / 1000);
    if (endTime > nowTime) {
      hour.value = parseInt(dayjs(newEndTime).diff(dayjs(), "minute") / 60);
      minute.value = parseInt(dayjs(newEndTime).diff(dayjs(), "minute") % 60);
      seconds.value = parseInt(
        dayjs(newEndTime).diff(dayjs(), "seconds") -
          (hour.value * 60 + minute.value) * 60
      );
    } else {
      clearInterval(timer);
    }
  }
}, 1000);

// 答题时间
const answerTime = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
// 选择题目
const choiceQuestion = (item, value) => {
  // 当已经提交过时候 不让选择题目
  if (data.value.isSubmit) {
    return;
  }
  console.log("value", value);
  item.optionDetailList?.forEach((t) => (t.isAnswer = false));
  value.isAnswer = true;
};
// 提交投票
const submitVote = () => {
  console.log("投票详情", data.value);
  let nowTime = new Date().getTime();
  let maxTime = new Date(changeTime(data.value.voteEndTime)).getTime();
  let minTime = new Date(changeTime(data.value.voteStartTime)).getTime();
  console.log(nowTime, maxTime, minTime);
  // 当未到开始时间
  if (nowTime < minTime || nowTime > maxTime) {
    ElMessage.error("未到投票开始时间");
    return;
  }

  // 当已经提交过时候 不让提交即可
  if (data.value.isSubmit) {
    return;
  }
  if (
    data.value.voteStemDtoList.some((t) =>
      t.optionDetailList.every((s) => !s.isAnswer)
    )
  ) {
    ElMessage.error("请选择投票问题后进行提交");
    return;
  }

  let obj = {
    beginTime: answerTime,
    chapterOrStageId: chapterOrStageId ? chapterOrStageId : 0,
    result: JSON.stringify(data.value),
    targetId: infoId, // 项目 路径图 id
    taskId: id,
    type: btype, // 1 项目  2 路径图
    voteId: data.value.id,
    voteName: data.value.voteName,
  };
  data.value.isSubmit = !data.value.isSubmit;
  console.log("我是投票提交的信息", obj, data);
  ElMessage.success("投票成功");
  data.value.votesTotal = Number(data.value.votesTotal) + 1;
  data.value.numberOfInvolved = Number(data.value.numberOfInvolved) + 1;
  // data.value.numberOfBrowse = Number(data.value.numberOfBrowse) + 1;
  useRequest(VOTE_DETAIL_SUBMIT, obj);
  // 增加参与数目
  useRequest(EditVoteInvolvedAndBrowse, {
    operationType: "1",
    voteId: data.value.id,
  });
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}
.ballotpage {
  width: 100%;

  .notice {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    // margin-top: -17.5px;
    // margin-top: 20px;
    .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;
        }

        .samenum {
          margin-top: 18.5px;
          position: absolute;
          font-size: 18px;
          font-weight: bold;
          left: 50%;
          transform: translate(-50%, 0);
        }
        .samego {
          margin-top: 45px;
          position: absolute;
          font-size: 13px;
          left: 50%;
          transform: translate(-50%, 0);
        }
        .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;
          .same {
            position: relative;
            width: 108px;
            height: 75px;
            // background-color: red;
          }
          .ba {
            background-image: url(../../assets/image/ballotpage/baccone.png);
          }
          .bt {
            background-image: url(../../assets/image/ballotpage/bacctwo.png);
          }
          .bh {
            background-image: url(../../assets/image/ballotpage/baccthr.png);
          }
          .ballotdetail {
            color: #6e7b84;
            line-height: 30px;
            font-size: 13px;
          }
          .ballotjoincontainer {
            display: flex;
            width: 100%;
            justify-content: center;
            .ballotjoin {
              width: 100%;
              // height:100px;
              // background-color: #bfa;
              .ballotitem {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                .stem {
                  width: 95%;
                  height: 49px;
                  background: #f2f5f7;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  font-size: 14px;
                  font-weight: bold;
                  color: #333330;
                  line-height: 24px;
                  padding-left: 5%;
                }
                .upitem {
                  width: 90%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  border-bottom: 1px solid rgba(241, 242, 243, 1);
                  padding-bottom: 13px;
                  .left {
                    display: flex;
                    flex-direction: column;
                    .leftimg {
                      width: 4.5px;
                      height: 14.5px;
                      // margin-top: 1px;
                    }
                    .leftcontent {
                      margin-left: 9px;
                      color: #6e7b84;
                      font-size: 13px;
                      line-height: 30px;
                      // margin-top: -5px;
                    }
                  }
                  .btn {
                    background-color: #2478ff;
                    color: #fff;
                    width: 64px;
                    height: 21px;
                    border-radius: 10px;
                    border: 0;
                    font-size: 12px;
                    line-height: 19px;
                    margin-top: -1px;
                  }
                }
                .thinline {
                  width: 100%;
                  border-top: 1px solid #f1f2f3;
                  margin-top: 17px;
                  margin-bottom: 17px;
                }
              }
              .submitbtn {
                width: 73px;
                height: 30px;
                background: #2478ff;
                box-shadow: 0px 1px 4px 0px rgba(56, 125, 247, 0.7);
                border-radius: 2px;
                // width: 66px;
                font-size: 14px;
                font-weight: 800;
                color: #ffffff;
                line-height: 24px;
                border: 0;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
}
</style>
