<template>
  <div class="table-wrapper">
    <header ref="tableWrapperHeader" class="table-header-wrapper">
      <SecurityCheckHeader
        title="运单管理"
        :with-change-button="false"
        :with-date-picker="false"
        :with-select="false"
        :with-input="true"
        searchPlaceholder="请输入搜索条件"
        @search="searchHandler"
        :withExportButton="false"
      />
    </header>
    <main>
      <SecurityCheckTable
        :table-cols="tableCols"
        :table-data="tableData"
        row-key="index"
        :height="tableHeight"
        show-summary
        :pagination="pagination"
        :loading="loading"
        @handleTableChange="handleTableChange"
      />
    </main>
  </div>
</template>

<script>
import SecurityCheckHeader from '../components/securityCheckHeader.vue'
import SecurityCheckTable from '../components/securityCheckTableWaybill.vue'
import { waybill } from '@/api/statistics/statistics.js'
export default {
  components: { SecurityCheckHeader, SecurityCheckTable },
  data() {
    return {
      loading: false,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        total: 0, //数据总数
        pageSize: 10,
        current: 1,
        showTotal: (total) => {
          return `共${total}条`
        },
      },
      tableHeight: '50vh',
      tableCols: [
        {
          dataIndex: 'waybillNo',
          key: 'waybillNo',
          title: '运单编号',
          width: 125,
        },
        {
          dataIndex: 'mwbNo',
          key: 'mwbNo',
          title: '航空主运单编号',
          width: 125,
        },
        {
          dataIndex: 'hwbNo',
          key: 'hwbNo',
          title: '航空分运单编号',
          width: 125,
        },
        {
          dataIndex: 'goodsName',
          key: 'goodsName',
          title: '品名描述',
          width: 125,
        },
        {
          dataIndex: 'agentCode',
          key: 'agentCode',
          title: '交货发货代理人',
          width: 140,
        },
        {
          dataIndex: 'agentLevel',
          key: 'agentLevel',
          title: '代理人诚信等级',
          width: 125,
        },
        {
          dataIndex: 'origin',
          key: 'origin',
          title: '始发站',
        },
        {
          dataIndex: 'destination',
          key: 'destination',
          title: '目的地机场',
        },
        {
          dataIndex: 'flightNo',
          key: 'flightNo',
          title: '航班号',
        },
        {
          dataIndex: 'riskRating',
          key: 'riskRating',
          title: '综合风险等级',
        },
        {
          dataIndex: 'riskClassification',
          key: 'riskClassification',
          title: '货物风险等级',
        },
        {
          dataIndex: 'checkPoint',
          key: 'checkPoint',
          title: '安检通道号',
        },
        {
          dataIndex: 'securityPcs',
          key: 'securityPcs',
          title: '安检件数',
        },
        {
          dataIndex: 'weight',
          key: 'weight',
          title: '重量',
        },
      ],
      FormData: {
        waybillNo: '', //运单号
        destination: '', // 目的站
        agentCode: '', // 代理人ID
        agentLevel: '', // 代理人信用等级 A\B\C\D
        riskRating: '', // 综合风险等级评估 低风险\优先\普通\高风险\严控
        startTime: '', //开始时间
        endTime: '', // 结束时间
        openResult: '', //  开箱结果
        riskClassification: '', //货物风险等级 高风险\低风险\普通
        pageNum: '1', //** 当前记录起始索引 */
        pageSize: '10', // /** 每页显示记录数 */
      },
      tableData: [],
    }
  },
  created() {
    
  },
  mounted() {
    this.setTableHeight()
    window.addEventListener('resize', this.setTableHeight)
  },
  activated(){
    let queryData = this.$route.query
    const {
      waybillNo,
      destination,
      agentCode,
      agentLevel,
      riskRating,
      startTime,
      endTime,
      openResult,
      riskClassification,
    } = queryData
    this.FormData = {
      waybillNo: waybillNo,
      destination: destination,
      agentCode: agentCode,
      agentLevel: agentLevel,
      riskRating: riskRating,
      startTime: startTime,
      endTime: endTime,
      openResult: openResult,
      riskClassification: riskClassification,
      pageNum: '1',
      pageSize: '10',
    }
    this.getData()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setTableHeight)
  },
  methods: {
    searchHandler(arr) {
      this.FormData.waybillNo = arr[0]
      this.getData()
    },
    setTableHeight() {
      const topBarHeight = 80
      const headerHeight = this.$refs['tableWrapperHeader'].offsetHeight
      const footerBlackHeight = 24
      this.tableHeight = `calc(100vh - ${topBarHeight + headerHeight + footerBlackHeight}px)`
    },
    async getData() {
      try {
        this.loading = true
        const result = await waybill(this.FormData)
        if (result.code === 200) {
          const pagination = { ...this.pagination }
          pagination.total = result.data.total
          this.pagination = pagination
          this.tableData = result.data.list
          this.loading = false
        }
      } catch (error) {
        console.log(error)
      }
    },
    handleTableChange(data) {
      this.pagination.current = data.current
      this.pagination.pageSize = data.pageSize
      this.FormData.pageNum = data.current + ''
      this.FormData.pageSize = data.pageSize + ''
      this.getData()
    },
  },
}
</script>

<style lang="scss" scoped>
.table-wrapper {
  padding: 0 24px;

  .table-header-wrapper {
    padding-top: 24px;
  }
}
</style>
