<template>
  <!-- 目标展板 -->
  <div class="app-container" style="overflow-y: scroll">
    <el-row>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出模版</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-upload2"
          plain
          size="mini"
          @click="handleImport"
          >导入</el-button
        >
      </el-col>
    </el-row>
    <ImportModel ref="importModelRef"></ImportModel>
  </div>
</template>

<script>
import { downloadTemplate } from "@/api/powerdistribution/power-outage-control";
import ImportModel from "./components/ImportModel.vue";
export default {
  components: { ImportModel },
  data() {
    return {};
  },
  created() {},
  methods: {
    handleImport() {
      this.$refs.importModelRef.openModel();
    },
    async handleExport() {
      const res = await downloadTemplate();
      if (res) {
        const elink = document.createElement("a");
        elink.download = `停电预设模版.xlsx`;
        elink.style.display = "none";
        const blob = new Blob([res], { type: "application/vnd.ms-excel" });
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();   
        document.body.removeChild(elink);
		window.URL.revokeObjectURL(url)
      } else {
        this.$message.error("导出异常请联系管理员");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.table {
  // height: calc(100% - 150px);
}
::v-deep {
  .el-table {
    height: 100%;
    width: 100%;
    .el-table__body-wrapper {
      width: 100% !important;
      height: calc(100% - 50px) !important; // 表格高度减去表头的高度
      overflow-y: scroll;
    }
  }
}
.mt15 {
  margin-top: 20px;
}
</style>
