<template>
  <div>
    <div class="dateQuery">
      <label class="el-form-item__label" style="width: auto;">订单日期：</label>
      <el-date-picker
        v-model="startTime"
        type="date"
        placeholder="选择日期"
        style="width:150px"
      >
      </el-date-picker>
      <el-button type="primary" class="btn" @click="onclick">
        <i class="el-icon-search"></i>
      </el-button>
      <el-button
        type="primary"
        class="btn"
        @click="exportToExcel('销售钢材拼装统计报表')"
      >
        <i class="el-icon-download"></i>导出
      </el-button>
    </div>
    <div class="saleSpellingtable" id="table">
      <el-table :data="saleSpellingData" border>
        <el-table-column
          label="拼装数量"
          prop="pinZhuang"
          style="font-size:20px"
          width="100px"
          align="center"
          size="medium"
        >
        </el-table-column>
        <el-table-column
          label="重庆直销部"
          prop="chongQinSpellingData"
          align="center"
          size="medium"
          width="120px"
        >
        </el-table-column>
        <el-table-column
          label="成都直销部"
          prop="chengDuSpellingData"
          align="center"
          size="medium"
          width="120px"
        >
        </el-table-column>
        <el-table-column
          label="工程部"
          prop="gongChengSpellingData"
          align="center"
          size="medium"
          width="120px"
        >
        </el-table-column>
        <el-table-column
          label="川东"
          prop="chaungDongSpellingData"
          align="center"
          size="medium"
          width="120px"
        >
        </el-table-column>
        <el-table-column
          label="自提"
          prop="zitiSpellingData"
          align="center"
          size="medium"
          width="120px"
        >
        </el-table-column>
        <el-table-column
          label="合计"
          prop="AllSpellingData"
          align="center"
          size="medium"
          width="120px"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import { sjTime } from '@/utils/sharedJsFile'
export default {
  data() {
    return {
      startTime: new Date(),
      endTime: new Date(),
      saleSpellingData: [],
      date: null
    }
  },
  created() {
    this.getSpellingData()
  },
  methods: {
    exportToExcel(tableTitle = '表格标题') {
      let tables = document.getElementById('table') //此处是拿表格document元素,也可以取父div的ref
      let table_book = XLSX.utils.table_to_book(tables)
      var table_write = XLSX.write(table_book, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([table_write], { type: 'application/octet-stream' }),
          tableTitle + '.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, table_write)
      }
      return table_write
    },
    async getSpellingData() {
      const loading = this.$loading({
        lock: true,
        text: '正在获取数据',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      let map = {
        startTime: sjTime(this.startTime),
        endTime: sjTime(this.endTime)
      }
      await this.axios
        .post('/api/v1/tms/getSaleSteelSpellingReport', map)
        .then(res => {
          this.saleSpellingData = res.data.data
        })
      loading.close()
    },
    onclick() {
      this.getSpellingData()
    },
    dateChange(date) {
      var dateee = new Date(date).toJSON()
      return new Date(+new Date(dateee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
    }
  }
}
</script>

<style scoped>
.saleSpellingtable {
  margin-top: 20px;
  margin-left: 30px;
}
.dateQuery {
  margin-top: 20px;
  margin-left: 30px;
}
</style>
