<template>
  <div
    class="mt-10px shadow-default bg-white pl-35px pr-30px pr-35px h-60px rounded-10px relative flex items-center justify-between"
  >
    <h3 class="nav-title">
      直播课程 - <span style="color: #949494">{{ course_title }}-</span
      ><span>{{ chapter_title }}</span>
    </h3>
    <div class="btnDiv">
      <el-button size="large" @click="linkTo()" class="w-100px"
        >返回
      </el-button>
    </div>
  </div>
  <div
    class="mt-10px shadow-default bg-white-grey pt-25px pl-35px pr-35px pb-35px rounded-10px"
  >
    <div class="text-18px text-hex-050026 font-medium text-center">
      第{{ dealFigureToChinese(Number(ks_num)) }}课时：{{ chapter_title }}
    </div>
    <div class="text-16px text-hex-050026 font-medium text-center my-10px">
      <span class="mr-30px"
        >总题数：{{ total_problem_num ? total_problem_num : 0 }}题
      </span>
      <span>总答题人数：{{ total_answer_num ? total_answer_num : 0 }}人</span>
    </div>

    <ul v-loading="loading" v-if="listData.length > 0" class="ml-70px scroll">
      <li v-for="(item, index) in listData" :key="index">
        <div class="flex">
          <!-- {{ index + 1 }}.&nbsp -->
          <div v-html="item.tq_content"></div>
        </div>
        <div class="ml-20px mb-20px">
          <span class="inline-block text-hex-00c010 w-1/5"
            >正确答案: {{ item.tq_answer }}</span
          ><span class="inline-block text-hex-1259a1 w-1/5"
            >正确人数:{{ item.alyz.answer_true.length }}</span
          ><span class="inline-block text-hex-f30808 w-1/5"
            >错误人数:{{ item.alyz.answer_false.length
            }}<span
              class="detail inline-block ml-10px"
              @click="detailLook(item)"
              >查看</span
            ></span
          >
        </div>
      </li>
    </ul>
    <nodata v-else></nodata>
    <el-dialog v-model="detailDialogVisible" width="931" title="错误人数详情">
      <div v-if="falseDetail.length > 0">
        <span v-for="(f, i) in falseDetail" :key="i" class="inline-block w-1/6"
          >{{ f.realname }}：{{ f.user_answer }}
        </span>
      </div>
      <nodata v-else></nodata>
    </el-dialog>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { user } from "@/store/index";
import { mszy_ks_detail, shiti_list } from "./api";
import { getFullUrl } from "@/utils/helper";
import nodata from "@/pages/xsd/component/noData.vue";

const router = useRouter();
const route = useRoute();
let msOrjt = $ref("");
let course_title = $ref("");
let chapter_title = $ref("");
let ks_num = route.params.i;

let total_answer_num = $ref("");
let total_problem_num = $ref("");
let zjstId = $ref("");
let wjstId = $ref("");
let tqId = $ref("");
let keyword = $ref("");
let limit = $ref(6);
let total = $ref(0);
let cur_page = $ref(1);
let listData = $ref([]);
let falseDetail = $ref([]);

let form_query = $ref({
  limit: 6,
  page: 1,
  tmz_id: route.params.tmz_id,
});

const linkTo = () => {
  router.go(-1);
};
function detailData() {
  let data = {
    tmz_id: route.params.tmz_id,
  };

  mszy_ks_detail(data).then((res) => {
    if (res.code === "1") {
      zjstId = res.data.one_info.mz_zjsjdajx_tq_id;
      wjstId = res.data.one_info.tmz_kczjwjcs_tq_id;
      if (zjstId == "") {
        tqId = wjstId;
      } else if (wjstId == "") {
        tqId = zjstId;
      } else {
        tqId = zjstId + "," + wjstId;
      }
      course_title = res.data.one_info.kc_info.tmk_kcm;
      chapter_title = res.data.one_info.tmz_zjmc;
      initData();
    }
  });
}
function initData() {
  let data = {
    tq_id: tqId,
    tqr_data_type: "1",
    tqr_data_id: route.params.tmz_id,
    tqr_pos: "1",
    limit: 999,
  };

  shiti_list(data).then((res) => {
    if (res.code === "1") {
      listData = res.data.page_data;
      total_problem_num = res.data.total_rows;
      listData.map((item) => {
        total_answer_num = item.alyz.total_stu;
      });
    }
  });
}
detailData();

let detailDialogVisible = $ref(false);
function detailLook(val) {
  detailDialogVisible = true;
  falseDetail = val.alyz.answer_false;
}
</script>

<style lang="scss" scoped>
$color: #1259a1;

.bg-white-grey {
  background: #fcfeff;
}

.bg_blue {
  background: $color;
}

.shadow-default {
  box-shadow: 0 10px 24px rgba(161, 153, 168, 0.18);
}

.color-grey {
  color: #999;
}

.border-bottom-1 {
  border-bottom: 1px solid #eee;
}

.nav-title {
  font-size: 16px;
  color: #949494;

  span {
    font-size: 18px;
    color: #050026;
  }
}

.btnDiv {
  .el-button {
    background: $color;
    border-color: $color;
    color: #fff;
  }
}

.search-box {
  width: 300px;
  height: 48px;
  background: #f6f8fa;
  border-radius: 8px;
  padding: 0 10px 0 14px;
  display: flex;
  align-items: center;

  input {
    flex: 1;
    height: 48px;
    border: 0;
    font-size: 16px;
    color: #333;
    outline: none;
    background: #f6f8fa;
  }

  .search-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: $color url("/images/icon-search.png") center no-repeat;
    background-size: 13px 13px;
  }
}

.detail {
  width: 58px;
  height: 23px;
  border: 1px solid #1259a1;
  border-radius: 12px;
  font-size: 12px;
  font-family: PingFang SC, PingFang SC-Regular;
  text-align: center;
  color: #1259a1;
  line-height: 23px;
}
::v-deep .el-dialog__body {
  padding-top: 10px;
}

.scroll {
  height: 500px;
  overflow-x: hidden;
  overflow-y: scroll;
  line-height: 30px;
}

/*滚动条样式*/
.scroll::-webkit-scrollbar {
  width: 3px;
  height: 200px;
}

/* 上下滚动的滚动条颜色 */
.scroll::-webkit-scrollbar-thumb {
  border-radius: 2px;
  -webkit-box-shadow: inset 0 0 5px #1259a1;
  background: #1259a1;
}

/* 滚动条的整体背景颜色 */
.scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px white;
  border-radius: 0;
  background: white;
}
</style>