<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="false"
        :with-export-button="false"
        @search="searchHandler"
      />
    </header>
    <main>
      <SecurityCheckTable
        :table-cols="tableCols"
        :table-data="tableData"
        :height="tableHeight"
        with-selection
        with-operate-column
      />
    </main>
  </div>
</template>

<script>
import SecurityCheckHeader from '../components/securityCheckHeader.vue'
import SecurityCheckTable from '../components/securityCheckTable.vue'
export default {
  components: { SecurityCheckHeader, SecurityCheckTable },
  data() {
    return {
      tableHeight: '50vh',
      tableCols: [
        {
          prop: 'waybillNo',
          label: '运单号'
        },
        {
          prop: 'source',
          label: '运单来源'
        },
        {
          prop: 'flightNo',
          label: '航班号'
        },
        {
          prop: 'importance',
          label: '警卫/重点航班'
        },
        {
          prop: 'flightDate',
          label: '航班日期'
        },
        {
          prop: 'cargoName',
          label: '货品名'
        },
        {
          prop: 'agent',
          label: '代理人编码',
          width: 118
        },
        {
          prop: 'agentLevel',
          label: '代理人信用等级'
        },
        {
          prop: 'cargoDangerLevel',
          label: '货物风险等级'
        },
        {
          prop: 'comprehensiveDangerLevel',
          label: '综合风险等级'
        },
        {
          prop: 'hasDealed',
          label: '处理状态'
        },
        {
          prop: 'hasPushed',
          label: '推送状态'
        },
        {
          prop: 'createTime',
          label: '创建时间',
          width: 160
        }
      ],
      tableData: [
        {
          waybillNo: '784-33818776',
          source: 'ALMS',
          flightNo: 'CZ8023',
          importance: 'N',
          flightDate: '2022-04-02',
          cargoName: '手机保护套',
          agent: 'ETA2013031000',
          agentLevel: 'B',
          cargoDangerLevel: '普通',
          comprehensiveDangerLevel: '普通',
          hasDealed: '已处理',
          hasPushed: '已推送',
          createTime: '2022-04-02 15:17:18'
        }
      ]
    }
  },
  mounted() {
    this.setTableHeight()
    window.addEventListener('resize', this.setTableHeight)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setTableHeight)
  },
  methods: {
    searchHandler(arr) {
      console.log(arr)
    },
    setTableHeight() {
      const topBarHeight = 80
      const headerHeight = this.$refs['tableWrapperHeader'].offsetHeight
      const footerBlackHeight = 24
      this.tableHeight = `calc(100vh - ${topBarHeight + headerHeight + footerBlackHeight}px)`
    }
  }
}
</script>

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