<template>
  <div style=" background: #0078fc;height: 150px;width: 100%;position: absolute;top: 0;z-index:-9999;"></div>
  <div class="surveydetail" style="padding: 30px">
    <!-- 面包屑导航 -->
    <div style="display: flex; align-items: center; justify-content: space-between">
      <div class="crumb">
        <div>{{ pName }}</div>
        <div style="margin-left: 6px; margin-right: 6px">/</div>
        <div>{{ sName }}</div>
        <div v-if="sName" style="margin-left: 6px; margin-right: 6px">/</div>
        <div style="font-weight: 700; font-size: 16px">评估详情</div>
      </div>
      <div class="preNext">
		   <span @click="prevPage" v-if="hasPrev">
          <button class="btn btn01"></button>
          <span class="content" style="margin-left: 6px">上一个</span>
       </span>
        <span @click="nextPage" v-if="hasNext">
          <span class="content" style="margin-left: 31px">下一个</span>
          <button class="btn btn02" style="margin-left: 6px"></button>
        </span>
      </div>
      <div class="return">
        <div style="display: flex" @click="returnclick">
          <el-button style="color:#0073FB"><img class="img2" style="margin-right:11px;cursor: pointer;"
                                                src="../../assets/image/return.png"/>返回
          </el-button>
        </div>
      </div>
    </div>
    <!-- 面包屑导航 -->
    <!-- 标题 -->
    <div class="title">【评估】{{ data?.assessmentName }}</div>
    <!-- 标题 -->
    <!-- 基本信息 -->
    <div class="bascinfo">
      <div class="header_wrap" v-if="data?.projectInfoList&&data?.projectInfoList.length!=0&&type!=1">
        <div class="header_wrap_item" v-if="level!=0">项目名称：{{ data?.projectInfoList[0].projectName }}</div>
        <div class="header_wrap_item">开课名称：{{ data?.projectInfoList[0].courseName }}</div>
        <div>培训讲师：{{ data?.projectInfoList.map(item => item.teacherName).join('，') }}</div>
      </div>
      <div>
        <div class="question" v-for="(value, index) in  questionList " :key="index"
             :style="{ 'margin-top': index === 0 ? '57px' : '41px' }">
          <div v-if="value.questionType == '4'">
            <div class="question" :style="{ 'margin-top': index === 0 ? '57px' : '41px' }">
              <div class="text">{{ value.assessmentScTitle }}</div>
              <div class="answer">
                <div class="answerL">{{value.minimumEvaluation?value.minimumEvaluation:'完全没用'}}</div>
                <div class="answerC">
                  <div class="answerCitem"
                       v-for="(item, key) in orderArr(value.assessmentMinScore,value.assessmentMaxScore)"
                       :key="key"
                       :style="{
											'margin-left': key === 0 ? '15px' : '10px',
											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 class="answerR">{{value.highestEvaluation?value.highestEvaluation:'非常有帮助/启发'}}</div>
              </div>
            </div>
          </div>

          <div v-else-if="value.questionType == '1'">
            <div class="question" style="margin-top: 41px">
              <div class="text">
                {{ value?.singleStemName }}
              </div>
              <!-- 需要遍历的选项 -->
              <div style="display:flex;justify-content:flex-start;align-items:flex-start;margin-top: 24px;flex-direction: column;">
                <div
                  v-for="(values, indexs) in value.assessmentSingleChoiceVoList"
                  :key="indexs"
                  style="display: flex; align-items: center;cursor: pointer;flex-direction: column;"
                  @click="
										() => {
											if (data?.isSubmit) {
												return;
											}
											value.assessmentSingleChoiceVoList.forEach((e) => e.select = false);
											values.select = true;
                    }
									">
                  <div style="display:flex">
                    <img style="width: 19px; height: 18px; cursor: pointer"
                         :src="values.select ? checkbox : checkbox2"/>
                    <div class="people" style="width: 800px;">{{ values.singleOptionName }}</div>
                  </div>
                  <div style="display: flex;justify-content:flex-start;align-items:center;width: 100%;">
                    <img v-if="values.singleOptionPictureAddress"
                       style="width: 140px; height: 140px; border-radius: 8px;margin-left: 30px;margin-top: 12px;margin-bottom: 12px;"
                       :src="values.singleOptionPictureAddress ? fielPath + values.singleOptionPictureAddress : ''"/>
                    <div v-else style="width: 140px;height: 140px;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div v-else-if="value.questionType == '2'">
            <div class="question" style="margin-top: 41px">
              <div class="text">
                {{ value?.multipleStemName }}
              </div>
              <!-- 需要遍历的选项 -->
              <div style="display:flex;justify-content:flex-start;align-items:flex-start;margin-top: 24px;flex-direction: column;">
                <div
                  v-for="(values, indexs) in value.multipleChoiceVoList"
                  :key="indexs"
                  style="display: flex; align-items: center;cursor: pointer;flex-direction: column;"
                  @click="
									() => {
										if (data?.isSubmit) {
											return;
										}
										values.select = !values.select;
									}">
                  <div style="display:flex">
                    <img style="width: 19px; height: 18px; cursor: pointer"
                         :src="values.select ? checkbox : checkbox2"/>
                    <div class="people" style="width:800px;">{{ values.multipleOptionName }}</div>
                  </div>
                  <img v-if="values.multipleOptionPictureAddress"
                       style="width: 140px; height: 140px; border-radius: 8px;margin-left: 130px;margin-top: 12px;"
                       :src="values.multipleOptionPictureAddress ? fielPath + values.multipleOptionPictureAddress : ''"/>
                  <div v-else style="width: 140px;height: 140px;"></div>
                </div>
              </div>
            </div>
          </div>

          <div v-else-if="value.questionType == '3'">
            <div class="question" style="margin-top: 41px">
              <div class="text">{{ value.assessmentQaTitle }}</div>
              <div style="width: 713px; margin-top: 31px; position: relative">
                <el-input v-model="value.content" :autosize="{ minRows: 5, maxRows: 5 }" resize="none" maxlength="200"
                          type="textarea" :readonly="!!data?.isSubmit"/>
                <div class="words">{{ value.content?.length || 0 }}/200</div>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex; justify-content: center" v-if="
          data?.essayQuestionVoList?.length ||
          data?.multipleStemVoList?.length ||
          data?.scoringQuestionVoList?.length ||
          data?.singleStemVoList?.length
">
          <div v-if="projectStatus && projectEndTime">
            <div v-if="projectStatus !=='3' && new Date(projectEndTime).getTime() > new Date().getTime()" class="submit"
                 @click="emptyValuePromp" :style="{ background: data?.isSubmit ? '#999' : '#2478ff' }">
              提交
            </div>
          </div>
          <div v-else>
            <div class="submit" @click="emptyValuePromp" :style="{ background: data?.isSubmit ? '#999' : '#2478ff' }">
              提交
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 基本信息 -->
  </div>
  <el-dialog v-model="centerDialogVisible" title="" width="20%" 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="returnclick">
					返回
				</el-button>
			</span>
    </template>
  </el-dialog>
  <!-- 提示用户有未填选项 -->
  <el-dialog v-model="isEmptyValue" title="" width="20%" 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="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>
  <!-- 可编辑名称 -->
  <el-dialog @open="onDialogOpen" v-model="bg_name" title="" width="20%" center :show-close="false" :align-center="true">
    <div style="text-align: center;font-size:16px;">
      <el-input ref="inputElement" @focus="focusInput" v-model="nameInput" placeholder="请输入内容"></el-input>
    </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="of_name">取消</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="nameUpdata">
					确定
				</el-button>
			</span>
    </template>
  </el-dialog>
  
</template>
<script setup>
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} from "@/api/api";
import {ElMessage} from "element-plus";
import {ref, watch,onMounted,nextTick } from "vue";
import dayjs from "dayjs";
import {useTaskPage} from "@/api/useCommon";

const {
  query: { courseId, id: taskId, infoId, type, pName, sName, chapterOrStageId, projectStatus, projectEndTime,isSubmitTrue,level },
} = useRoute();
const router = useRouter();
const returnclick = () => {
  router.back();
};
const { nextPage, prevPage, hasPrev, hasNext } = type == 3 || type == 4 ? "" : useTaskPage();
const fielPath = ref(import.meta.env.VITE_FILE_PATH);
const { data } = useRequest(ASSESSMENT_QUERY(courseId), {
  id: courseId,
  type,
  chapterOrStageId,
  targetId: infoId ? infoId : 0
});
console.log(data,'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;
  });
  return newarr;
}

const questionList = ref([]);

watch(data, ()=> {
  if (data.value.id) {
    questionList.value = formateArr([data.value.essayQuestionVoList, data.value.multipleStemVoList, data.value.scoringQuestionVoList, data.value.singleStemVoList]);
  }
});

// 生成数组
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();
  }
})
});
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);
  data.value.isSubmit = !data.value.isSubmit;
  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>
<style lang="scss">
.selectonlineface{
    z-index: 999;
    width: 679px;
    background: #ffffff;
    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
    position: absolute;
    left: 50%;
    top: -100%;
    transform: translate(-50%, -50%);
    .bg_headers {
      position: absolute;
      width: 100%;
      height: 40px;
      background: linear-gradient(
        rgba(78, 166, 255, 0.2) 0%,
        rgba(78, 166, 255, 0) 100%
      );
    }
    .bg_main {
      width: 100%;
      position: relative;
      .bg_main_header {
        display: flex;
        align-items: center;
        padding-top: 20px;
        padding-left: 26px;
        font-size: 16px;
        .bg_main_header_icon {
          width: 16px;
          height: 16px;
          margin-right: 10px;
          // background-image: url(@/assets/images/evaluation/uploads.png);
          background-size: 100% 100%;
        }
        .bg_main_header_close {
          position: absolute;
          right: 42px;
          cursor: pointer;
          width: 20px;
          height: 20px;
          // background-image: url(@/assets/images/coursewareManage/close.png);
          background-size: 100% 100%;
        }
      }
      .text_color{
        color:#d9d9d9;
      }
      .bg_body {
        width: 80%;
        margin: 3px auto;

        .bg_body_bt {
          display: flex;
          align-items: center;
          justify-content: end;
          margin: 14px auto;

          .bg_body_bttext {
            width: 110px;
            display: flex;
            justify-content: end;
            margin-right: 20px;
            .bg_body_btimg{
              width: 10px;
              height: 10px;
              margin-top: -3px;
              margin-right: 6px;
              background-size: 100% 100%;
            }
          }
          .mbl_items12 {
            // width: 300px;
            margin-left: 128px;

            .i12_box1 {
              display: flex;
              align-items: center;
              padding: 17px 0px 17px 21px;
              border: 1px solid #eff4fc;
              border-radius: 8px;
              margin-bottom: 10px;

              .file_img {
                width: 27px;
                height: 32px;
                // background-image: url(@/assets/images/coursewareManage/imgs.png);
                margin-right: 22px;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              .file_detail {
                width: 250px;
                margin-right: 21px;

                .file_updata {
                  display: flex;
                  align-items: center;

                  .updatabox {
                    position: relative;
                    width: 230px;
                    height: 5px;
                    background-color: rgba(192, 192, 192, 0.25);
                    border-radius: 3px;

                    .updatacolor {
                      position: absolute;
                      left: 0;
                      width: 100%;
                      height: 5px;
                      background-color: #57c887;
                      border-radius: 3px;
                    }

                    .updatacolor2 {
                      position: absolute;
                      left: 0;
                      width: 80%;
                      height: 5px;
                      background-color: #ff7474;
                      border-radius: 3px;
                    }

                    .updatacolor3 {
                      position: absolute;
                      left: 0;
                      width: 60%;
                      height: 5px;
                      background-color: #4ea6ff;
                      border-radius: 3px;
                    }

                    .updataxq {
                      position: absolute;
                      right: 2px;
                      top: -30px;
                      color: #57c887;
                    }

                    .updataxq2 {
                      position: absolute;
                      right: 2px;
                      top: -30px;
                      color: #ff7474;
                    }

                    .updataxq3 {
                      position: absolute;
                      right: 2px;
                      top: -30px;
                      color: #4ea6ff;
                    }
                  }
                }
              }

              .file_operation {
                display: flex;

                .fobox {
                  margin-right: 5px;
                  cursor: pointer;
                }
              }
            }
          }
        }
        .bg_body_input {
          flex: 1;
          position: relative;
          .ant-upload-picture-card-wrapper{
            width: 200px;
            margin-right: 18px;
          }
          .i_upload_img {
              width: 200px;
              height: 112px;
            }
            ::v-deep .ant-upload.ant-upload-select-picture-card{
              width: 200px;
              height: 112px;
            }
            .i_upload {
              width: 200px;
              height: 112px;
              text-align: center;
              align-items: center;
              cursor: pointer;

              .addimg {
                position: relative;

                .heng {
                  position: absolute;
                  top: 59px;
                  left: 71px;
                  width: 60px;
                  border: 1px solid #d9d9d9;
                }

                .shu {
                  position: absolute;
                  top: 30px;
                  left: 100px;
                  height: 60px;
                  border: 1px solid #d9d9d9;
                }
              }
            }
          .upload_box{
            border: 1px solid #d9d9d9;
            padding: 2px 5px;
            background-color: #d9d9d9;
            border-radius: 2px;
            cursor: pointer;
          }
          .error-message{
            color: red;
            font-size: 11px;
            margin-top: 2px;
            margin-bottom: 0;
          }
        }
        .bg_footer {
          width: 100%;
          margin-left: 174px;
          margin-top: 25px;
          margin-bottom: 20px;
          display: flex;

          .btn {
            width: 100px;
            height: 40px;
            background: rgba(64, 158, 255, 0);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 14px;
            flex-shrink: 0;
            cursor: pointer;

            .btnText {
              font-size: 14px;
              font-weight: 400;
              line-height: 40px;
            }
          }

          .btn5 {
            border: 1px solid rgba(64, 158, 255, 1);
            color: #4ea6ff;
          }

          .btn6 {
            background-color: #4ea6ff;
            color: #ffffff;
          }
        }
      }
      .headers{
        margin-left: 38px;
        margin-right: 38px;
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .btn{
          display: flex;
        }
        .headers_item{
          margin-right: 20px;
          margin-bottom: 20px;
          .headers_item_text{
            margin-right: 15px;
          }
          .headers_item_btn {
            padding: 0px 26px 0px 26px;
            height: 38px;
            background: #4ea6ff;
            border-radius: 8px;
            border: 1px solid rgba(64, 158, 255, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 14px;
            flex-shrink: 0;
            cursor: pointer;

            .search {
              background-size: 100%;
            }

            .btnText {
              font-size: 14px;
              font-weight: 400;
              color: #ffffff;
              line-height: 36px;
              margin-left: 5px;
            }
          }
          .btn1 {
            .search {
              width: 15px;
              height: 17px;
              // background-image: url("../../assets/images/courseManage/search0.png");
            }
          }
          .btn2 {
            .search {
              width: 16px;
              height: 18px;
              // background-image: url("../../assets/images/courseManage/reset0.png");
            }
          }
          ::v-deep .ant-select {
            border-radius: 5px;
            width: 100%;
            height: 40px;
            .ant-select-selector {
              border-radius: 8px;
              width: 100%;
              height: 40px;
            }
            .ant-select-selection-placeholder{
              line-height: 40px;
            }
            .ant-select-selection-item{
              line-height: 40px;
            }
          }
        }
      }
    }
  }
.preNext {
  position: absolute;
  right: 0px;

  .content {
    font-size: 14px;
    color: #fff;
    width: 43px;
    height: 14px;
    display: inline-block;
    position: relative;
    top: -6px;
    cursor: pointer;
  }

  .btn {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
  }

  .btn01 {
    background-image: url("../../assets/image/prev.png");
  }

  .btn02 {
    background-image: url("../../assets/image/next.png");
  }
}

.surveydetail {
  .crumb {
    color: #fff;
    display: flex;
    font-size: 14px;
    line-height: 24px;
  }

  .return {
    position: absolute;
    right: 10%;

    .text {
      text-align: center;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }

  .prevnext {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;

    .prev {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }

  .title {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    line-height: 24px;
    margin-top: 17px;
    margin-left: -11px;
  }

  .bascinfo {
    width: 100%;
    min-height: 1032px;
    margin-top: 24px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .header_wrap{
      margin: 10px 0 0 0;
      padding: 5px 0 5px 10px;
      background: #fff;
      margin-left: -680px;
      .header_wrap_item{
        margin-bottom: 5px;
      }
    }
    .question .text {
      font-size: 16px;
      font-weight: 500;
      color: #333330;
    }

    .question .answer {
      margin-top: 30px;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      color: #56a3f9;
    }

    .question .answer .answerC {
      width: 540px;
      height: 73px;
      border: 1px solid #d7e5fd;
      border-radius: 8px;
      display: flex;
      align-items: center;
      margin-left: 11px;
      margin-right: 11px;

      // justify-content: center;
      .answerCitem {
        width: 40px;
        height: 40px;
        border: 1px solid #56a3f9;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        cursor: pointer;
      }
    }

    .question .people {
      font-size: 14px;
      font-weight: 500;
      color: #333330;
      margin-left: 15px;
    }

    .question .words {
      position: absolute;
      right: 15px;
      bottom: 5px;
      font-size: 14px;
      font-weight: 500;
      color: #333330;
    }

    .question .el-textarea__inner {
      border-radius: 8px;
      background-color: rgba(245, 246, 247, 1);
    }

    .submit {
      width: 126px;
      height: 46px;
      background: #2478ff;
      box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
      border-radius: 4px;
      font-size: 16px;
      font-weight: 800;
      color: #ffffff;
      line-height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-top: 39px;
      margin-bottom: 30px;
    }
  }
}
</style>

