<template>
  ><div id="siteMain">
    <div id="maxSite">
      <a-layout>
        <!-- 页头 -->
        <headerPage />
        <!-- 主体部分 -->
        <a-layout-content style="background-color: white; margin-top: 10px">
          <a-row>
            <a-col :span="24" style="text-align: center">
              <span class="title">{{ zyInfo.title }}</span>
            </a-col>
            <a-col :span="24" style="text-align: right;">
              <span style=" color: #999">开始时间：</span><span style="color:#666;">{{ dayjs(zyInfo.startTime).format('MM.DD HH:mm') }}</span> ~  <span style=" color: #999; ">结束时间：</span><span style="color:#666; margin-right:20px">{{ dayjs(zyInfo.endTime).format('MM.DD HH:mm') }}</span>
            </a-col>
            <a-col :span="24" style="margin-top: 10px">
              <div style="display: flex">
                <div class="tjfx-line diva" @click="handleDjjgs(zyInfo, '')"
                  ><span class="tjfx-colt">{{ zyInfo.xkrs }}</span
                  ><span class="tjfx-colw"> 总人数</span></div
                >
                <div class="tjfx-line diva" @click="handleDjjgs(zyInfo, '1')"
                  ><span class="tjfx-colt">{{ zyInfo.ywcrs }}</span
                  ><span class="tjfx-colw"> 已完成人数</span></div
                >
                <div class="tjfx-line diva" @click="handleDjjgs(zyInfo, '0')"
                  ><span class="tjfx-colt">{{ zyInfo.wwcrs }}</span
                  ><span class="tjfx-colw"> 未完成人数</span></div
                >
              </div>
            </a-col>
            <a-col :span="24" style="margin-top: 10px; text-align: right;">
              <a-switch style=" margin-right:20px;" checkedChildren="统计" unCheckedChildren="图表" v-model:checked="twoShowType" />
            </a-col>
            <a-col :span="23.5" style="margin:10px 20px;" v-if="twoShowType">
              <a-collapse accordion expandIconPosition="right">
                <a-collapse-panel :key="index" v-for="(item, index) in zyInfo.tmlbList">
                  <template #header>
                    <a-row :span="24" style="width: 90%">
                      <a-col :span="24" class="title2">{{ item.wjTitle }}</a-col>
                      <a-col :span="8" style="color:#909399;display:flex;flex-direction: column; text-align: left;font-size:12px;"><span style="font-weight: bold;font-size:20px; margin-left:5px;">{{ item.yzd }}</span>已作答人数</a-col>
                      <a-col :span="8" style="color:#1ab394;display:flex;flex-direction: column; text-align: left;font-size:12px;"><span style="font-weight: bold;font-size:20px; margin-left:5px;">{{ item.ddrs }}</span>答对人数</a-col>
                      <a-col :span="8" style="color:#f56c6c;display:flex;flex-direction: column; text-align: left; font-size:12px;"><span style="font-weight: bold;font-size:20px; margin-left:5px;">{{ item.dcrs }}</span>答错人数</a-col>
                    </a-row>
                  </template>
                  <div style="width: 98%; margin: 0 auto" v-if="item.wjType == 3">
                    <a-card>
                      <template #extra v-if="zyInfo.atype == 6">
                        <span class="question-type" style="margin-left: 40px">单选题</span>
                        <span style="margin-left: 40px"
                          >题目分值：<span class="answer-word"> {{ item.wjScore }}</span> 分</span
                        >
                      </template>
                      <a-radio-group v-model:value="item.itemSelected" style="width: 100%" size="default" disabled>
                        <div style="width: 100%" v-for="(tmxx, index2) in item.wjxWjxxTmxxList" :key="index2">
                          <a-radio :value="tmxx.itemIndex + ``" style="width: 100%; margin-bottom: 5px">
                            <span v-html="tmxx.itemTitle" style="font-size: 16px; color: #000"></span>
                            <span v-if="tmxx.itemSelected == 'true'" style="color: #9e9e9e; margin-left: 30px; font-size: 12px">(正确答案)</span>
                            <span class="tjfx-xzrs">选择人数：{{ tmxx.num }}人</span>
                          </a-radio>
                        </div>
                      </a-radio-group>
                    </a-card>
                  </div>
                  <!-- 多选题 -->
                  <div style="width: 98%; margin: 0 auto" v-else-if="item.wjType == 4">
                    <a-card>
                      <template #extra v-if="zyInfo.atype == 6">
                        <span class="question-type" style="margin-left: 40px">多选题</span>
                        <span style="margin-left: 40px"
                          >题目分值： <span class="answer-word">{{ item.wjScore }}</span> 分</span
                        >
                      </template>
                      <a-checkbox-group v-model:value="item.itemSelected" style="width: 100%" size="default" disabled>
                        <a-row>
                          <a-col :span="24" v-for="(tmxx, index2) in item.wjxWjxxTmxxList" :key="index2">
                            <a-checkbox :value="tmxx.itemIndex" style="width: 100%; margin-bottom: 5px">
                              <span v-html="tmxx.itemTitle" style="width: 80%; font-size: 16px; color: #000"></span>
                              <span v-if="tmxx.itemSelected == 'true'" style="color: #9e9e9e; margin-left: 30px; font-size: 12px">(正确答案)</span>
                              <span class="tjfx-xzrs">选择人数：{{ tmxx.num }}人</span>
                            </a-checkbox>
                          </a-col>
                        </a-row>
                      </a-checkbox-group>
                    </a-card>
                  </div>
                  <!-- 填空题 -->
                  <div style="width: 98%; margin: 0 auto" v-else-if="item.wjType == 5">
                    <a-card>
                      <template #title>
                        <span v-if="item.wjAnswer" style="color: #9e9e9e; margin-left: 30px; font-size: 12px">(正确答案:{{ item.wjAnswer }})</span>
                        <span class="tjfx-xzrs1" style="color: #9e9e9e">正确人数：{{ item.num }}人</span>
                        <span class="tjfx-xzrs1" style="color: #9e9e9e">错误人数：{{ item.num2 }}人</span>
                      </template>
                      <template #extra v-if="zyInfo.atype == 6">
                        <span class="question-type" style="margin-left: 40px">填空题</span>
                        <span style="margin-left: 40px"
                          >题目分值：<span class="answer-word"> {{ item.wjScore }}</span> 分</span
                        >
                      </template>
                    </a-card>
                  </div>
                  <div v-else> 无对应类型 </div>
                </a-collapse-panel>
              </a-collapse>
            </a-col>

            <!-- 图表 -->

            <a-col :span="23.5" style="margin:10px 20px;" v-if="!twoShowType">
              <a-collapse accordion expandIconPosition="right">
                <a-collapse-panel :key="index" v-for="(item, index) in zyInfo.tmlbList">
                  <template #header>
                    <a-row :span="24" style="width: 100%">
                      <a-col :span="24" class="title2">{{ item.wjTitle }}</a-col>
                    </a-row>
                  </template>
                  <!-- 单选题 -->
                  <div style="width: 98%; margin: 0 auto">
                    <a-row :span="24">
                      <a-col :span="12">
                        <pie :chartData="getPieData(item)" :option="pieOption" height="300px" style="width: 500px" />
                      </a-col>
                      <a-col :span="12">
                        <BarMulti :chartData="getBarData(item)" :option="multiBarOption" height="300px" style="width: 500px"></BarMulti>
                      </a-col>
                    </a-row>
                  </div>
                  <!-- 多选题 -->
                  <!-- <div style="width: 98%; margin: 0 auto" v-else-if="item.wjType == 4">
                </div> -->
                  <!-- 填空题 -->
                  <!-- <div style="width: 98%; margin: 0 auto" v-else-if="item.wjType == 5">
                </div> -->
                  <!-- <div v-else> 无对应类型 </div> -->
                </a-collapse-panel>
              </a-collapse>
            </a-col>
            <a-col style="height: 40px"> </a-col>
          </a-row>
        </a-layout-content>
        <!-- 页尾 -->
        <footerPage style="margin-top: 10px" />
      </a-layout>
    </div>
    <WjxWjxxTmlbDjjgsModal ref="WjxWjxxTmlbDjjgsModalPage"></WjxWjxxTmlbDjjgsModal>
  </div>
</template>

<script lang="ts" name="zyInfo-zyInfo" setup>
import { ref, reactive, onMounted, unref, onBeforeUnmount } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import { useRouter } from 'vue-router';
import dayjs, { Dayjs } from 'dayjs';
import { Form } from 'ant-design-vue';
import { getValueType } from '/@/utils';
import headerPage from '/@/views/site/common/header.vue';
import footerPage from '/@/views/site/common/footer.vue';
import Pie from '/@/components/chart/Pie.vue';
import BarMulti from '/@/components/chart/BarMulti.vue';

import WjxWjxxTmlbDjjgsModal from '/@/views/kc/wjxWjxx/components/WjxWjxxTmlbDjjgsModal.vue';

//当前路由信息
const { currentRoute } = useRouter();
const { query } = unref(currentRoute);
const { rwbh, xqxn, type, teano, cyid } = query; //获取传递参数
const { createConfirm, createMessage } = useMessage();
const zyInfo = ref<any>({});
const WjxWjxxTmlbDjjgsModalPage = ref();

const twoShowType = ref<boolean>(true);
let intervalId: ReturnType<typeof setInterval> | null;
const aaaaa = ref<number>(0);

const multiBarOption = {
  title: { text: '答题情况统计', left: 'center' },
};

const pieOption = {
  title: { text: '正确率统计', left: 'center' },
};

function getPieData(item) {
  console.log('👨‍🔧', item);

  const pieData = [
    { value: parseInt(item.ddrs), name: '答对人数' },
    { value: parseInt(item.dcrs), name: '答错人数' },
  ];
  return pieData;
}

function getBarData(item) {
  const barMultiData = [
    { value: parseInt(item.yzd), name: '作答人数' },
    { value: parseInt(item.ddrs), name: '答对人数' },
    { value: parseInt(item.dcrs), name: '答错人数' },
  ];
  return barMultiData;
}
function reloadZy() {
  defHttp.get({ url: '/wjxWjxx/wjxWjxx/queryCyjgById', params: { id: cyid } }).then((res) => {
    console.log('🚶‍♂️', res);
    zyInfo.value = res;
  });
}
/**
 * 学生答卷列表
 */
function handleDjjgs(record: Recordable, flag) {
  WjxWjxxTmlbDjjgsModalPage.value.disableSubmit = true;
  WjxWjxxTmlbDjjgsModalPage.value.edit(record, flag);
}

onMounted(() => {
  reloadZy();
  intervalId = setInterval(() => {
    // aaaaa.value++;
    console.log('🤯1111111111111111111', aaaaa.value);
    // 执行要重复执行的逻辑
    reloadZy();
    if (zyInfo.value.xkrs == zyInfo.value.ywcrs) {
      clear();
    }
    // if (aaaaa.value == 3) {
    //   console.log('2222222222222222222', aaaaa.value);
    //   clear();
    // }
  }, 5000);
});

function clear() {
  intervalId && window.clearInterval(intervalId);
}
</script>

<style lang="less" scoped>
.title {
  line-height: 100px;
  font-size: 18px;
}
.title2 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.ant-divider-horizontal {
  display: flex;
  clear: both;
  width: 100%;
  min-width: 100%;
  margin: 3px 0 5px;
}
.tishi {
  width: 100%;
  font-size: 12px;
  color: #fd8f02;
  margin-top: -4px;
  background: #fffbf2;
  text-align: center;
  padding: 6px 0;
}
.cardClass {
  min-height: 200px;
}
.sznrClass {
  line-height: 40px;
  text-align: center;
}
.ant-card {
  box-sizing: border-box;
  margin: 2px 0;
  padding: 0;
  color: rgb(0 0 0);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: tnum;
  position: relative;
  border-radius: 5px;
  border: 1px solid #dadada;
  background: #fff;
}
.ant-card-head {
  min-height: 48px;
  margin-bottom: -1px;
  padding: 0 24px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  background: transparent;
  border-bottom: 1px solid #dadada;
  border-radius: 2px 2px 0 0;
}
.ellipsis {
  overflow: hidden; /* 确保超出容器的内容被裁剪 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.ellip-title {
  display: flex;
  justify-content: space-between;
}
.elli-title {
  font-size: 16px;
  font-weight: bold;
}
.ellip-word {
  font-size: 14px;
  color: #666666;
}
.zuanqu:hover {
  cursor: pointer;
  color: #18a689;
}
.data-suggest {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 25%;
  margin-right: 3px;
  padding: 8px 3px;
  border-radius: 5px;
  background: #f7f7f7;
  margin-top: 10px;
}
.data-suggest span:nth-child(1) {
  font-size: 16px;
  font-weight: bold;
}
.data-suggest span:nth-child(2) {
  font-size: 12px;
}
.work-img {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 80px;
  margin-bottom: 30px;
}
.work-img-img {
  width: 180px;
  height: 139px;
}
.buttonClass {
  background: #1ab394;
  font-weight: 600;
  color: #fff;
  border-radius: 3px;
  border: none;
}
.mar-right20 {
  margin-right: 14px;
}
.button-zhta {
  color: #666666;
  cursor: pointer;
}
.button-zhta:hover {
  cursor: pointer;
  color: #18a689;
}

.diva {
  cursor: pointer;
  color: #18a689;
}
.sear-distance {
  padding: 0 10px;
}
.ant-form-item {
  box-sizing: border-box;
  margin: 10px 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: tnum;
  /* margin-bottom: 24px; */
  vertical-align: top;
}
.bled-countenance {
  color: #333333;
}
.bled-countenance2 {
  color: #999999;
  font-size: 12px;
}
.region {
  margin: 5px 10px;
  padding-bottom: 20px;
  background: #fff;
  border-radius: 5px;
}
.region-title {
  font-size: 16px;
  color: #029c88;
  padding: 8px 20px;
  border-left: 5px solid #029c88;
  margin: 10px;
  border-radius: 5px;
  background: #fff;
}
.tjfx-col {
  font-size: 12px;
  padding: 8px 20px;
  line-height: 25px;
}
.tjfx-col-title {
  font-size: 16px;
  padding: 8px 20px;
  line-height: 25px;
  font-weight: bold;
}
.tjfx-line {
  width:33%;
  text-align: center;
  display: flex;
  flex-direction: column;
  background: #f7f7f7;
  border-radius: 5px;
  margin: 0 15px;
  padding: 8px 0;
}
.tjfx-colt {
  font-size: 22px;
  font-weight: bold;
  color: #1ab394;
}
.tjfx-colw {
  font-size: 14px;
  color: #666;
}
.tjfx-title {
  width: 90%;
  float: left;
}
.tjfx-type {
  width: 10%;
  float: left;
}
.tjfx-xzrs {
  margin-left: 30px;
  font-size: 12px;
  position: absolute;
  right: 15px;
}
.tjfx-xzrs1 {
  margin-left: 30px;
  font-size: 12px;
}
.tjfx-zql {
  text-align: right;
  width: 50%;
  font-size: 16px;
  padding: 20px;
}
.question-type {
  background: #eaf9f6;
  color: #1ab394;
  padding: 0 5px;
  border-radius: 3px;
  border: 1px solid #1ab394;
}
.answer-word {
  color: #ff8710;
  font-weight: bold;
}

#siteMain {
  // font-size: ;
  // height: 100%;
  background: #f3f3f4;
  #maxSite {
    //最大宽度
    max-width: 1170px;
    //居中
    margin: 0 auto;
    .rowGutter {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

    .ant-layout-header {
      color: #fff;
      background: #1ab394;
    }
    .ant-layout-footer {
      line-height: 1.5;
      background: #fff;
    }
    .ant-layout-sider {
      color: #fff;
      background: #3ba0e9;
    }
    .ant-layout-content {
      color: #000;
      background: #f3f3f4;
    }
    .dictBox :deep(.ant-select) {
      width: 100%;
    }
  }
}
</style>
