<template>
  <el-dialog
    v-model="showDialog"
    :close-on-click-modal="false"
    :title="mode == `1` ? `考试` : `问卷`"
    :width="'80%'"
    :fullscreen="screenWidth < 900"
    @close="closeDialog"
    ><div
      v-if="isQuestionsLoading"
      v-loading="isQuestionsLoading"
      style="width: 100%; height: 400px"
    ></div>
    <div v-else class="questions-list">
      <el-form :model="form" ref="questionsRef">
        <el-form-item
          v-for="(item, index) in form.questionsList"
          :key="item.id"
          :prop="
            item.type === `1`
              ? `questionsList.${index}.choiceAnswerIdStr[0]`
              : `questionsList.${index}.choiceAnswerIdStr`
          "
          :rules="[
            {
              required: true,
              message: '必填',
              trigger: 'change',
            },
          ]"
        >
          <div class="question-title">{{ item.question }}</div>
          <el-radio-group
            v-if="item.type === `1`"
            v-model="item.choiceAnswerIdStr[0]"
            @change="stageAnswer"
          >
            <el-row>
              <el-col
                v-for="el in item.questionChoiceList"
                :key="el.id"
                :md="12"
                :xs="24"
                :sm="24"
              >
                <el-radio :label="el.id">
                  <textToolTip
                    :content="el.choiceContent"
                    refName="tooltipOver"
                  ></textToolTip>
                </el-radio>
              </el-col>
            </el-row>
          </el-radio-group>

          <el-checkbox-group
            v-else
            v-model="item.choiceAnswerIdStr"
            @change="stageAnswer"
          >
            <el-checkbox
              v-for="el in item.questionChoiceList"
              :key="el.id"
              :label="el.id"
              ><textToolTip
                :content="el.choiceContent"
                refName="tooltipOver"
              ></textToolTip
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>

    <span class="dialog-footer">
      <el-button type="primary" @click="submit(questionsRef)">确定</el-button>
      <el-button type="primary" @click="closeDialog">取消</el-button>
    </span>
  </el-dialog>
</template>

<script setup>
import { toRefs, ref } from "vue";
import { ElMessage } from "element-plus";
import {
  getQuestionsList,
  commitQuestionnaire,
  commitExam,
} from "@/api/meeting";
import textToolTip from "@/components/textToolTip";
import { useStore } from "vuex";
const store = useStore();
const props = defineProps({
  showDialog: {
    type: Boolean,
    required: true,
    default: false,
  },
  mode: {
    type: [String, Number],
    required: true,
  },
  questionsList: {
    type: Array,
    default: [],
  },
});
const screenWidth = ref(0);
screenWidth.value = window.screen.width;
const { showDialog, mode, questionsList } = toRefs(props);
const emit = defineEmits(["close", "stage"]);
const joinAccount = ref("");
joinAccount.value =
  store.getters.icCard || store.getters.phone || store.getters.nickname;

// 加载问题列表
const form = ref({
  questionsList: [],
});
const isQuestionsLoading = ref(true);
const loadQuestionsList = async () => {
  try {
    let data;
    if (questionsList.value.length > 0) {
      console.log(questionsList.value.length);
      form.value.questionsList = questionsList.value.map((el) => el);
    } else {
      data = await getQuestionsList({
        meetingId: store.getters.meetingId,
        type: mode.value,
      });
      console.log(data);
      form.value.questionsList = data.data.map((item) => {
        return {
          ...item,
          choiceAnswerIdStr: [],
        };
      });
    }
    isQuestionsLoading.value = false;
    stageAnswer();
  } catch (error) {
    isQuestionsLoading.value = false;
  }
};

const questionsRef = ref(null);
const submit = async (questionsRef) => {
  console.log(questionsRef);
  await questionsRef.validate();
  if (mode.value == "1") {
    await commitExam({
      meetingId: store.getters.meetingId,
      userAccount: joinAccount.value,
      commitExamList: form.value.questionsList.map((item) => {
        return {
          questionId: item.id,
          choiceAnswerIdStr: item.choiceAnswerIdStr.join(",") + ",",
        };
      }),
    });
    store.commit("setJoinUser", {
      ...store.state.joinUser,
      examSubmited: true,
    });
    ElMessage.success("提交考试成功");
  } else if (mode.value == "2") {
    await commitQuestionnaire({
      meetingId: store.getters.meetingId,
      userAccount: joinAccount.value,
      commitExamList: form.value.questionsList.map((item) => {
        return {
          questionId: item.id,
          choiceAnswerIdStr: item.choiceAnswerIdStr.join(",") + ",",
        };
      }),
    });
    store.commit("setJoinUser", {
      ...store.state.joinUser,
      questionnaireSubmited: true,
    });
    ElMessage.success("提交问卷成功");
  }
  closeDialog();
};

const stageAnswer = () => {
  emit("stage", form.value.questionsList);
};
loadQuestionsList();
const closeDialog = () => {
  emit("close", false);
};
</script>
<style scoped lang="scss">
.questions-list {
  .question-title {
    width: 100%;
    font-size: 16px;
    font-weight: 700;
  }
  :deep(.el-checkbox-group) {
    width: 100%;
    .el-checkbox {
      width: 20%;
      .el-checkbox__label {
        width: 100%;
      }
    }
  }
  :deep(.el-radio-group) {
    width: 100%;
    .el-radio {
      width: 20%;
    }
  }
}
</style>
