<template>
  <div>
    <el-card>
      <h1 slot="header" style="text-align: center">
        {{ recordData.year }}年{{ recordData.batchName }}志愿智能模拟
      </h1>
      <div style="background-color: #eee" class="title">
        <div>
          {{ nickName }}，您的预估高考成绩：{{ detail.mode }} 总分：{{
            detail.score
          }}
        </div>
        <div>{{ recordData.createTime }}</div>
      </div>
      <!--表格-->
      <div style="margin-top: 20px">
        <el-table :data="detail.batch.wishes" border style="min-height: 300px">
          <el-table-column align="center" width="80">
            <template slot-scope="scope">
              <!--{{scope.$index+1}}志愿-->
              <div>{{ scope.$index + 1 }}志愿</div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="学校" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.name }}【{{ scope.row.code }}】</div>
            </template>
          </el-table-column>
          <el-table-column label="专业" align="center">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.marjors" :key="index">
                {{ item.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="是否服从" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.assignment ? "是" : "否" }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="text-align: center; margin-top: 30px">
        <el-button @click="goVolunteerList">查看记录</el-button>
        <el-button type="primary" @click="exportWord">导出报告</el-button>
      </div>
    </el-card>
    <!-- <img src="../../../../static/template.docx" alt=""> -->
  </div>
</template>

<script>
// 导出word
import docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";
import { mapState } from "vuex";
export default {
  name: "RecordDetail",
  data() {
    return {
      detail: {},
      recordData: {
        createTime: 0,
        year: 0,
      },
    };
  },
  computed: {
    ...mapState({ nickName: (state) => state.user.nickName }),
  },
  watch: {
    $route: {
      immediate: true,
      handler(val) {
        this.recordData = val.params.data;
        if (this.recordData.hasOwnProperty("createTime")) {
          this.recordData["year"] = this.getYear(this.recordData.createTime);
        }
        const detail = val.params.data.detail;
        this.detail = JSON.parse(detail);
        console.log(this.recordData);
        console.log(this.detail);
      },
    },
  },
  methods: {
    goVolunteerList() {
      this.$router.push({ name: "VolunteerList" });
    },
    getYear(currentDate) {
      let date = new Date(Date.parse(currentDate));
      return date.getFullYear();
    },
    getTableData(data) {
      let list = data.wishes;
      let len = list.length;
      for (let i = 0; i < len; i++) {
        list[i]["volunteer"] = i + 1 + "志愿";
        let sLen = data["scores"].length;
        list[i]["info"] =""
        for (let y = 0; y < sLen; y++) {
          list[i]["info"] += data["scores"][y];
        }
      }
      console.log(list);
      return list;
    },
    // 点击导出word
    exportWord: function () {
      let that = this;
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent("/template.docx", (error, content) => {
        //template.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error;
        }
        // 创建一个PizZip实例，内容为模板的内容
        let zip = new PizZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new docxtemplater().loadZip(zip);
        // 设置模板变量的值
        doc.setData({
          time: that.recordData.createTime,
          year: that.recordData.year,
          title: that.recordData.batchName,
          nickName: that.nickName,
          score: that.detail.score,
          mode: that.detail.mode,
          table: that.getTableData(that.detail.batch),
        });

        try {
          // 用模板变量的值替换所有模板变量
          doc.render();
        } catch (error) {
          // 抛出异常
          let e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties,
          };
          console.log(JSON.stringify({ error: e }));
          throw error;
        }

        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        });
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out,that.recordData.year+ that.recordData.batchName+"志愿智能模拟");
      });
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  display: flex;
  justify-content: space-between;
  line-height: 36px;
  padding: 0 10px;
}
</style>
