<template>
  <div>
    <vue-excel-xlsx
      class="btn-back"
      :data="this.gridData.data"
      :columns="this.column"
      :filename="filename"
      :sheetname="sheetname"
    >
      <b-button
        class="btn-excel"
      >
        <img
          class="icon-excel"
          src="../assets/icon/icon_excel.png"
        >엑셀파일저장
      </b-button>
    </vue-excel-xlsx>
  </div>
</template>

<script>
import VueExcelXlsx from 'vue-excel-xlsx/VueExcelXlsx.vue';

export default {
  components: {
    'vue-excel-xlsx': VueExcelXlsx,
  },
  props: {
    gridData: Object,
  },
  data() {
    return {
      column: [],
      filename: '',
      sheetname: '',
      columnData: {
        labe: '',
        field: '',
      },
    };
  },
  mounted() {
    this.excelData();
  },
  methods: {
    excelData() {
      this.gridData.headers.filter((header) => header.visible).forEach((header) => {
        this.column.push({
          label: header.label,
          field: header.field,
        });
      });

      const date = new Date();
      const yy = date.getFullYear().toString();
      const m = date.getMonth() + 1;
      const mm = m.toString();
      const dd = date.getDate().toString();
      const today = yy + mm + dd;
      this.sheetname = this.gridData.name;
      this.filename = this.gridData.name + today;
    },
  },
};
</script>

<style>
.btn-back {
  background-color: white;
  border: solid 0px #c9c9c9;
  padding: 0rem;
  margin-right: 3px;
}
.btn-excel {
  height: 1.7rem;
  width: fit-content;
  background-color: white;
  border: solid 0.05rem #c9c9c9;
  border-radius: 3px;
  margin-bottom: 0.1rem;
  margin-right: 0.3rem;
}
.icon-excel {
  margin-right: 0.3rem;
}
</style>
