<template>
  <div class="Investigat">
    <!-- <TitleHead text="【调研】管理者进阶腾飞班 - 培训阶段性调研"></TitleHead> -->
    <ReturnHead text="评估详情"></ReturnHead>
    <div class="header_wrap" v-if="data?.projectInfoList && data?.falseS && type != 1">
      <div v-if="level != 0 && data?.projectInfoList[0]?.projectName">项目名称：{{ data?.projectInfoList[0]?.projectName || '' }}</div>
      <div v-if="data?.projectInfoList[0]?.courseName">开课名称：{{ data.projectInfoList[0]?.courseName || '' }}</div>
      <div v-if="data?.projectInfoList[0]?.teacherName">培训讲师：{{ data?.projectInfoList.map(item => item?.teacherName).join('，') }}</div>
    </div>
    <div class="notice">
      <div class="noticebox">
        <div class="mani">
          <div
            class="question"
            v-for="(value, index) in questionList"
            :key="index"
            :style="{ 'margin-top': '20px' }"
          >
            <div v-if="value.questionType == '4'">
              <div class="text">{{ value.assessmentScTitle }}</div>
              <div class="answerLcontainer">
                <div class="answerL">
                  <div>{{value.minimumEvaluation?value.minimumEvaluation:'完全没用'}}</div>
                  <div>{{value.highestEvaluation?value.highestEvaluation:'非常有帮助/启发'}}</div>
                </div>
              </div>
              <div class="answer">
                <div class="answerC">
                  <div class="itemwrap">
                    <div
                      class="answerCitem"
                      v-for="(item, key) in orderArr(
                        value.assessmentMinScore,
                        value.assessmentMaxScore
                      )"
                      :key="key"
                      :style="{
                        background:
                          value.selectAnswer === item + 1
                            ? 'rgba(86, 163, 249, 1)'
                            : 'rgba(86, 163, 249, 0)',
                        color:
                          value.selectAnswer === item + 1
                            ? '#fff'
                            : 'rgba(86, 163, 249, 1)',
                      }"
                      @click="
                        () => {
                          if (data.isSubmit) {
                            return;
                          }
                          value.selectAnswer = item + 1;
                        }
                      "
                    >
                      <div>{{ item + 1 }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else-if="value.questionType == '1'">
              <div class="question" style="margin-top: 20px">
                <div class="text">{{ value?.singleStemName }}</div>
                <div
                  v-for="(values, indexs) in value.assessmentSingleChoiceVoList"
                  :key="indexs"
                  :style="{ 'margin-top': '22px' }"
                  @click="
                    () => {
                      if (data.isSubmit) {
                        return;
                      }
                      value.assessmentSingleChoiceVoList.forEach((e) => {
                        e.select = false;
                      });
                      values.select = true;
                    }
                  "
                >
                  <div style="display: flex; align-items: center">
                    <img
                      style="width: 14px; height: 14px"
                      :src="values.select ? checkbox : checkbox2"
                    />
                    <div
                      class="people"
                      style="
                        font-size: 13px;
                        margin-left: 7px;
                        margin-top: -2.5px;
                      "
                    >
                      {{ values.singleOptionName }}
                    </div>
                  </div>
                  <img
                    v-if="values.singleOptionPictureAddress"
                    :src="fielPath + values.singleOptionPictureAddress"
                    style="
                      width: 70px;
                      height: 70px;
                      margin-left: 20px;
                      margin-top: 10px;
                    "
                  />
                </div>
              </div>
            </div>
            <div v-else-if="value.questionType == '2'">
              <div class="question" style="margin-top: 20px">
                <div class="text">{{ value?.multipleStemName }}</div>
                <div
                  v-for="(values, indexs) in value.multipleChoiceVoList"
                  :key="indexs"
                  :style="{ 'margin-top': '22px' }"
                  @click="
                    () => {
                      if (data.isSubmit) {
                        return;
                      }
                      values.select = !values.select;
                    }
                  "
                >
                  <div style="display: flex; align-items: center">
                    <img
                      style="width: 14px; height: 14px"
                      :src="values.select ? checkbox : checkbox2"
                    />
                    <div
                      class="people"
                      style="
                        font-size: 13px;
                        margin-left: 7px;
                        margin-top: -2.5px;
                      "
                    >
                      {{ values.multipleOptionName }}
                    </div>
                  </div>
                  <img
                    v-if="values.multipleOptionPictureAddress"
                    :src="
                      values.multipleOptionPictureAddress
                        ? fielPath + values.multipleOptionPictureAddress
                        : ''
                    "
                    style="
                      width: 70px;
                      height: 70px;
                      margin-left: 20px;
                      margin-top: 10px;
                    "
                  />
                </div>
              </div>
            </div>
            <div v-else-if="value.questionType == '3'">
              <div class="question" style="margin-top: 21px">
                <div class="text">{{ value.assessmentQaTitle }}</div>
                <div style="margin-top: 21px; position: relative">
                  <div class="inputcon">
                    <el-input
                      style="width: 87%"
                      v-model="value.content"
                      :autosize="{ minRows: 5, maxRows: 5 }"
                      resize="none"
                      maxlength="200"
                      type="textarea"
                      :readonly="!!data.isSubmit"
                    />
                  </div>
                  <div class="words">{{ value.content?.length || 0 }}/200</div>
                </div>
              </div>
            </div>
          </div>

          <div
            style="display: flex; justify-content: center; width: 100%"
            v-if="
              data.essayQuestionVoList?.length ||
              data.multipleStemVoList?.length ||
              data.scoringQuestionVoList?.length ||
              data.singleStemVoList?.length
            "
          >
            <div
              v-if="projectStatus && projectEndTime"
              style="width: 100%; display: flex; justify-content: center"
            >
              <div
                v-if="
                  projectStatus !== '3' &&
                  new Date(changeTime(projectEndTime)).getTime() >
                    new Date().getTime()
                "
                class="submit"
                @click="emptyValuePromp"
                :style="{ background: data.isSubmit ? '#999' : '#2478ff' }"
              >
                提交
              </div>
            </div>
            <div
              v-else
              style="width: 100%; display: flex; justify-content: center"
            >
              <div
                class="submit"
                @click="emptyValuePromp"
                :style="{ background: data.isSubmit ? '#999' : '#2478ff' }"
              >
                提交
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="centerDialogVisible" title="" width="70%" center :show-close="false" :align-center="true">
    <div style="text-align: center;font-size:16px;"> <span style="color:black">
				您已完成评估
			</span></div>
    <template #footer>
			<span class="dialog-footer">
				<el-button class="cancel"
                   style="color: #387DF7; border: 1px solid #387DF7;padding: 8px 32px; border-radius: 4px;"
                   @click="centerDialogVisible = false">取消</el-button>
				<el-button class="back"
                   style="background: #387DF7;box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);border: 0px;padding: 8px 32px;"
                   type="primary" @click="centerDialogVisible = false">
					确定
				</el-button>
			</span>
    </template>
  </el-dialog>
   <!-- 提示用户有未填选项 -->
   <el-dialog v-model="isEmptyValue" title="" width="70%" center :show-close="false" :align-center="true">
    <div style="text-align: center;font-size:12px;"> <span style="color:black">
      您还有未完成的评估题目，请继续完成！
			</span></div>
    <template #footer>
			<span class="dialog-footer">
				<el-button class="cancel"
                   style="color: #387DF7; border: 1px solid #387DF7;padding: 8px 32px; border-radius: 4px;"
                   @click="isEmptyValue = false">取消</el-button>
				<el-button class="back"
                   style="background: #387DF7;box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);border: 0px;padding: 8px 32px;"
                   type="primary" @click="isEmptyValue = false">
					确定
				</el-button>
			</span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, toRefs, watch,onMounted } from "vue";
import checkbox from "@/assets/image/checkbox.png";
import checkbox2 from "@/assets/image/checkbox2.png";
import { useRoute, useRouter } from "vue-router/dist/vue-router";
import { request, usePage, useRequest } from "@/api/request";
import {
  ASSESSMENT_QUERY,
  ASSESSMENT_SUBMIT,
  TASK_NO_COMMIT,
  checkStudentExist,
} from "@/api/api";
import { ElMessage } from "element-plus";
import ReturnHead from "@/components/ReturnHead.vue";
import dayjs from "dayjs";
import { changeTime } from "@/api/method";
const fielPath = ref(import.meta.env.VITE_FILE_PATH);
const {
  query: {
    courseId,
    id: taskId,
    infoId,
    type,
    chapterOrStageId,
    projectStatus,
    projectEndTime,
    isSubmitTrue,
    level
  },
} = useRoute();
const router = useRouter();
const returnclick = () => {
  clearInterval(timers);
  router.back();
};

const { data } = useRequest(
  ASSESSMENT_QUERY(courseId),
  {
    id: courseId,
    type,
    chapterOrStageId,
    targetId: infoId ? infoId : 0,
  },(res)=>{
    if(res.data.projectInfoList.length == 0){
      res.data.projectInfoList=[
        {teacherName: '', courseName: '', projectName: ''}
      ]
      res.data.falseS = false
    }else{
      res.data.falseS = true
    }
    if (res.code === 6) {
      router.push({
        path: "/NotProject2",
      });
    } },
  (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("我是查询评估的参数", {
  id: courseId,
  type,
  chapterOrStageId,
  targetId: infoId ? infoId : 0,
});
console.log("我是需要排序得题目", data);

// 答题时间
const answerTime = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");

console.log("录入首次进入页面时间", answerTime);

// 数组去空对象
function formateArr(datas) {
  let allArr = [];
  for (let i = 0; i < datas.length; i++) {
    for (let j = 0; j < datas[i].length; j++) {
      allArr.push(datas[i][j]);
    }
  }
  let newarr = allArr.sort((a, b) => {
    return a.orderNumber - b.orderNumber;
  });
  console.log("我是排序后的题目", newarr);
  return newarr;
}

const questionList = ref([]);

const timers = setInterval(() => {
  console.log(data);
  console.log(data.value.id);
  if (data.value.id) {
    clearInterval(timers);
    console.log([
      data.value.essayQuestionVoList,
      data.value.multipleStemVoList,
      data.value.scoringQuestionVoList,
      data.value.singleStemVoList,
    ]);
    questionList.value = formateArr([
      data.value.essayQuestionVoList,
      data.value.multipleStemVoList,
      data.value.scoringQuestionVoList,
      data.value.singleStemVoList,
    ]);
  }
}, 1000);

setTimeout(() => {
  clearInterval(timers);
}, 30000);

// 生成数组
function orderArr(a, b) {
  let arrs = [];
  for (let i = 0; i < 10; i++) {
    if (i + 1 >= a && i + 1 <= b) {
      arrs.push(i);
    }
  }
  return arrs;
}
onMounted(() => {
  if(isSubmitTrue==true){
    open();
    return
  }
  useRequest(
  ASSESSMENT_QUERY(courseId),{
    id: courseId,
    type,
    chapterOrStageId,
    targetId: infoId ? infoId : 0,
  },(res)=>{
    useRequest(TASK_NO_COMMIT, {
      targetId: infoId ? infoId : 0, // 项目、路径图或开课的Id
      chapterOrStageId: chapterOrStageId ? chapterOrStageId : 0, //  关卡或者阶段Id  关卡Id不允许为空
      assessmentId: courseId,
      taskId: taskId ? taskId : 0,
      type,
      result: JSON.stringify(data.value),
      beginTime: answerTime,
    })
    if (res.data.isSubmit) {
      open();
    }   
  })
  console.log(data,'data')
});
const centerDialogVisible = ref(false);
const open = () => {
  centerDialogVisible.value = true;
};

const isEmptyValue = ref(false);
function emptyValuePromp() {
  if (data.value.isSubmit) {
    return;
  }
  if (data.value.singleStemVoList?.some(t=>t?.assessmentSingleChoiceVoList?.every(s => !s?.select))) {
    isEmptyValue.value = true;
    // return ElMessage.warning("您有未填写的单选评估题干");
  }
  if (data.value.multipleStemVoList?.some(t=>t?.multipleChoiceVoList?.every(s => !s?.select))) {
    isEmptyValue.value = true;
    // return ElMessage.warning("您有未填写的多选评估题干");
  }
  if (data.value.scoringQuestionVoList?.some(s => !s?.selectAnswer)) {
    isEmptyValue.value = true;
    // return ElMessage.warning("您有未填写的评分评估题干");
  }
  if (data.value.essayQuestionVoList?.some(s => !s?.content)) {
    isEmptyValue.value = true;
    // return ElMessage.warning("您有未填写的简答评估题干");
  }
  if(!isEmptyValue.value){
    submit()
  }
}


function submit() {
  console.log("录入首次进入页面时间", answerTime);
  if (data.value.isSubmit) {
    return;
  }
  console.log("data.value", data.value);

  data.value.isSubmit = !data.value.isSubmit;
  ElMessage.success("提交成功");
  request(ASSESSMENT_SUBMIT, {
    targetId: infoId ? infoId : 0, // 项目、路径图或开课的Id
    chapterOrStageId: chapterOrStageId ? chapterOrStageId : 0, //  关卡或者阶段Id  关卡Id不允许为空
    assessmentId: courseId,
    taskId: taskId ? taskId : 0,
    type,
    result: JSON.stringify(data.value),
    beginTime: answerTime,
  }).then(() => {
    isEmptyValue.value = false;
    open();
  });
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.header_wrap{
    padding: 15px 0 5px 10px;
    background: #fff;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}
.Investigat {
  width: 100%;
  padding-bottom: 20px;
  .notice {
    width: 100%;
    display: flex;
    justify-content: center;
    // margin-top: -17.5px;
    //margin-top: 10px;
    .noticebox {
      // width: 90%;
      width: 100%;
      background: #fff;
      border-radius: 4px;
      position: relative;
      display: flex;
      justify-content: center;
      .mani {
        width: 90%;
        // margin-top: 20px;

        .dir {
          width: 100%;
          height: 20px;
          // background-color: red;
          margin-bottom: 20px;
          display: flex;
          justify-content: right;
          font-size: 12px;
          color: #2478ff;
          .samegt {
            margin-top: 3px;
            height: 12px;
            width: 12px;
          }
          .samege {
            line-height: 12px;
          }
          .pre {
            margin-right: 5px;
            // background-size: 100%;
            background-image: url(../../assets/image/ballotpage/pre.png);
          }
          .next {
            margin-left: 5px;
            // background-size: 100%;
            background-image: url(../../assets/image/ballotpage/next.png);
          }
        }
        .conn {
          width: 100%;
          display: flex;
          justify-content: right;
          // background-color:yellow;
          .peoplecontainer {
            // background-color: yellowgreen;
            display: flex;
            width: 94%;
          }
        }
        .question {
          .text {
            font-size: 14px;
            font-weight: 500;
            color: #333330;
          }
          .answerLcontainer {
            width: 100%;
            display: flex;
            justify-content: center;
            .answerL {
              width: 87%;
              margin-bottom: -20px;
              margin-top: 12px;
              font-size: 13px;
              // width: 100%;
              color: #56a3f9;
              display: flex;
              justify-content: space-between;
            }
          }
          .answer {
            margin-top: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 500;
            color: #56a3f9;
            .answerC {
              // width: 540px;
              // width: 100%;
              width: 86%;
              height: 43px;
              border: 1px solid #d7e5fd;
              border-radius: 8px;
              display: flex;
              align-items: center;
              // margin-left: 11px;
              // margin-right: 11px;
              justify-content: center;
              .itemwrap {
                width: 92%;
                display: flex;
                justify-content: space-between;
                .answerCitem {
                  width: 24px;
                  height: 24px;
                  border: 1px solid #56a3f9;
                  border-radius: 4px;
                  font-size: 14px;
                  font-weight: 400;
                  color: #ffffff;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  // margin-left: 10px;
                }
              }
            }
          }
        }

        .question .answer .question .people {
          font-size: 13px;
          font-weight: 500;
          color: #333330;
          margin-left: 6px;
        }
        .question .words {
          position: absolute;
          right: 35px;
          bottom: 10px;
          font-size: 14px;
          font-weight: 500;
          color: #333330;
        }
        .inputcon {
          width: 100%;
          display: flex;
          justify-content: center;
        }

        .question .el-textarea__inner {
          border-radius: 8px;
          background-color: rgba(245, 246, 247, 1);
        }
        .submit {
          // width: 126px;
          width: 87%;
          height: 31.5px;
          background: #2478ff;
          box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
          border-radius: 4px;
          font-size: 14px;
          font-weight: 800;
          color: #ffffff;
          line-height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 10.5px;
          margin-bottom: 30px;
        }
      }
    }
  }
}
</style>
