<template>
  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="baggageList">
    <Table style="height:100%" :msgContent="tableTag" ref="table" />
    <div class="btns">
      <img class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '行李节点列表')">
    </div>
  </div>
</template>

<script>
import Table from '@/components/Table'
import { exportToExcel } from '@/utils/table'
export default {
  name: 'BaggageList',
  components: { Table },
  props: ['tableDatas'],
  data () {
    return {
      tableCols: [],
      baggageTableData: [],
      spanArr: [],
      pos: 0,
      loading: false,
      dataContent: {},
      tableTag: []
    }
  },
  mounted () {
    if (this.tableDatas?.length) {
      this.tableDatas[0].nfilter = JSON.parse(sessionStorage.getItem('bagQueryParams')) || {}
      this.tableTag = this.tableDatas
    }
  },
  methods: {
    exportHandler (refName, tableName) {
      const { query } = this.$route
      const table = this.$refs[refName].$el.cloneNode(true)
      const { luggageNum, carrierFlights, carrierFlightsDate } = query
      const fileName = `${tableName}-${luggageNum}-${carrierFlights}-${carrierFlightsDate}.xlsx`
      exportToExcel(table, tableName, fileName)
    },
  }
}
</script>

<style lang="scss" scoped>
.baggageList {
  height: 100%;
  position: relative;
  .btns {
    position: absolute;
    top: -50px;
    right: 0px;
    z-index: 10;
    .r16 {
      margin-right: 16px;
    }
  }
}
</style>