<template>
  <!-- $t is vue-i18n global function to translate lang -->
  <div class="app-container">
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="searchText">
        <el-form-item>
          <el-date-picker v-model="searchText.startdate" value-format="yyyy-MM-dd" type="date"
                          placeholder="开始航班日期"
                          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="searchText.enddate" value-format="yyyy-MM-dd" type="date"
                          placeholder="结束航班日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input  v-model="searchText.flightno" placeholder="航班号" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :loading="listLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="fetchData">查询</el-button>
        </el-form-item>
        <el-tag
                :key="note.message"
                :type="note.type">
          {{note.message}}
        </el-tag>
      </el-form>
    </el-col>
    <div>
      <FilenameOption v-model="filename" />
      <AutoWidthOption v-model="autoWidth" />
      <BookTypeOption v-model="bookType" />
      <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">导出 Excel</el-button>
    </div>

    <el-table v-loading="listLoading"  element-loading-text="拼命加载中" border fit highlight-current-row>
      <el-table-column align="center" label="Id" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="运单号">
        <template slot-scope="scope">
          {{ scope.row.waybillnomaster }}
        </template>
      </el-table-column>
      <el-table-column label="航班号" width="115" align="center">
        <template slot-scope="scope">
          {{ scope.row.flightno }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="航班日期" width="220" :formatter="dateFormat">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.flightDate | parseTime('{y}-{m}-{d}')}}</span>
        </template>
      </el-table-column>
      <el-table-column label="航段" width="110" align="center">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.segment }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getNmmsAnalysisList } from '@/api/agent-excel'
import { parseTime } from '@/utils'

// options components
import FilenameOption from './components/FilenameOption'
import AutoWidthOption from './components/AutoWidthOption'
import BookTypeOption from './components/BookTypeOption'
import Export2Excel from '@/vendor/Export2Excel'
export default {
  name: 'ExportExcelNMMS',
  components: { FilenameOption, AutoWidthOption, BookTypeOption },
  data() {
    return {
      list: [],
      fetchList: [],
      listLoading: false,
      downloadLoading: false,
      filename: '',
      autoWidth: true,
      bookType: 'xlsx',
      searchText: {
        startdate: undefined,
        enddate: undefined,
        flightno: undefined
      },
      note: {
        type: 'info',
        message: ''
      }

    }
  },
  created() {
    // this.fetchData()
  },
  filters: {
    parseTime: parseTime
  },
  methods: {
    dateFormat:function(row,column){
      var t=new Date(row.updateTime);//row 表示一行数据, updateTime 表示要格式化的字段名称
      return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate();
    },
    fetchData() {
      this.listLoading = true
      getNmmsAnalysisList(this.searchText).then(response => {
        this.list = response.data.data
        this.listLoading = false
        this.$message({
          message: '数据查询成功,可以下载excel',
          type: 'success'
        });
        this.note.message = '数据查询成功,可以下载excel;共'+this.list.length+'条数据';
        this.note.type = 'success';
      })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = [
          '航班号',
          '航班日期',
          '航段',
          '主运单号',
          '分单号',
          '运单件数',
          '运单重量',
          '舱单件数',
          '舱单重量',
          '品名',
          '航班起始站',
          '航班起始站中文',
          '航班目的站',
          '航班目的站中文',
          '运单起始站',
          '运单起始站中文',
          '运单目的站',
          '运单目的站中文',
          '发货人国家',
          '发货人国家中文',
          '发货人区域'
        ]
        const filterVal = [
          'flightno',
          'flightDate',
          'segment',
          'waybillnomaster',
          'waybillnosecondary',
          'totalpiece',
          'totalweight',
          'manifesttotalpiece',
          'manifesttotalweight',
          'productname',
          'originatingstation',
          'originatingstationcn',
          'destinationstation',
          'destinationstationcn',
          'originatingstationBill',
          'originatingstationbillcn',
          'destinationstationBill',
          'destinationstationbillcn',
          'shipperCountrycode',
          'countrydescchn',
          'areadescchn'
        ]
        const list = this.list
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timeamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

<style>
.radio-label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 30px;
}
</style>