<template>
  <el-container class="condition">
    <el-main style="padding: 50px 150px 20px 150px">
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="条件"></el-step>
        <el-step title="地理位置与周边情况"></el-step>
        <el-step title="社会应急资源"></el-step>
      </el-steps>
      <div>
        <Term
          v-if="!active"
          @close="close"
          @termClick="termClick"
          :termForm="termForm"
        />
        <Geography
          v-else-if="active === 1"
          @geographyClick="geographyClick"
          @lastGeography="lastGeography"
          :geographyForm="geographyForm"
        />
        <Society
          v-else-if="active === 2"
          @lastSociety="lastSociety"
          :societyForm="societyForm"
          @wordAdd="wordAdd"
          :fullscreenLoading="fullscreenLoading"
        />
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { saveAdd } from "@/api/homes.js";
import Society from "./tabs/society.vue";
import Term from "./tabs/term.vue";
import Geography from "./tabs/geography.vue";
export default {
  props: ["itemId"],
  name: "RuoyiCondition",
  components: {
    Term,
    Geography,
    Society,
  },
  data() {
    return {
      fullscreenLoading: false,
      active: 0,
      termForm: {}, //用来储存第一步添加的数据，地理页面点击上一步数据返回做回显使用
      geographyForm: {}, //第二步的数据
      societyForm: {}, //第三步数据
    };
  },

  mounted() {},

  methods: {
    //条件点击下一步
    termClick(val) {
      //参数为第一步页面所有数据
      this.active = 1;
      this.termForm = val;
    },
    //条件点击返回
    close() {
      this.$emit("close", false);
      this.termForm = {};
      this.geographyForm = {};
    },
    //地理点击上一步
    lastGeography(val) {
      this.geographyForm = val;
      //参数为第二步的数据，做回显使用
      this.active = 0;
    },
    geographyClick(val) {
      this.geographyForm = val;
      //参数为第二步的数据，做回显使用
      this.active = 2;
    },
    //社会资源点击上一步
    lastSociety(val) {
      this.active = 1;
      this.societyForm = val;
    },
    //保存为word
    wordAdd(val) {
      this.fullscreenLoading = true
      this.societyForm = val;

      //调用接口
      saveAdd({
        tyDrillInfoId: this.itemId,
        ...this.societyForm,
        ...this.geographyForm,
        ...this.termForm,
      }).then((res) => {
        console.log(res)

          this.$emit("close", false);
          let blob = new Blob([res], {
                        type: `application/msword` //word文档为msword,pdf文档为pdf
                    });
                    let objectUrl = URL.createObjectURL(blob);
                    let link = document.createElement("a");
                    let fname = `推演`; //下载文件的名字
                    link.href = objectUrl;
                    link.setAttribute("download", fname);
                    document.body.appendChild(link);
                    link.click();
                    loading.close();
                    this.$message({
                        type: "success",
                        message: "保存成功"
                    })
                    this.fullscreenLoading = false

      });
    },
  },
};
</script>

<style lang="scss" scoped>
.condition {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  background: rgb(21, 43, 62);
}
::v-deep .el-table .cell {
  padding: 0 !important;
}
</style>
