<template>
  <div style="background: #d0d6e4; width: 100%; margin: 0; position: relate">
    <!-- <div class="pb_content_body" style="height: 100%">
    </div>-->
    <div class="blackBottom">
      <div
        style="
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: stretch;
          padding-left: 10px;
        "
      >
        <div class="logoLive">
          <img src="../../assets/icon/logo.png" alt />
        </div>
        <div style="color: #fff; line-height: 45px; padding-left: 15px">湖心亭看雪可可乐博模拟展示课件</div>
      </div>
    </div>
    <div class="isNoOther">
      <div class="imgMiddle" :class="type !== 0 || steps > 0 ? 'imghalf' : 'imgMiddle'">
        <!-- <img src="../../assets/icon/kc1.png" alt /> -->
        <!-- <iframe
          style="width: 100%; height: 100%; border: none"
          src="https://view.officeapps.live.com/op/view.aspx?src=https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0701%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656644341323.pptx"
        ></iframe>-->
        <pdf :pdfUrl="pdfUrl" style="width: 100%; height: 100%;" :getPage="getPage"></pdf>
      </div>
      <div
        v-if="type == 1 || type == 2"
        style="
          background: #d0d6e4;
          height: 100%;
          min-width: 40%;
          max-width: 40%;
          overflow: auto;
          padding: 0px 0 50px;
        "
      >
        <div style="background: #fff; height: 92%; width: 96%; margin: 10px auto">
          <div style="color: #bfbfbf; padding: 15px 0 20px 25px; font-size: 20px">答题查看</div>

          <div class="answerBox" v-if="type == 1">
            <div class="answerTimuBox" v-for="item in 1" :key="item">
              <div class="choose_style">
                <!-- {{
                  item
                }}、小明有3本不同的语文书，2本不同的数学书，4本不同的英语书，小明整理书架时，要把这些书放在同一层，且相同科目的书要相邻摆放，问共有多少种摆放方式？-->
                <span>A</span>
                <span>B</span>
                <span>C</span>
                <span>D</span>
              </div>
              <el-button style="margin: 0 auto" @click="showMember(item)">开始答题</el-button>
            </div>
          </div>
          <div class="answerBox" v-else>
            <div class="memberBox" v-if="answerType == 1">
              <div
                :class="{ pAnswer: item.is == 2 }"
                v-for="(item, index) in studentArray"
                :key="index"
              >{{ item.name }}</div>
            </div>
            <div class="memberBox" v-else>
              <div
                :class="{ pAnswer: item.is == 2 }"
                v-for="(item, index) in studentArray2"
                :key="index"
                @click="whoAnswer(item, index)"
              >{{ item.name }}</div>
            </div>
            <div style="color: #948bdc; padding-top: 15px" v-if="answerType == 1">正在答题......</div>
            <div class="viewSta" @click="lookData" v-if="answerType == 1">查看数据统计</div>
          </div>
        </div>
      </div>
      <div
        v-if="type == 3"
        style="
          background: #d0d6e4;
          height: 92%;
          min-width: 40%;
          max-width: 40%;
          overflow: auto;
          padding: 0px 0 50px;
        "
      >
        <div
          style="
            background: #fff;
            width: 96%;
            margin: 10px auto;
            position: relative;
          "
        >
          <div class="close" @click="(steps = 0), (type = 0)">
            <img src="../../assets/icon/close.png" alt />
          </div>
          <div style="color: #bfbfbf; padding: 15px 0 20px 25px">数据统计</div>
          <div style="padding-left: 25px">
            目前A选项
            <span class>{{ answerJson.A }}票</span>、B选项
            <span>{{ answerJson.B }}票</span>、C选项
            <span>{{ answerJson.C }}票</span>、D选项
            <span>{{ answerJson.D }}票</span>
          </div>
          <div class="szt">
            <!-- <img src="../../assets/szt.png" alt /> -->
            <AnswerData :problemJson="answerJson"></AnswerData>
          </div>
          <span slot="footer" class="dialog-footer sztFooter">
            <el-button type="primary" @click="type = 0">下一步</el-button>
            <el-button type="primary" @click="type = 2">返回</el-button>
          </span>
        </div>
      </div>
      <div
        class="answerBox"
        style="
          width: 38.5%;
          max-width: 38.5%;
          overflow: auto;
          background: rgb(255, 255, 255);
          height: 91.5%;
          position: relative;
          margin: 10px 15px;
        "
        v-if="steps == 1"
      >
        <!-- <div
          style="
            border-bottom: 3px solid rgb(44, 131, 238);
            width: 70px;
            padding-bottom: 3px;
            text-align: center;
            margin-bottom: 20px;
          "
        >
          选择工具
        </div>-->
        <div v-if="toolCount == 0" style="height: 90%">
          <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
          ></iframe>
        </div>
        <div v-if="toolCount == 1" style="height: 90%">
          <iframe style="width: 100%; height: 100%; border: none" src="https://iwb.cocorobo.cn/"></iframe>
        </div>
        <div v-if="toolCount == 2" style="height: 90%">
          <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
          ></iframe>
        </div>
        <div class="nextStepOne" @click="nextTool">下一步</div>
      </div>

      <div
        class="answerBox"
        style="
          width: 38.5%;
          max-width: 38.5%;
          overflow: auto;
          background: rgb(255, 255, 255);
          height: 91.5%;
          position: relative;
          margin: 10px 15px;
        "
        v-if="steps == 2"
      >
        <div
          style="
            color: #b7b7b7;
            border-left: 5px solid #a5b6e2;
            padding-left: 7px;
            height: 25px;
            line-height: 25px;
          "
        >查看作业</div>
        <div class="workBox">
          <div class="works" v-for="w in 3" :key="w">
            <div class="workImg">
              <img :src="mr" alt />
            </div>
            <div class="workDetail">
              <div class="workLeft">
                <div class="workTx">
                  <img src="../../assets/avatar.png" alt />
                </div>
                <div class="workName">约翰强尼</div>
              </div>
              <div class="workRight">07-04 18:21</div>
            </div>
          </div>
        </div>
        <div class="returnButton" @click=" (steps = 0), (type = 0)">返回</div>
      </div>
    </div>

    <div class="blackBottomB">
      <div style="display: flex">
        <div class="blackButton" @click="answerWork">开始答题</div>
        <div class="blackButton" @click="(steps = 1), (type = 0)">查看工具</div>
        <div class="blackButton" @click="checkStudentAnswer">选择学生回答</div>
        <div class="blackButton" @click=" (steps = 2), (type = 0)">查看作业</div>
      </div>
      <!-- <div
        class="blackButton"
        style="margin-right: 10px"
        @click="dialogVisible2 = true"
      >
        查看报告
      </div>-->
    </div>
    <el-dialog
      title="选择答题"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div
        style="text-align: center; padding: 20px 0 50px 0; font-size: 18px"
      >是否让“{{ answerStudent }}”同学进行单独答题？</div>
      <div
        style="
          width: 200px;
          background: #4d8ae0;
          height: 35px;
          margin: 0 auto;
          text-align: center;
          line-height: 35px;
          color: #fff;
          border-radius: 5px;
          cursor: pointer;
        "
        @click="dialogVisible = false"
      >确定</div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible1"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">正在开发中！</div>
      <div
        style="
          width: 200px;
          background: #4d8ae0;
          height: 35px;
          margin: 0 auto;
          text-align: center;
          line-height: 35px;
          color: #fff;
          border-radius: 5px;
          cursor: pointer;
        "
        @click="dialogVisible1 = false"
      >确定</div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible2"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">课程结束后才有报告！</div>
      <div
        style="
          width: 200px;
          background: #4d8ae0;
          height: 35px;
          margin: 0 auto;
          text-align: center;
          line-height: 35px;
          color: #fff;
          border-radius: 5px;
          cursor: pointer;
        "
        @click="dialogVisible2 = false"
      >确定</div>
    </el-dialog>
  </div>
</template>

<script>
import "../../common/aws-sdk-2.235.1.min";
import EditorBar from "../../components/tools/wangEnduit";
import AnswerData from "./components/answerData";
import pdf from "./components/pdf";
export default {
  components: { EditorBar, AnswerData, pdf },
  data() {
    return {
      pdfUrl:
        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf",
      isLoading: false,
      formLabelWidth: "100px",
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      mr: require("../../assets/icon/kc1.png"),
      timu: [],
      // a: false,
      // b: false,
      // c: false,
      type: 0,
      steps: 0,
      answerType: 1,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      toolCount: 0,
      answerBox: "",
      answer: [
        { name: "A.1568" },
        { name: "B.720" },
        { name: "C.1728" },
        { name: "D.480" },
      ],
      studentArray: [
        { name: "张可松", is: 1 },
        { name: "陈佳佳", is: 1 },
        { name: "许琦基", is: 1 },
        { name: "洛维奇", is: 1 },
        { name: "罗伟", is: 1 },
        { name: "李孝雄", is: 1 },
        { name: "李琪琪", is: 1 },
        { name: "黄子韬", is: 1 },
        { name: "张嘉琪", is: 1 },
        { name: "陈家", is: 1 },
        { name: "张可", is: 1 },
        { name: "庄小小", is: 1 },
        { name: "梁思成", is: 1 },
        { name: "房小玲", is: 1 },
        { name: "李卫涛", is: 1 },
        { name: "李玫儿", is: 1 },
        { name: "张可梦", is: 1 },
        { name: "李琦", is: 1 },
        { name: "梁惠", is: 1 },
        { name: "许佳琪", is: 1 },
      ],
      studentArray2: [
        { name: "张可松", is: 1 },
        { name: "陈佳佳", is: 1 },
        { name: "许琦基", is: 1 },
        { name: "洛维奇", is: 1 },
        { name: "罗伟", is: 1 },
        { name: "李孝雄", is: 1 },
        { name: "李琪琪", is: 1 },
        { name: "黄子韬", is: 1 },
        { name: "张嘉琪", is: 1 },
        { name: "陈家", is: 1 },
        { name: "张可", is: 1 },
        { name: "庄小小", is: 1 },
        { name: "梁思成", is: 1 },
        { name: "房小玲", is: 1 },
        { name: "李卫涛", is: 1 },
        { name: "李玫儿", is: 1 },
        { name: "张可梦", is: 1 },
        { name: "李琦", is: 1 },
        { name: "梁惠", is: 1 },
        { name: "许佳琪", is: 1 },
      ],
      askCount: 0,
      answerJson: {
        A: 0,
        B: 0,
        C: 0,
        D: 0,
      },
      answerStudent: "",
      tools: [
        "",
        "",
        { tools: [""] }, //选择题
        { tools: [""] }, //倒计时
        { tools: [""] }, //问答题
        { tools: [""] }, //问答题
        { tools: [""] }, //思维导图/电子白板
        { tools: [""] }, //选人回答
        { tools: [""] }, //倒计时、分小组
        { tools: [""] }, //思维导图/电子白板/思维网格
        { tools: [""] }, //查看作业
        { tools: [""] }, //查看作业
        "", //查看作业
      ],
    };
  },
  methods: {
    change(val) {
      console.log(val);
    },
    goTo(path) {
      this.$router.push(path);
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    jump(cid) {
      window.parent.postMessage({ cid: cid, type: "1" }, "*");
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
    },
    init() {},
    handleClose(done) {
      done();
    },
    //uuid生成
    guid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (
        c
      ) {
        var r = (Math.random() * 16) | 0,
          v = c == "x" ? r : (r & 0x3) | 0x8;
        return v.toString(16);
      });
    },
    time() {
      if (!this.now) {
        this.now = new Date().getTime();
        return true;
      } else {
        let time = new Date().getTime();
        if (time - this.now > 3000) {
          this.now = time;
          return true;
        } else {
          return false;
        }
      }
    },
    randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    },
    addTool(t) {
      if (t == 1) {
        window.parent.postMessage({ tools: "1" }, "*");
      } else if (t == 3) {
        window.parent.postMessage({ tools: "3" }, "*");
      } else if (t == 7) {
        window.parent.postMessage({ tools: "7" }, "*");
      }
    },
    nextTool() {
      if (this.toolCount < 2) {
        this.toolCount++;
      } else {
        this.steps = 0;
        this.type = 0;
        this.toolCount = 0;
      }
    },
    answerWork() {
      this.type = 1;
      this.answerType = 1;
      this.steps = 0;
    },
    checkStudentAnswer() {
      for (var i = 0; i < this.studentArray.length; i++) {
        this.studentArray2[i].is = 1;
      }
      this.steps = 0;
      this.type = 2;
      this.answerType = 2;
    },
    showMember(i) {
      this.type = 2;
      let _this = this;
      setTimeout(() => {
        for (var i = 0; i < 10; i++) {
          var a = _this.randomNum(0, _this.studentArray.length - 1);
          _this.studentArray[a].is = 2;
        }
        this.askCount = 0;
        for (var i in _this.studentArray) {
          if (_this.studentArray[i].is == 2) {
            _this.askCount++;
          }
        }
        i = 0;
        this.answerJson = {
          A: 0,
          B: 0,
          C: 0,
          D: 0,
        };
        for (var i = 0; i < _this.askCount; i++) {
          var a = _this.randomNum(0, 3);
          if (a === 0) {
            _this.answerJson.A++;
          } else if (a === 1) {
            _this.answerJson.B++;
          } else if (a === 2) {
            _this.answerJson.C++;
          } else if (a === 3) {
            _this.answerJson.D++;
          }
        }
      }, 2000);
    },
    whoAnswer(item, index) {
      if (this.answerType != 2) {
        return;
      }
      for (var i = 0; i < this.studentArray.length; i++) {
        this.studentArray2[i].is = 1;
      }
      this.studentArray2[index].is = 2;
      this.answerStudent = item.name;
      this.dialogVisible = true;
    },
    lookData() {
      this.type = 3;
    },
    getPage(page) {
      console.log(page);
      let params = [
        {
          page: page,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "updatePptPage", params)
        .then((res) => {
          
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {},
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 9px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.blackBottom {
  background: rgb(0, 0, 0);
  height: 45px;
  width: 100%;
}

.imgMiddle {
  width: 100%;
  height: calc(100% - 45px);
  max-height: 920px;
}

.imgMiddle > img,
.imghalf > img,
.szt > img,
.logoLive > img,
.close > img {
  width: 100%;
  height: 100%;
  max-height: 920px;
}

.blackBottomB {
  position: sticky;
  bottom: 0px;
  left: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  background: rgb(0, 0, 0);
  height: 45px;
  width: 100%;
}

.blackBottomB > div:nth-child(1) {
  margin-left: 10px !important;
}

.blackButton {
  color: #fff;
  background: #066ebe;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 0 5px;
  border-radius: 5px;
  font-size: 15px;
  cursor: pointer;
}

.isNoOther {
  width: 100%;
  height: 100%;
  display: flex;
}

.imghalf {
  width: 60% !important;
  height: calc(100% - 45px);
  max-height: 920px;
}
.answerBox {
  padding-left: 25px;
  padding: 25px;
  box-sizing: border-box;
  /* max-height: 800px;
  overflow: auto; */
}
.answerTimuBox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  padding-bottom: 15px;
}
.memberBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.memberBox > div {
  background: rgb(79 213 163);
  width: 120px;
  color: #fff;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  margin: 0 15px 15px 0;
  cursor: pointer;
}

.memberBox .pAnswer {
  background: rgb(55 197 144);
}

.viewSta {
  background: rgb(97, 97, 97);
  color: #bebebe;
  margin: 20% auto 20px;
  width: 300px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  cursor: pointer;
}
.szt {
  width: 100%;
  margin: 20px auto;
}
.sztFooter {
  padding: 20px 10px 50px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}
.toolList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}
.tools > div:nth-child(1) {
  width: 60px;
}
.tools > div:nth-child(1) > img,
.workImg > img,
.workTx > img {
  width: 100%;
  height: 100%;
}
.nextStepOne {
  background: #6b92c9;
  color: #fff;
  width: 110px;
  text-align: center;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  border-radius: 5px;
  position: absolute;
  bottom: 50px;
  left: 40%;
  cursor: pointer;
}
.logoLive {
  width: 35px;
}
.anserBoxCss {
  box-sizing: border-box;
  padding: 20px 0;
}
.anserBoxCss >>> .el-radio__label {
  font-size: 18px;
}
.anserBoxCss >>> .el-radio__inner {
  border-radius: 0px !important;
}

.choose_style {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 10px 0 30px;
}

.choose_style span {
  background: #f8f9ff;
  color: #677fff;
  border: 1px solid #95b5ff;
  padding: 15px 20px;
  font-size: 25px;
  border-radius: 18px;
  cursor: pointer;
}

.choose_style span + span {
  margin-left: 25px;
}

.choose_style .active {
  color: #fff;
  background: #5e78fa;
}
.close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  cursor: pointer;
}
.workBox {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.works {
  width: 31%;
  border: 1px solid #ececec;
  height: 160px;
  margin: 0 10px 10px 0;
}
.workImg {
  width: 100%;
}
.workDetail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 3px;
}
.workLeft {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-left: 5px;
}
.workTx {
  width: 25px;
}
.workName {
  font-size: 14px;
  padding-left: 5px;
}
.workRight {
  font-size: 14px;
  color: #ccc;
  padding-right: 10px;
}
.returnButton {
  position: absolute;
  bottom: 20px;
  width: 230px;
  background: #616161;
  left: 35%;
  color: #ababab;
  text-align: center;
  border-radius: 5px;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  cursor: pointer;
}
</style>
