<template>
  <div class="center_content">
    <div class="myAnliBox">
      <div class="anLi" v-for="(an, anIndex) in anliBox" :key="anIndex">
        <div class="anliTop">
          <div class="anliTopLeft">
            <div>比赛名称：广东省PBL案例征集</div>
            <div>比赛类别：{{ an.typename ? an.typename : "暂无分类" }}</div>
          </div>
          <div class="anliTopRight">创建人：{{ an.username }}</div>
        </div>

        <div class="anliMiddle">
          <div class="anliBox">
            <div class="anliImg">
              <img
                :src="
                  JSON.parse(an.info).cover && JSON.parse(an.info).cover.length
                    ? JSON.parse(an.info).cover[0].url
                    : noBanner
                "
                alt=""
              />
            </div>
            <div class="anliNav">
              <div>项目名称：{{ JSON.parse(an.info).title }}</div>
              <div>单位：{{ an.schoolName }}</div>
              <div>
                {{ JSON.parse(an.info).courseText }}
              </div>
              <div class="people">
                <div class="man">
                  <img src="../../../../assets/people.png" alt />
                </div>
                <div class="person">0人</div>
              </div>
            </div>
          </div>
        </div>

        <div class="anliBottom">
          <div class="bottomLeft">
            当前状态：{{ an.state == 0 ? "未提交" : "已提交" }}
          </div>
          <div class="bottomRight">
            <div class="rightButton" @click="updateState(an.id)">提交</div>
            <div class="rightButton" @click="exportAnli(an)">导出</div>
            <div class="rightButton">开始教学</div>
            <div
              class="rightButton"
              @click="
                goTo(
                  '/addRace?userid=' + userid + '&oid=' + oid + '&aid=' + an.id
                )
              "
            >
              编辑
            </div>
            <div
              class="rightButton"
              style="background: #225ac7"
              @click="
                goTo(
                  '/anliDetail?userid=' +
                    userid +
                    '&oid=' +
                    oid +
                    '&aid=' +
                    an.id
                )
              "
            >
              查看详情
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["userid", "oid"],
  data() {
    return {
      anliBox: [],
      noBanner: require("../../../../assets/noBanner.jpg"),
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    selectAnLi() {
      let params = {
        uid: this.userid,
      };
      this.ajax
        .get(this.$store.state.api + "selectRaceList", params)
        .then((res) => {
          this.anliBox = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    updateState(id) {
      let params = {
        id: id,
      };
      this.ajax
        .get(this.$store.state.api + "updateRaceState", params)
        .then((res) => {
          this.$message({
            message: "提交成功",
            type: "success",
          });
          this.selectAnLi();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    exportAnli(res) {
      console.log(res);
      let _html = "";
      var _title = "";
      let info = JSON.parse(res.info);
      _title += `
                <iframe style="display: none;" name="downloadFile"></iframe>
                <h1>项目名称：${info.title}</h1>
     `;
      _title += `<h3>比赛类别：${res.typename}</h3>`;
      _title += `<h4>单位：${res.schoolName}</h4>`;
      _title += `<h4>项目简介：${info.courseText}</h4>`;

      let overview = JSON.parse(res.overview);
      var _overview = "";
      var oArray = [
        { j: "driQuestion", name: "驱动性问题" },
        { j: "tarDesign", name: "目标设计" },
        { j: "actiDesign", name: "活动设计" },
        { j: "evaDesign", name: "评价设计" },
        { j: "other", name: "其他补充" },
      ];
      for (var k = 0; k < oArray.length; k++) {
        _overview += `<h2>${oArray[k].name}</h2>`;
        //       <a :href="`${完整的下载地址}`" target="downloadFile">{{文件名称}}</a>
        // <iframe style="display: none;" name="downloadFile"></iframe>
        _overview += `<div>${overview[oArray[k].j].brief}</div>`;
        var _div = document.createElement("div");
        for (var i = 0; i < overview[oArray[k].j].data.length; i++) {
          var _div2 = document.createElement("div");
          _div2.innerHTML = ` <a href="${
            overview[oArray[k].j].data[i].url
          }" target="downloadFile">${overview[oArray[k].j].data[i].name}</a>`;
          _div.appendChild(_div2);
        }
        _overview += `<div>${_div.innerHTML}</div>`;
      }

      let process = JSON.parse(res.process).actBox;
      var _process = "";
      for (var z = 0; z < process.length; z++) {
        _process += `<h3>活动${z + 1}</h3>`;
        _process += `<h3>活动名称:${process[z].actName}</h3>`;
        let pAarray = [
          { j: "driQuestion", name: "活动实施" },
          { j: "tarDesign", name: "活动工具" },
          { j: "tarDesign", name: "活动描述" },
          { j: "actiDesign", name: "活动成果" },
        ];
        for (var i = 0; i < pAarray.length; i++) {
          _process += `<h3>${pAarray[i].name}：${
            process[z][pAarray[i].j].title
          }</h3>`;
          _process += `<div>活动描述</div>`;
          _process += `<div>${process[z][pAarray[i].j].brief}</div>`;
          _process += `<div>学习内容</div>`;
          var _div = document.createElement("div");
          for (var c = 0; c < process[z][pAarray[i].j].data.length; c++) {
            var _div2 = document.createElement("div");
            _div2.innerHTML = ` <a href="${
              process[z][pAarray[i].j].data[c].url
            }" target="downloadFile">${
              process[z][pAarray[i].j].data[c].name
            }</a>`;
            _div.appendChild(_div2);
          }
          _process += `<div>${_div.innerHTML}</div>`;
        }
      }

      let results = JSON.parse(res.results);
      let _results = "";
      _results += `<h3>项目成效</h3>`;
      _results += `<div>${results.proEffText}</div>`;
      _results += `<h3>项目反思</h3>`;
      _results += `<div>${results.proRefText}</div>`;

      _html = _title + _overview + _process + _results;
      console.log("_overview", overview);
      console.log("_process", process);
      console.log("_results", results);
      this.generate(_html, { title: info.title, username: res.username });
    },
    async generate(a, data) {
      // 将html文件中需要用到的数据挂载到store上
      this.$store.commit("update", ["report", a]);
      console.log(this.$store.state.report);
      const content = `<!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>报告</title>
      </head>
      <body>
      ${this.$store.state.report}
      </body>
      </html>`;
      // debugger
      // 生成报告
      const link = document.createElement("a");
      let dname = data.title + "-" + data.username + ".html";
      // link.download = "报告.html"; // 文件名
      link.download = dname; // 文件名
      link.style.display = "none";
      // 创建文件流
      // 创建bolb实例时，内容一定要放在[]中
      const blob = new Blob([content], {
        type: "text/plain;charset='utf-8'",
      });
      link.href = window.URL.createObjectURL(blob);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
  },
  created() {
    this.selectAnLi();
  },
};
</script>

<style scoped>
@media screen and (max-width: 1280px) {
  .myAnliBox {
    /* height: 430px !important; */
  }
}
.myAnliBox {
  /* height: 500px; */
  overflow: auto;
  overflow-x: hidden;
  height: 100%;
  /* box-shadow: inset 0px 14px 7px -14px #b9b9b9; */
}
.center_content {
  width: 100%;
  height: 100%;
}
.anLi {
  background: #fff;
  width: 95%;
  margin: 20px auto;
  border-radius: 10px;
}
.anliTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.anliTopLeft {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  color: #afafaf;
  padding: 20px 0 10px 30px;
}
.anliTopLeft > div:nth-child(2) {
  padding-left: 20px;
}
.anliTopRight {
  padding: 20px 30px 10px 0;
}
.anliMiddle {
  padding: 0 0 5px 30px;
}
.anliImg {
  width: 200px;
  height: 115px;
  min-width: 200px;
}
.anliImg > img {
  width: 100%;
  height: 100%;
}
.people {
  display: flex;
}

.person {
  margin-left: 10px;
  line-height: 18px;
}
.man {
  width: 16px;
  height: 16px;
}

.man > img {
  width: 100%;
  height: 100%;
}
.anliBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.anliNav {
  padding-left: 30px;
  width: 100%;
}
.anliNav > div:nth-child(1) {
  font-size: 24px;
  /* font-weight: bold; */
}
.anliNav > div:nth-child(2) {
  /* font-weight: bold; */
  margin: 10px 0 10px 0;
}
.anliNav > div:nth-child(3) {
  color: #aba8a8;
  margin-bottom: 10px;
  height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80%;
}
.anliBottom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 15px 30px;
}
.bottomRight {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.rightButton {
  background: #499eef;
  color: #fff;
  /* width: 60px; */
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 20px;
  padding: 0 15px;
}
</style>