<template>
  <div class="main" ref="main">
    <back-box>
      <template slot="title">
        <span>问答-已归档数据报表</span>
      </template>
    </back-box>
    <div class="answer-header">
      <div class="sel-box">
        <el-select class="sel" v-model="query.classId" placeholder="选择班级" @change="changeclass">
          <el-option v-for="item in classList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-if="role == 'ROLE_BANZHUREN' || role == 'ROLE_PERSONAL'" class="sel" multiple
          v-model="query.subjectNames" placeholder="选择科目" @change="changeSub">
          <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-else class="sel" v-model="query.subjectNames" placeholder="选择科目">
          <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <div class="d1">
          <el-date-picker v-model="query.startDay" type="date" @change="handleChangeTimeStart" placeholder="选择日期时间"
            value-format="yyyy-MM-dd">
          </el-date-picker>
          ~
          <el-date-picker v-model="query.endDay" type="date" placeholder="选择日期时间" @change="handleChangeTimeEnd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </div>
        <p class="p1">
          <span @click="setDate(1)" :class="[date == 1 ? 'active' : '', 's1']">今天</span>
          <span @click="setDate(2)" :class="[date == 2 ? 'active' : '', 's1']">本周</span>
          <span @click="setDate(3)" :class="[date == 3 ? 'active' : '', 's1']">本月</span>
          <span @click="setDate(4)" :class="[date == 4 ? 'active' : '', 's1']">本季度</span>
        </p>
        <el-button type="primary" round @click="_QueryData()">筛选</el-button>
      </div>
    </div>
    <div class="table-box">
      <!-- <el-radio-group
        v-model="tabIndex"
        @change="tabChange"
        style="margin-bottom: 20px"
      >
        <template v-for="(item, index) in tabList">
          <el-radio-button
            v-if="index == 0 || query.startDay != query.endDay"
            :key="index"
            :label="index + 1"
            >{{ item }}</el-radio-button
          >
        </template>
      </el-radio-group> -->
      <div class="table-cont" v-loading="loading">
        <div id="print-content">
          <div v-show="tabIndex == 1">
            <el-table :data="tableData" border style="width: 100%" @sort-change="sortChange">
              <el-table-column prop="title" label="课时" align="center"></el-table-column>
              <el-table-column prop="questionNum" label="题目总数" align="center" width="100"></el-table-column>
              <el-table-column prop="startTime" label="上课时间" align="center"></el-table-column>
              <el-table-column prop="participationRate" label="参与度" sortable="custom" align="center">
                <template slot-scope="scoped">{{ scoped.row.participationRate }}%</template></el-table-column>
              <el-table-column prop="answerCorrectRate" label="已答总正确率" sortable="custom" align="center">
                <template slot-scope="scoped">{{ scoped.row.answerCorrectRate }}%</template>
              </el-table-column>
              <el-table-column prop="classCorrectRate" label="班级总正确率" sortable="custom" align="center"><template
                  slot-scope="scoped">{{ scoped.row.classCorrectRate }}%</template></el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scoped">
                  <el-tooltip effect="dark" content="详情" placement="top">
                    <el-button type="primary" circle size="mini" icon="fa fa-arrow-right"
                      @click="linkTo(scoped.row)"></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-show="tabIndex == 2">
            <el-table id="print-content2" v-if="role == 'ROLE_JIAOSHI'" :max-height="tableMaxHeight" :data="tableData"
              border style="width: 100%">
              <el-table-column prop="studentCode" label="学号" fixed align="center"></el-table-column>
              <el-table-column prop="studentName" label="姓名" fixed align="center" width="100"></el-table-column>
              <el-table-column prop="answerTimes" label="累计答题次数" sortable align="center"></el-table-column>
              <el-table-column prop="correctAnswerTimes" label="累计答对次数" sortable align="center"></el-table-column>
              <el-table-column prop="participationRate" label="总参与度" sortable align="center">
                <template slot-scope="scoped">{{ scoped.row.participationRate }}%</template></el-table-column>
              <el-table-column prop="correctRate" label="总正确率" sortable align="center">
                <template slot-scope="scoped">{{ scoped.row.correctRate }}%</template></el-table-column>
              <el-table-column prop="answerCorrectRate" label="已答总正确率" sortable align="center">
                <template slot-scope="scoped">{{ scoped.row.answerCorrectRate }}%</template>
              </el-table-column>
              <el-table-column prop="classRank" label="总正确率班排名" sortable align="center"></el-table-column>
            </el-table>
            <el-table id="print-content2" :max-height="tableMaxHeight" v-else :data="tableData" border
              style="width: 100%">
              <el-table-column prop="studentCode" label="学号" align="center" fixed></el-table-column>
              <el-table-column prop="studentName" label="姓名" align="center" fixed width="100"></el-table-column>
              <el-table-column v-for="(item, index) in phaseOption" :key="index" :label="item" align="center">
                <el-table-column align="center" :label="index == 0 ? '总课时数' : '课时数'" :prop="'periodCount' + item">
                </el-table-column>
                <el-table-column align="center" :label="index == 0 ? '总出题数' : '出题数'" :prop="'questionNum' + item">
                </el-table-column>
                <el-table-column align="center" :label="index == 0 ? '总参与度' : '参与度'"
                  :prop="'participationRate' + item"><template slot-scope="scoped">
                    {{ scoped.row["participationRate" +  item] }}%
              </template>
                </el-table-column>
                <el-table-column align="center" :label="index == 0 ? '总正确率' : '正确率'"
                  :prop="'correctRate' + item"><template slot-scope="scoped">{{ scoped.row["correctRate" + item]
                    }}%</template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
          <div v-show="tabIndex == 3">
            <el-table id="print-content3" v-if="role == 'ROLE_JIAOSHI'" :max-height="tableMaxHeight" :data="tableData"
              border style="width: 100%">
              <el-table-column prop="studentCode" label="学号" fixed align="center"></el-table-column>
              <el-table-column prop="studentName" label="姓名" fixed align="center" width="100"></el-table-column>
              <el-table-column prop="rushAnswerTimes" label="抢答成功次数" sortable align="center"></el-table-column>
              <el-table-column prop="rushAnswerCorrectTimes" label="抢答答对次数" sortable align="center"></el-table-column>
              <el-table-column prop="checkAnswerTimes" label="抽答次数" sortable align="center"></el-table-column>
              <el-table-column prop="checkAnswerCorrectTimes" label="抽答答对次数" sortable align="center"></el-table-column>
              <el-table-column prop="interactionsNum" label="参与得分" sortable align="center"></el-table-column>
              <el-table-column prop="interactionsCorrectNum" label="对错得分" sortable align="center"></el-table-column>
            </el-table>
            <el-table id="print-content3" v-else :max-height="tableMaxHeight" :data="tableData" border
              style="width: 100%">
              <el-table-column prop="studentCode" label="学号" align="center"></el-table-column>
              <el-table-column prop="studentName" label="姓名" align="center" width="100"></el-table-column>
              <el-table-column v-for="(item, index) in phaseInter" :key="index" :label="item" align="center">
                <el-table-column align="center" v-if="index == 0" label="参与分" sortable :prop="'interactionsNum' + item">
                </el-table-column>
                <el-table-column v-else align="center" label="互动数" :prop="'interactionsNum' + item">
                </el-table-column>
                <el-table-column v-if="index == 0" align="center" label="对错分" sortable
                  :prop="'interactionsCorrectNum' + item">
                </el-table-column>
                <el-table-column v-else align="center" label="参与数" :prop="'interactionsCorrectNum' + item">
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="pagination-box" v-show="tabIndex == 1">
          <el-pagination small="" layout="total,prev, pager, next" :hide-on-single-page="true" :total="total"
            @current-change="changePage" :current-page="page" :page-size="size">
          </el-pagination>
        </div>
        <p class="down" v-if="(tabIndex == 3 || tabIndex == 2) && tableData.length">
          <el-button @click="exportData" type="primary" plain round icon="fa fa-cloud-download">导出报表</el-button>
          <el-button v-if="!this.$store.getters.code" @click="print" type="primary" plain round
            icon="el-icon-printer">打印</el-button>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate, downloadFile, tablePrint } from "utils";
import BusEvent from "@/utils/busEvent";
export default {
  data() {
    return {
      tableMaxHeight: 300,
      code: "",
      role: "",
      loading: false,
      date: "", //今天-昨天-本周
      query: {
        //搜索条件
        classId: "",
        subjectNames: "",
        startDay: "",
        endDay: "",
        day: "",
      },
      tabList: ["单课时报表", "阶段问答报表", "阶段互动报表"],
      custom: {
        //单课时排序
        orderField: null,
        orderType: null,
      },
      classList: [], //班级
      subjectList: [], //科目
      tabIndex: 1, //选项卡
      tableData: [],
      phaseOption: [], //问答补充数据
      phaseInter: [], //互动补充数据
      page: 1,
      size: 20,
      total: 0,
    };
  },
  async created() {
    this.code = this.$store.getters.csCode;
    this.role =
      this.$store.getters.info.showRole ||
      this.$store.getters.info.permissions[0].role;
    this.query.subjectNames = this.role == "ROLE_BANZHUREN" ? [] : "";
    await this._QueryClassList();
    if (!this.query.classId) {
      return;
    }
    await this._QuerySubjectList();
    await this.setDate(1);
    let startDay = this.query?.startDay;
    if (!startDay) {
      this.query.startDay = new Date();
      this.query.endDay = new Date();
    }
  },
  activated() {
    const that = this;
    BusEvent.$on("keepAlive", async function () {
      that.query.subjectNames = that.role == "ROLE_BANZHUREN" ? [] : "";
      await that._QueryClassList();
      if (!that.query.classId) {
        return;
      }
      await that._QuerySubjectList();
      await that.setDate(1);
      let startDay = that.query?.startDay;
      if (!startDay) {
        that.query.startDay = new Date();
        that.query.endDay = new Date();
      }
    });
  },
  methods: {
    print() {
      tablePrint(
        "print-content",
        "随堂问-已归档" + this.tabList[this.tabIndex - 1]
      );
    },
    changeSub(val) {
      let sub;
      if (val && val.length) {
        let leng = val.length - 1;
        sub = val[leng];
      }
      this.query.subjectNames = val.filter((item) => {
        return sub != "全部" ? item != "全部" : item == "全部";
      });
    },
    linkTo(obj) {
      //去详情
      this.$router.push({
        path: "/askAnalysis",
        query: {
          id: JSON.stringify([obj.id]),
          types: 1,
          subjectNames: obj.subjectName,
          params: JSON.stringify({
            ...this.query,
            subjectNames: [this.query.subjectNames],
          }),
          className: this.$route.query.className,
        },
      });
    },
    setDate(index) {
      const that = this;
      this.date = index == this.date ? "" : index;
      let aYear = new Date().getFullYear();
      let aMonth = new Date().getMonth() + 1;
      that.query.day = "";
      that.query.startDay = "";
      that.query.endDay = "";
      switch (index) {
        case 1:
          that.query.day = formatDate(new Date(), "yyyy-MM-dd");
          that.query.startDay = that.query.day;
          that.query.endDay = that.query.day;
          that.tabIndex = 1;
          break;
        case 2:
          let day = new Date().getDay();
          if (day == 0) {
            //中国式星期天是一周的最后一天
            day = 7;
          }
          day--;
          let aTime = new Date().getTime() - 24 * 60 * 60 * 1000 * day;
          that.query.startDay = formatDate(new Date(aTime), "yyyy-MM-dd");
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
        case 3:
          aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
          that.query.startDay = `${aYear}-${aMonth}-01`;
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
        case 4:
          if (aMonth > 0 && aMonth < 4) {
            aMonth = "1";
          } else if (aMonth > 3 && aMonth < 7) {
            aMonth = "4";
          } else if (aMonth > 6 && aMonth < 10) {
            aMonth = "7";
          } else {
            aMonth = "10";
          }

          aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
          that.query.startDay = `${aYear}-${aMonth}-01`;
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
      }
      this.page = 1;
      this._QueryData();
    },
    handleChangeTimeStart(val) {
      this.query.day = "";
      this.date = "";
      if (this.query.endDay) {
        if (new Date(val).getTime() > new Date(this.query.endDay).getTime()) {
          this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
          this.query.startDay = "";
        }
      }
    },
    handleChangeTimeEnd(val) {
      this.query.day = "";
      this.date = "";
      if (this.query.startDay) {
        if (new Date(val).getTime() < new Date(this.query.startDay).getTime()) {
          this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
          this.query.endDay = "";
        }
      }
    },
    tabChange() {
      this.tableMaxHeight = this.$refs.main.offsetHeight;
      this.page = 1;
      this.tableData = [];
      this._QueryData();
    },
    sortChange(obj) {
      this.custom.orderField =
        obj.prop == "participationRate"
          ? 1
          : obj.prop == "answerCorrectRate"
            ? 2
            : 3;
      this.custom.orderType = obj.order == "ascending" ? 0 : 1;
      this.page = 1;
      this._QueryData();
    },
    changePage(page) {
      this.page = page;
      this._QueryData();
    },
    async changeclass() {
      await this._QuerySubjectList();
      this.page = 1;
      this._QueryData();
    },
    async changClazz() {
      await this._QuerySubjectList();
      // await this.setDate(1);
      this._QueryData();
    },
    async _QueryClassList() {
      const fetchClassList =
        this.role == "ROLE_BANZHUREN"
          ? this.$request.cTClassList
          : this.$request.tClassList;
      const { data, status, info } = await fetchClassList({ status: 1 });
      if (status === 0) {
        this.classList = data.list.map((item) => {
          return {
            value: item.classId,
            label: item.className,
          };
        });
        this.query.classId = this.classList[0]?.value;
      } else {
        this.$message.error(info);
      }
    },
    async _QuerySubjectList() {
      const fetchSubjectList =
        this.role == "ROLE_BANZHUREN"
          ? this.$request.cTSubjectList
          : this.$request.tSubjectList;

      const { data, status, info } = await fetchSubjectList({
        classId: this.query.classId,
        status: 1,
      });
      if (status === 0) {
        this.subjectList =
          data.subjectNames?.map((item) => {
            return {
              value: item,
              label: item,
            };
          }) || [];
        if (this.role == "ROLE_BANZHUREN") {
          this.subjectList.unshift({
            value: "全部",
            label: "全部",
          });
          this.query.subjectNames.push(this.subjectList[0]?.value);
        } else {
          this.query.subjectNames = this.subjectList[0]?.value;
        }
      } else {
        this.$message.error(info);
      }
    },
    async _QueryData() {
      if (!this.query.classId) {
        return;
      }
      if (this.tabIndex == 1) {
        this.periodReportList();
      } else if (this.tabIndex == 2) {
        this.phaseAnswerReport();
      } else if (this.tabIndex == 3) {
        this.phaseInteractiveReport();
      }
    },
    //分页查询课时报表列表
    async periodReportList() {
      this.loading = true;
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "") {
          query[key] = this.query[key];
        }
      }
      if (this.custom.orderField !== null) {
        query = { ...query, ...this.custom };
      }
      if (this.role != "ROLE_BANZHUREN") {
        query.subjectNames = [query.subjectNames];
      } else {
        if (
          query["subjectNames"] &&
          query["subjectNames"].length == 1 &&
          query["subjectNames"][0] == "全部"
        ) {
          query["subjectNames"] = this.subjectList.map((item) => {
            return item.value;
          });
          query["subjectNames"].shift();
        }
        if (!query["subjectNames"]) {
          this.$message.warning("请选择科目");
          return;
        }
      }
      const { data, status, info } = await this.$request.periodReportList({
        ...query,
        page: this.page,
        size: this.size,
        status: 1,
      });
      this.loading = false;
      if (status === 0) {
        this.tableData = (data?.list && [...data?.list]) || [];
        this.total = data?.count || 0;
      } else {
        this.$message.error(info);
      }
    },
    //查询阶段问答报表
    async phaseAnswerReport() {
      this.loading = true;
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "") {
          if (key == "subjectNames" && this.role != "ROLE_BANZHUREN") {
            query["subjectName"] = this.query[key];
          } else if (key == "classId") {
            query.classIds = [query.classId];
          } else {
            query[key] = this.query[key];
          }
        }
      }
      if (this.role == "ROLE_BANZHUREN") {
        if (
          query["subjectNames"] &&
          query["subjectNames"].length == 1 &&
          query["subjectNames"][0] == "全部"
        ) {
          query["subjectNames"] = this.subjectList.map((item) => {
            return item.value;
          });
          query["subjectNames"].shift();
        }
        if (!query["subjectNames"]) {
          this.$message.warning("请选择科目");
          return;
        }
      }

      const phaseAnswerReport =
        this.role == "ROLE_BANZHUREN"
          ? this.$request.cTPhaseAnswerReport
          : this.$request.phaseAnswerReport;

      const { data, status, info } = await phaseAnswerReport({
        ...query,
      });
      this.loading = false;
      if (status === 0) {
        if (this.role == "ROLE_BANZHUREN") {
          let subjectName = [];
          let tableData = data?.list.map((item) => {
            let params = {};
            item.dataList.map((items, index) => {
              if (!subjectName.includes(items.subjectName)) {
                subjectName.push(items.subjectName);
              }
              params["answerCorrectRate" + items.subjectName] =
                items.answerCorrectRate;
              params["correctRate" + items.subjectName] = items.correctRate;
              params["participationRate" + items.subjectName] =
                items.participationRate;
              params["periodCount" + items.subjectName] = items.periodCount;
              params["questionNum" + items.subjectName] = items.questionNum;
            });
            return {
              ...item,
              ...params,
            };
          });
          this.phaseOption = [...subjectName];
          this.tableData = tableData.sort((a, b) => {
            return a.studentCode - b.studentCode;
          });
        } else {
          this.tableData =
            (data?.list &&
              [...data?.list].sort((a, b) => {
                return a.studentCode - b.studentCode;
              })) ||
            [];
        }
        this.total = data.count;
      } else {
        this.$message.error(info);
      }
    },
    //查询阶段互动报表
    async phaseInteractiveReport() {
      this.loading = true;
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "") {
          if (key == "subjectNames" && this.role != "ROLE_BANZHUREN") {
            query["subjectName"] = this.query[key];
          } else if (key == "classId") {
            query.classIds = [query.classId];
          } else {
            query[key] = this.query[key];
          }
        }
      }
      if (this.role == "ROLE_BANZHUREN") {
        if (
          query["subjectNames"] &&
          query["subjectNames"].length == 1 &&
          query["subjectNames"][0] == "全部"
        ) {
          query["subjectNames"] = this.subjectList.map((item) => {
            return item.value;
          });
          query["subjectNames"].shift();
        }
        if (!query["subjectNames"]) {
          this.$message.warning("请选择科目");
          return;
        }
      }
      const phaseInteractiveReport =
        this.role == "ROLE_BANZHUREN"
          ? this.$request.cTPhaseInteractiveReport
          : this.$request.phaseInteractiveReport;

      const { data, status, info } = await phaseInteractiveReport({
        ...query,
      });
      this.loading = false;
      if (status === 0) {
        if (this.role == "ROLE_BANZHUREN") {
          let subjectName = [];
          let tableData = data?.list.map((item) => {
            let params = {};
            item.dataList.map((items, index) => {
              if (!subjectName.includes(items.subjectName)) {
                subjectName.push(items.subjectName);
              }
              params["interactionsNum" + items.subjectName] =
                items.interactionsNum;
              params["interactionsCorrectNum" + items.subjectName] =
                items.interactionsCorrectNum;
            });
            return {
              ...item,
              ...params,
            };
          });
          this.phaseInter = [...subjectName];
          this.tableData = tableData.sort((a, b) => {
            return a.studentCode - b.studentCode;
          });
        } else {
          this.tableData =
            (data?.list &&
              [...data?.list].sort((a, b) => {
                return a.studentCode - b.studentCode;
              })) ||
            [];
        }
        this.total = data.count;
      } else {
        this.$message.error(info);
      }
    },
    //导出
    async exportData() {
      if (this.exportLoading == true) return;
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "") {
          if (key == "subjectNames" && this.role != "ROLE_BANZHUREN") {
            query["subjectName"] = this.query[key];
          } else {
            query[key] = this.query[key];
          }
        }
      }
      if (this.role == "ROLE_BANZHUREN") {
        if (
          query["subjectNames"] &&
          query["subjectNames"].length == 1 &&
          query["subjectNames"][0] == "全部"
        ) {
          query["subjectNames"] = this.subjectList.map((item) => {
            return item.value;
          });
          query["subjectNames"].shift();
        }
        if (!query["subjectNames"]) {
          this.$message.warning("请选择科目");
          return;
        }
      }
      this.exportLoading = true;
      let exportData;
      if (this.role == "ROLE_BANZHUREN") {
        exportData =
          this.tabIndex == 2
            ? this.$request.cTExportPhaseAnswerReport
            : this.$request.cTExportPhaseInteractiveReport;
      } else {
        exportData =
          this.tabIndex == 2
            ? this.$request.exportPhaseAnswerReport
            : this.$request.exportPhaseInteractiveReport;
      }
      const data = await exportData({ ...query });
      this.exportLoading = false;
      if (data) {
        let blob = new Blob([data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        downloadFile("随堂问-已归档阶段报表.xlsx", blob);
      } else {
        this.$message.error("下载失败");
      }
    },
  },
};
</script>
<style>
div::-webkit-scrollbar {
  width: 3px;
  height: 10px;
}

div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #ccc;
}
</style>
<style lang="scss" scoped>
.main {
  height: 100%;
}

.table-box {
  margin: 0 20px;
  padding: 16px;
  background: #f8f8f8;
  border-radius: 5px;

  .table-cont {
    min-height: 300px;
  }

  :deep(.fa-arrow-right) {
    padding-left: 2px;
  }

  :deep(.fa-file-text) {
    padding-left: 2px;
  }
}

.fa-exchange {
  color: #667ffd;
  cursor: pointer;
  font-size: 16px;
  margin-left: 10px;
}

.dia-btn {
  border-radius: 20px;
  margin: 0 20px;
  padding: 10px 20px;
}

.dia-tips {
  padding-bottom: 10px;
}

.dia-question-box {
  padding: 16px 16px 1px;
  background: #f8f8f8;
  border-radius: 10px;

  .answer-s {
    width: 36px;
    height: 28px;
    cursor: pointer;
  }
}

.set-questions {
  display: flex;
  margin-bottom: 12px;
  width: 100%;

  .qs-num {
    flex-shrink: 0;
    margin-right: 10px;
  }

  .qs-options {
    flex: 1;

    .ipt {
      margin-bottom: 5px;
    }
  }

  .delButton {
    border-color: #ff6868;
    background: #ff6868 url("../../../assets/images/arrow.png") no-repeat center;
    background-size: 19px;
    color: transparent;
  }

  .ac {
    border-color: #ff6868;
    background: #ff6868;
    color: #fff;
  }
}

.down {
  padding-top: 16px;
}
</style>