<template>
  <el-button :plain="props.plain" :type="props.type" :size="props.size" @click="btnClick"></el-button>
  <el-dialog title="导出表格" width="500px" v-model="showDialog">
    <el-table border :data="columns" @selection-change="selectRow">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="label" label="列名"></el-table-column>
      <el-table-column prop="name" label="数据源"></el-table-column>
    </el-table>
    <template #footer>
      <el-button type="info" @click="showDialog=false">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { exportExcel } from "/@/utils/excel";
import { ref } from "vue";
import { ElMessage } from "element-plus";

let showDialog = ref(false);
let data = ref([]);
let columns = ref([]);
let selectColumns = ref([]);


const props = defineProps({
  plain: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: "success"
  },
  size: {
    type: String,
    default: "default"
  }

});

defineExpose({
  open
});

function open(d, c) {
  showDialog.value = true;
  data.value = d;
  columns.value = c;
  selectColumns.value = [];
}

function selectRow(e) {
  selectColumns.value = e;
}

function submit() {
  try {
    exportExcel(data.value, selectColumns.value);
  } catch (e) {
    ElMessage({ type: "error", message: e, grouping: true });
  }
}

const emit = defineEmits(["click"]);

function btnClick() {
  emit("click");
}


</script>

<style scoped>

</style>
