<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-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="fetchData">查询</el-button>
        </el-form-item>
      </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" :data="list" 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.autoid }}
        </template>
      </el-table-column>
      <el-table-column label="承运人" width="110" align="center">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.totalpiece }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="航班号" width="115" align="center">
        <template slot-scope="scope">
          {{ scope.row.manifesttotalpiece }}
        </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.manifesttotalweight | parseTime('{y}-{m}-{d}')}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getAnalysisList } 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: 'ExportExcel',
  components: { FilenameOption, AutoWidthOption, BookTypeOption },
  data() {
    return {
      list: [],
      fetchList: [],
      listLoading: false,
      downloadLoading: false,
      filename: '',
      autoWidth: true,
      bookType: 'xlsx',
      searchText: {
        startdate: undefined,
        enddate: undefined
      }

    }
  },
  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
      getAnalysisList(this.searchText).then(response => {
        this.list = response.data.data
        this.listLoading = false
      })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['运单号',
          '航空托运人名称',
          '航空销售代理人名称',
          '航协编号',
          '航空公司运输证明',
          '运输条件鉴定书',
          '承运人',
          '航班号',
          '航班日期',
          '航班起始站',
          '航班目的站',
          '运单件数',
          '运单重量',
          '操作时间',
          '关区',
          '预配品名',
          '收货人公司',
          '收货人地址',
          '收货人城市',
          '收货人电话',
          '收货人国家',
          '收货人名称',
          '发货人名称',
          '发货人地址',
          '发货人城市',
          '发货人国家',
          '发货人电话',
          '发货人名称',
          '海关回执状态',
          '海关回执信息',
          '发货人编码',
          '收货人编码',
          '货物品名',
          '二级类名称',
          '一级类名称',
          '代理人三字码',
          '代理人全称',
          '代理人类别',
          '代理联系人',
          '代理联系人电话'
        ]
        const filterVal = [
          'autoid',
          'waybillnomaster',
          'segment',
          'originatingstation',
          'destinationstation',
          'totalweight',
          'totalpiece',
          'manifesttotalpiece',
          'manifesttotalweight',
          'flightno',
          'productname',
          'customsstatus',
          'carrier1',
          'arrivalstation1',
          'carrier2',
          'arrivalstation2',
          'carrier3',
          'arrivalstation3',
          'paymode',
          'customscode',
          'specialgoodscode',
          'shippername',
          'shipperaddress',
          'consigneename',
          'consigneeaddress',
          'receiptinformation',
          'specificConsigneePhone',
          'consigneePhone',
          'status',
          'isbatch',
          'originatingstationBill',
          'destinationstationBill',
          'reportorder',
          'islast',
          'shipperCode',
          'shipperCountrycode',
          'shipperPhone',
          'shipperFax',
          'consigneeCode',
          'consigneeCountrycode'
        ]
        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 === 'timestamp') {
          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>