<template>
  <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 style="margin-left: 6px; margin-right: 6px">/</div>
        <div style="font-weight: 700; font-size: 16px">评估详情</div>
        <div style="font-weight: 700; font-size: 16px">评估详情</div>
      </div>
      <!-- 
      <div class="prevnext">
        <div class="prev">
          <img
              style="width: 23px; height: 23px"
              src="../../assets/image/prev.png"
          />
          <div style="margin-left: 7px">上一个</div>
        </div>
        <div class="prev" style="margin-left: 31px">
          <div style="margin-right: 7px">下一个</div>
          <img
              style="width: 23px; height: 23px"
              src="../../assets/image/next.png"
          />
        </div>-->
      <div class="return">
        <div style="display: flex" @click="returnclick">
          <img
            class="img2"
            style="margin-right: 22px"
            src="../../assets/image/return.png"
          />
          <div class="text" style="color: #fff">返回</div>
        </div>
      </div>
    </div>
    <!-- 面包屑导航 -->
    <!-- 标题 -->
    <div class="title">【评估】管理者进阶腾飞班 - 培训阶段性调研</div>
    <!-- 标题 -->
    <!-- 基本信息 -->
    <div class="bascinfo">
      <div>
        <div
          class="question"
          v-for="(value, index) in data.assessmentScoringQuestionDtoList"
          :key="index"
          :style="{ 'margin-top': index === 0 ? '57px' : '41px' }"
        >
          <div class="text">{{ value.assessmentScTitle }}</div>
          <div class="answer">
            <div class="answerL">完全没用</div>
            <div class="answerC">
              <div
                class="answerCitem"
                v-for="(item, key) in Array.from(
                  { length: value.assessmentMaxScore },
                  (k, i) => i
                )"
                :key="key"
                :style="{
                  'margin-left': key === 0 ? '15px' : '10px',
                  background:
                    value.selectAnswer === item
                      ? 'rgba(86, 163, 249, 1)'
                      : 'rgba(86, 163, 249, 0)',
                  color:
                    value.selectAnswer === item
                      ? '#fff'
                      : 'rgba(86, 163, 249, 1)',
                }"
                @click="
                  () => {
                    if (data.isSubmit) {
                      return;
                    }
                    value.selectAnswer = item;
                  }
                "
              >
                <div>{{ item + 1 }}</div>
              </div>
            </div>
            <div class="answerR">非常有帮助/启发</div>
          </div>
        </div>
        <div
          class="question"
          style="margin-top: 41px"
          v-if="
            data.assessmentSingleChoiceDtoList &&
            data.assessmentSingleChoiceDtoList.length
          "
        >
          <div class="text">
            {{ data.assessmentSingleChoiceDtoList[0]?.singleStemName }}
          </div>
          <div
            v-for="(value, index) in data.assessmentSingleChoiceDtoList"
            :key="index"
            style="display: flex; align-items: center"
            :style="{
              'margin-top': index === 0 ? '29px' : '22px',
              cursor: 'pointer',
            }"
            @click="
              () => {
                if (data.isSubmit) {
                  return;
                }
                data.assessmentSingleChoiceDtoList.forEach((e) => {
                  e.select = false;
                });
                value.select = true;
              }
            "
          >
            <img
              style="width: 19px; height: 18px; cursor: pointer"
              :src="value.select ? checkbox : checkbox2"
            />
            <div class="people">{{ value.singleOptionName }}</div>
          </div>
        </div>

        <div
          class="question"
          style="margin-top: 41px"
          v-if="
            data.assessmentMultipleChoiceDtoList &&
            data.assessmentMultipleChoiceDtoList.length
          "
        >
          <div class="text">
            {{ data.assessmentMultipleChoiceDtoList[0]?.multipleStemName }}
          </div>
          <div
            v-for="(value, index) in data.assessmentMultipleChoiceDtoList"
            :key="index"
            style="display: flex; align-items: center"
            :style="{
              'margin-top': index === 0 ? '29px' : '22px',
              cursor: 'pointer',
            }"
            @click="
              () => {
                if (data.isSubmit) {
                  return;
                }
                value.select = !value.select;
              }
            "
          >
            <img
              style="width: 19px; height: 18px; cursor: pointer"
              :src="value.select ? checkbox : checkbox2"
            />
            <div class="people">{{ value.multipleOptionName }}</div>
          </div>
        </div>
        <div
          class="question"
          style="margin-top: 41px"
          v-for="(item, i) in data.assessmentEssayQuestionDtoList"
          :key="i"
        >
          <div class="text">{{ item.assessmentQaTitle }}</div>
          <div style="width: 713px; margin-top: 31px; position: relative">
            <el-input
              v-model="item.content"
              :autosize="{ minRows: 5, maxRows: 5 }"
              resize="none"
              maxlength="200"
              type="textarea"
              :readonly="!!data.isSubmit"
            />
            <div class="words">{{ item.content?.length || 0 }}/200</div>
          </div>
        </div>
        <div
          style="display: flex; justify-content: center"
          v-if="
            data.assessmentEssayQuestionDtoList?.length ||
            data.assessmentMultipleChoiceDtoList?.length ||
            data.assessmentSingleChoiceDtoList?.length ||
            data.assessmentScoringQuestionDtoList?.length
          "
        >
          <div
            class="submit"
            @click="submit"
            :style="{ background: data.isSubmit ? '#999' : '#2478ff' }"
          >
            提交
          </div>
        </div>
      </div>
    </div>
    <!-- 基本信息 -->
    <!--    todo 测评页面 没有接口-->
  </div>
</template>
<script setup>
import checkbox from "@/assets/image/checkbox.png";
import checkbox2 from "@/assets/image/checkbox2.png";
import {useRoute} from "vue-router/dist/vue-router";
import { useRouter } from "vue-router";
import {request, usePage, useRequest} from "@/api/request";
import {
  ASSESSMENT_QUERY,
  ASSESSMENT_SUBMIT,
} from "@/api/api";
import {ElMessage} from "element-plus";
const router = useRouter();
const returnclick = () => {
  router.back();
};
const {
  query: { courseId, id: taskId, type, pName, sName },
} = useRoute();
const router = useRouter();
const returnclick = () => {
  router.back();
};
const { data } = useRequest(ASSESSMENT_QUERY(courseId), { id: courseId });
console.log("data", data);
function submit() {
  if (data.value.isSubmit) {
    return;
  }
  data.value.isSubmit = !data.value.isSubmit;
  request(ASSESSMENT_SUBMIT, {
    assessmentId: courseId,
    taskId,
    type,
    result: JSON.stringify(data.value),
  });
  ElMessage.info("提交成功");
  router.back();
}
</script>
<style lang="scss">
.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;

    .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>
