<template>
  <div class="statisticalAnalysis" v-if="show">
    <el-dialog
      :visible.sync="show"
      width="100%"
      height="100%"
      fullscreen
      :modal="true"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="s_box">
        <div class="s_b_top">
          <div class="s_b_t_left">
            <img src="../../assets/icon/thirdToolList/ask.png" slt="图片" />
            <div class="s_b_t_l_detail">
              <div>{{ askData.title }}</div>
              <span>{{ askData.describe }}</span>
            </div>
          </div>
          <div class="s_b_t_right" @click="close">
            <svg
              t="1730691027130"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4288"
              width="200"
              height="200"
            >
              <path
                d="M632.117978 513.833356l361.805812 361.735298a85.462608 85.462608 0 1 1-121.001515 120.789974L511.116463 634.552816 146.913186 998.756094a86.026718 86.026718 0 0 1-121.706652-121.706652L389.480325 512.775651 27.674513 150.969839A85.392095 85.392095 0 0 1 148.393973 30.250379L510.199785 392.056191l366.671258-366.671258a86.026718 86.026718 0 0 1 121.706652 121.706652z"
                p-id="4289"
              ></path>
            </svg>
            <span>{{ lang.ssExit }}</span>
          </div>
        </div>
        <div class="s_b_bottom">
          <div class="s_b_b_left">
            <span
              @click="changeShowType(0)"
              :class="{ s_b_b_l_active: showType === 0 }"
              >{{ lang.ssQuestionSituation }}</span
            >
            <span
              @click="changeShowType(1)"
              :class="{ s_b_b_l_active: showType === 1 }"
              >{{ lang.ssStudentSummary }}</span
            >
            <span
              @click="changeShowType(2)"
              :class="{ s_b_b_l_active: showType === 2 }"
              >{{ lang.ssClassSummary }}</span
            >
          </div>
          <div class="s_b_b_right">
            <div class="s_b_b_r_btnArea">
              <div class="s_b_b_r_primaryBtn" @click="refresh">{{ lang.ssRefresh }}</div>
            </div>
            <div class="s_b_b_r_item" v-if="showType === 0">
              <div class="itemBox">
                <div class="ib_title">{{ lang.ssDataStatisticsChart }}</div>
                <div
                  class="ib_echarts"
                  style="width:60%;height: 600px;min-width: 600px;"
                >
                  <eChartsView
                    id="problemSituationData"
                    v-if="problemSituationData.eChartsOption && show"
                    :data="problemSituationData.eChartsOption"
                  />
                </div>
              </div>

              <div class="itemBox">
                <div class="ib_title">{{ lang.ssDataDetails }}</div>
                <el-table
                  v-if="problemSituationData.tableData.length > 0"
                  :data="problemSituationData.tableData"
                  border
                  style="width: 100%"
                >
                  <el-table-column
                    type="index"
                    width="50"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="label"
                    width="100"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    v-for="(item, index) in problemSituationData.tableData[0]
                      .options"
                    width="70"
                    :key="index"
                    :label="`${lang.ssOption}${index + 1}`"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.options[index] }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="s_b_b_r_item" v-if="showType === 1">
              <div class="itemBox">
                <div class="ib_title">{{ lang.ssDataStatisticsChart }}</div>
                <div
                  class="ib_echarts"
                  style="width:60%;height: 600px;min-width: 600px;"
                >
                  <eChartsView2
                    id="studentSummaryData"
                    v-if="studentSummary.eChartsOption && show"
                    :data="studentSummary.eChartsOption"
                  />
                </div>
              </div>

              <div class="itemBox">
                <div class="ib_title">{{ lang.ssDataDetails }}</div>
                <el-table
                  v-if="studentSummary.tableData.length > 0"
                  :data="studentSummary.tableData"
                  border
                  style="width: 100%"
                >
                  <el-table-column
                    type="index"
                    width="50"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="label"
                    width="100"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    v-for="(item, index) in studentSummary.tableData[0].options"
                    width="70"
                    :key="index"
                    :label="`${lang.ssOption}${index + 1}`"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.options[index] }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>

            <div class="s_b_b_r_item" v-if="showType === 2">
              <div class="itemBox">
                <div class="ib_title">{{ lang.ssDataStatisticsChart }}</div>
                <div class="ib_echarts" style="width:800px;height: 600px">
                  <eChartsView3
                    id="classSummaryData"
                    v-if="classSummary.eChartsOption && show"
                    :data="classSummary.eChartsOption"
                  />
                </div>
              </div>

              <div class="itemBox">
                <div class="ib_title">{{ lang.ssDataDetails }}</div>
                <el-table
                  v-if="classSummary.tableData.length > 0"
                  :data="classSummary.tableData"
                  border
                  style="width: 100%"
                >
                  <el-table-column
                    type="index"
                    :index="indexMethod"
                    width="50"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="label"
                    width="100"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    v-for="(item, index) in classSummary.tableData[0].options"
                    width="70"
                    :key="index"
                    :label="`${lang.ssOption}${index + 1}`"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.options[index] }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import eChartsView from "./eChartsView.vue";
import eChartsView2 from "./eChartsView.vue";
import eChartsView3 from "./eChartsView.vue";
import { myMixin } from "@/mixins/mixin.js";
export default {
  mixins: [myMixin],
  props: {
    courseType: {
      type: [String, Number],
      default: ""
    },
    taskCount: {
      type: Number,
      default: 0
    }
  },
  components: {
    eChartsView,
    eChartsView2,
    eChartsView3
  },
  data() {
    return {
      show: false,
      showType: 0,
      data: null,
      tType: null,
      worksData: null,
      worksStudent: null,
      toolIndex: null,
      askData: {
        title: "",
        describe: ""
      }
    };
  },
  methods: {
    open(data) {
      console.log(data);
      this.show = true;
      this.data = data;
      this.worksStudent = data.worksStudent;
      this.toolIndex = data.toolIndex;
      if (data.worksStudent.length > 0) {
        let works = data.worksStudent[0].works
          ? JSON.parse(data.worksStudent[0].works)
          : null;
        if (works) {
          works = works[0].askJson;
          this.worksData = works.askJson;
          this.askData.title = works.askTitle;
        } else {
          this.worksData = [];
        }
      } else {
        this.worksData = [];
      }
    },
    close() {
      this.show = false;
      this.init();
			this.$emit("changeSplitScreenBehavior",{code:99})
    },
    init() {
      this.data = null;
      this.showType = 0;
      this.tType = null;
      this.worksData = null;
      this.toolIndex = null;
      this.askData = {
        title: "",
        describe: ""
      };
    },
    changeShowType(type) {
      this.showType = type;
      this.$emit("changeSplitScreenBehavior", {
        code: 2,
        form: {
          toolIndex: this.toolIndex,
          courseType: this.courseType,
          taskCount: this.taskCount,
          type: this.showType
        }
      });
      this.$forceUpdate();
    },
    indexMethod(index) {
      if (index === 0) {
        return "";
      } else {
        return index;
      }
    },
    refresh() {
      this.$emit("refresh", this.toolIndex);
    },
    refreshData(data) {
      console.log(data);
      this.data = data;
      this.worksStudent = data.worksStudent;
      this.toolIndex = data.toolIndex;
      if (data.worksStudent.length > 0) {
        let works = data.worksStudent[0].works
          ? JSON.parse(data.worksStudent[0].works)
          : null;
        if (works) {
          works = works[0].askJson;
          this.worksData = works.askJson;
          this.askData.title = works.askTitle;
        } else {
          this.worksData = [];
        }
      } else {
        this.worksData = [];
      }
    },
    splitScreenFn(data) {
			console.log("👇👇")
			console.log(data)
      if (data.type !== undefined) {
        this.showType = data.type;
      }
    }
  },
  computed: {
    // 题目情况
    problemSituationData() {
      let result = {
        eChartsOption: {
          legend: {
            selectedMode: false
          },
          grid: {
            left: 100,
            right: 100,
            top: 50,
            bottom: 50
          },
          yAxis: {
            type: "category",
            data: []
          },
          xAxis: {
            type: "value",
            axisLabel: {
              formatter: function(value) {
                return value * 100 + "%"; // 将值转换为百分比
              }
            }
          },
          series: {}
        },
        tableData: []
      };

      if (this.worksData === null || this.worksData.length === 0) {
        return result;
      }

      // 获取题目选项最多的长度
      let optionsLength = 0;

      this.worksData.forEach((item, index) => {
        if (item.checkList.length > optionsLength) {
          optionsLength = item.checkList.length;
        }
        let itemObj = {
          label: this.lang.ssQuestionNumber.replace(/\*/g, index + 1),
          question: item.askTitle,
          options: []
        };

        result.tableData.push(itemObj);
      });

      //填充选项次数
      result.tableData.forEach(item => {
        item.options = new Array(optionsLength).fill(0);
      });

      this.worksStudent.forEach((item, index) => {
        let works = item.works ? JSON.parse(item.works) : null;
        if (works) {
          let answer = works[0].anwer;
          answer.forEach((item2, index2) => {
            if (Array.isArray(item2)) {
              item2.forEach(item3 => result.tableData[index2].options[item3]++);
            } else if (typeof item2 === "number") {
              result.tableData[index2].options[item2]++;
            }
          });
        }
      });

      result.eChartsOption.yAxis.data = result.tableData
        .map(item => item.label)
        .reverse();

      let optionsDataList = result.tableData.map(i => i.options).reverse();

      let totalData = [];
      let endwaysData = [];

      optionsDataList.forEach((item, index) => {
        totalData.push(item.reduce((a, b) => a + b, 0));

        for (let i = 0; i < item.length; i++) {
          if (!endwaysData[i]) {
            endwaysData[i] = [];
          }
          endwaysData[i].push(item[i]);
        }
      });

      let series = result.tableData[0].options.map((item, index) => {
        return {
          name: `${this.lang.ssOption}${index + 1}`,
          type: "bar",
          stack: "total",
          barWidth: "60%",
          label: {
            show: true,
            formatter: params => {
              let data = Math.round(params.value * 1000) / 10;
              if (data === 0) {
                return "";
              } else {
                return data + "%";
              }
            }
          },
          data: endwaysData[index].map((d, did) => {
            return totalData[did] <= 0 ? 0 : d / totalData[did];
          })
        };
      });

      result.eChartsOption.series = series;

      return result;
    },
    //学生汇总
    studentSummary() {
      let result = {
        eChartsOption: {
          legend: {
            selectedMode: false
          },
          grid: {
            left: 100,
            right: 100,
            top: 50,
            bottom: 50
          },
          yAxis: {
            type: "category",
            data: []
          },
          xAxis: {
            type: "value",
            axisLabel: {
              formatter: function(value) {
                return value * 100 + "%"; // 将值转换为百分比
              }
            }
          },
          series: {}
        },
        tableData: []
      };

      if (this.worksData === null || this.worksData.length === 0) {
        return result;
      }

      // 获取题目选项最多的长度
      let optionsLength = 0;

      this.worksData.forEach((item, index) => {
        if (item.checkList.length > optionsLength) {
          optionsLength = item.checkList.length;
        }
      });

      this.worksStudent.forEach((item, index) => {
        let works = item.works ? JSON.parse(item.works) : null;
        let obj = {
          label: `${item.sName}`,
          index: index,
          options: new Array(optionsLength).fill(0)
        };
        if (works) {
          let answer = works[0].anwer;
          answer.forEach((item2, index2) => {
            if (Array.isArray(item2)) {
              item2.forEach(item3 => obj.options[item3]++);
              // item2.forEach(item3 => result.tableData[index2].options[item3]++);
            } else if (typeof item2 === "number") {
              obj.options[item2]++;
              // result.tableData[index2].options[item2]++;
            }
          });
          result.tableData.push(obj);
        }
      });

      result.eChartsOption.yAxis.data = result.tableData
        .map(item => item.label)
        .reverse();

      let optionsDataList = result.tableData.map(i => i.options).reverse();

      let totalData = [];
      let endwaysData = [];

      optionsDataList.forEach((item, index) => {
        totalData.push(item.reduce((a, b) => a + b, 0));

        for (let i = 0; i < item.length; i++) {
          if (!endwaysData[i]) {
            endwaysData[i] = [];
          }
          endwaysData[i].push(item[i]);
        }
      });

      let series = result.tableData[0].options.map((item, index) => {
        return {
          name: `${this.lang.ssOption}${index + 1}`,
          type: "bar",
          stack: "total",
          barWidth: "60%",
          label: {
            show: true,
            formatter: params => {
              let data = Math.round(params.value * 1000) / 10;
              if (data === 0) {
                return "";
              } else {
                return data + "%";
              }
            }
          },
          data: endwaysData[index].map((d, did) => {
            return totalData[did] <= 0 ? 0 : d / totalData[did];
          })
        };
      });

      result.eChartsOption.series = series;

      return result;
    },
    //班级汇总
    classSummary() {
      let result = {
        eChartsOption: {
          tooltip: {
            trigger: "item"
          },
          legend: {
            top: "5%",
            left: "center"
          },
          series: [
            {
              type: "pie",
              radius: ["40%", "70%"],
              name: this.lang.ssClassSummary,
              avoidLabelOverlap: false,
              padAngle: 0,
              itemStyle: {
                borderRadius: 10
              },
              label: {
                formatter: "{b}：{c}" + this.lang.ssPerson,
                fontSize: 30
              },
              labelLine: {
                show: true
              },
              data: []
            }
          ]
        },
        tableData: []
      };

      // 获取题目选项最多的长度
      let optionsLength = 0;

      this.worksData.forEach((item, index) => {
        if (item.checkList.length > optionsLength) {
          optionsLength = item.checkList.length;
        }
        let itemObj = {
          label: this.lang.ssQuestionNumber.replace(/\*/g, index + 1),
          question: item.askTitle,
          options: []
        };

        result.tableData.push(itemObj);
      });

      //填充选项次数
      result.tableData.forEach(item => {
        item.options = new Array(optionsLength).fill(0);
      });

      this.worksStudent.forEach((item, index) => {
        let works = item.works ? JSON.parse(item.works) : null;
        if (works) {
          let answer = works[0].anwer;
          answer.forEach((item2, index2) => {
            if (Array.isArray(item2)) {
              item2.forEach(item3 => result.tableData[index2].options[item3]++);
            } else if (typeof item2 === "number") {
              result.tableData[index2].options[item2]++;
            }
          });
        }
      });

      let totalData = {
        label: this.lang.ssTotal,
        question: this.lang.ssTotal,
        options: new Array(optionsLength).fill(0)
      };

      result.tableData.forEach(i => {
        i.options.forEach((i2, index2) => {
          totalData.options[index2] += i2;
        });
      });

      result.tableData.unshift(totalData);

      totalData.options.forEach((item, index) => {
        let obj = {
          value: item,
          name: `${this.lang.ssOption}${index + 1}`
        };
        result.eChartsOption.series[0].data.push(obj);
      });

      return result;
    }
  }
};
</script>

<style scoped>
.statisticalAnalysis {
  width: 100vw;
  height: 100vh;
}

.statisticalAnalysis >>> .el-dialog__header,
.statisticalAnalysis >>> .el-dialog__footer {
  display: none; /* 隐藏头部和底部 */
}

.statisticalAnalysis >>> .el-dialog__body {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
  overflow: auto;
}

.s_box {
  width: 100%;
  height: 100%;
}

.s_b_top {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-self: center;
  box-sizing: border-box;
  border-bottom: 1px solid #dee0e3;
}

.s_b_t_left {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
}

.s_b_t_left > img {
  width: 80px;
  height: 80px;
  margin-left: 20px;
}

.s_b_t_l_detail {
  width: 100%;
  height: 70px;
  box-sizing: border-box;
  padding: 10px 20px;
}

.s_b_t_l_detail > div {
  font-size: 18px;
  font-weight: bold;
}

.s_b_t_l_detail > span {
  font-size: 16px;
  color: #beb4b4;
  display: block;
  margin-top: 5px;
}

.s_b_t_right {
  width: 100px;
  height: 50px;
  margin: auto;
  margin-right: 40px;
  margin-left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.s_b_t_right > svg {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  fill: #000;
  cursor: pointer;
}

.s_b_t_right > span {
  font-size: 20px;
  font-weight: bold;
  color: #000;
  cursor: pointer;
}

.s_b_bottom {
  width: 100%;
  height: calc(100% - 100px);
  display: flex;
}

.s_b_b_left {
  width: 300px;
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid #beb4b4;
  padding-top: 20px;
}

.s_b_b_left > span {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 22px;
  margin-top: 20px;
  box-sizing: border-box;
  padding-left: 50px;
}

.s_b_b_l_active {
  font-weight: bold;
}

.s_b_b_right {
  width: calc(100% - 300px);
  height: 100%;
  position: relative;
}

.s_b_b_r_btnArea {
  width: auto;
  height: auto;
  position: absolute;
  right: 30px;
  top: 30px;
}

.s_b_b_r_primaryBtn {
  width: auto;
  height: auto;
  background-color: #007aff;

  color: #fff;
  font-size: 16px;
  padding: 10px 30px;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0px 2px 5px 0px #1d398314;

  box-shadow: 0.5px 0.5px 10px 2px #1d39830d;
}

.s_b_b_r_item {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.itemBox {
  width: 100%;
  height: auto;
  margin-bottom: 40px;
}

.ib_title {
  font-size: 24px;
  /* font-weight: bold; */
  margin-bottom: 20px;
}
</style>
