<template>
  <div class="data-table">
    <div
      :style="dataTableContentStyle"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="data-table-content"
    >
      <template v-if="tableData.length">
        <el-table
          :data="tableData"
          style="width: 100%"
          ref="userTableDatasr"
        >
          <el-table-column
            prop="date"
            label="时间"
          >
          </el-table-column>
          <el-table-column label="行李平均运输时间">
            <el-table-column
              prop="name"
              label="到达-进入中转平均时间"
              width="170"
            >
            </el-table-column>
            <el-table-column
              prop="province"
              label="卸机-到达平均时间"
              width="140"
            >
            </el-table-column>
            <el-table-column
              prop="city"
              label="装车-装机平均时间"
              width="140"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="楼间中转平均时间"
              width="140"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column label="行李平均装机时间">
            <el-table-column
              prop="zip"
              label="I-I"
            >
            </el-table-column>
            <el-table-column
              prop="cp"
              label="I-D"
            >
            </el-table-column>
            <el-table-column
              prop="epui"
              label="D-I"
            >
            </el-table-column>
            <el-table-column
              prop="cpu"
              label=" D-D"
            >
            </el-table-column>
            <el-table-column
              prop="gpu"
              label="始发行李平均时间"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="amd"
            label="值机-分拣平均时间"
          >
          </el-table-column>
          <el-table-column
            prop="ywd"
            label="值机-装车平均时间"
          >
          </el-table-column>
        </el-table>
      </template>
      <template v-else>
        <NoData
          image-width="auto"
          image-height="100%"
        />
      </template>
    </div>
  </div>
</template>
<script>
import NoData from '@/components/nodata'
import { throttledExportToExcel } from '@/utils/table'
export default {
  props: {
    isloadings: {
      type: Number,
    },
  },
  data() {
    return {
      loading: false,
      tableData: [
        {
          date: '2022/1/1',
          name: '20',
          province: '20',
          city: '30',
          address: '30',
          zip: '30',
          cp: '30',
          epui: '30',
          cpu: '30',
          gpu: '30',
          amd: '20',
          ywd: '20',
        },
        {
          date: '2022/1/2',
          name: '',
          province: '',
          city: '',
          address: '',
          zip: '30',
          cp: '30',
          epui: '30',
          cpu: '30',
          gpu: '30',
          amd: '20',
          ywd: '20',
        },
        {
          date: '2022/1/3',
          name: '0',
          province: '0',
          city: '0',
          address: '0',
          zip: '30',
          cp: '30',
          epui: '30',
          cpu: '30',
          gpu: '30',
          amd: '20',
          ywd: '20',
        },
      ],
    }
  },
  components: {
    NoData,
  },
  watch: {
    isloadings: {
      handler(val) {
        this.downFile()
      },
    },
  },
  computed: {
    dataTableContentStyle() {
      const style = {}
      if (this.minHeight) {
        style['min-height'] = this.minHeight
      }
      if (this.tableHeight) {
        style['height'] = this.tableHeight
      }
      return style
    },
  },
  methods: {
    downFile() {
      let tableName = '运送效率报表'
      const table = this.$refs['userTableDatasr'].$el.cloneNode(true)
      const fileName = `${tableName}.xlsx`
      throttledExportToExcel(table, tableName, fileName)
    },
  },
}
</script>
<style lang="scss" scoped></style>
