<template>
  <el-dialog
    title="导出预览"
    width="1400px"
    :model-value="modelValue"
    @close="closed"
  >
    <el-table :data="data" :id="myId" style="width: 100%" border>
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column
        v-for="(item, index) in tabOption"
        :key="index + 'tab'"
        :prop="item.prop"
        :label="item.label"
        align="center"
      >
        <template v-if="item.dict" #default="{ row }">
          <dict-tag :options="item.dict" :value="row[item.prop]" :tag="false" />
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closed">取消</el-button>
        <el-button type="primary" @click="exportExcel">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, ref, onMounted, getCurrentInstance } from "vue";
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
const tabRef = ref(null);
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  tabOption: {
    type: Array,
    require: []
  },
  data: {
    type: Array,
    required: []
  },
  myId: {
    type: String,
    require: ""
  },
  title: {
    type: String,
    require: ""
  }
});
const emits = defineEmits(["update:modelValue"]);
const closed = () => {
  emits("update:modelValue", false);
};
const { proxy } = getCurrentInstance();
function exportExcel() {
  let xlsxParam = { raw: true };
  let wb = XLSX.utils.table_to_book(
    document.querySelector("#" + props.myId),
    xlsxParam
  );
  let wbout = XLSX.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: "array"
  });
  closed();
  try {
    FileSaver.saveAs(
      new Blob([wbout], { type: "application/octet-stream" }),
      `${props.title}.xlsx`
    );
  } catch (e) {
    if (typeof console !== "undefined") console.log(e, wbout);
  }
  return wbout;
}
</script>

<style>
</style>