<template>
  <div class="table-wrapper">
    <header
      ref="tableWrapperHeader"
      class="table-header-wrapper"
    >
      <SecurityCheckHeader
        title="航空货物关联统计"
        @change="changeHandler"
        @search="searchHandler"
      />
    </header>
    <main>
      <SecurityCheckTable
        :table-cols="tableCols"
        :table-data="tableData"
        :height="tableHeight"
        show-summary
      />
    </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: 'destination',
          label: '目的地'
        },
        {
          prop: 'totalCount',
          label: '总件数'
        },
        {
          prop: 'highRisk',
          label: '高风险货物等级',
          children: [
            {
              prop: 'highRiskCount',
              label: '件数'
            },
            {
              prop: 'highRiskRatio',
              label: '占比'
            }
          ]
        },
        {
          prop: 'lowRisk',
          label: '低风险货物等级',
          children: [
            {
              prop: 'lowRiskCount',
              label: '件数'
            },
            {
              prop: 'lowRiskRatio',
              label: '占比'
            }
          ]
        },
        {
          prop: 'priority',
          label: '优先级',
          children: [
            {
              prop: 'priorityCount',
              label: '件数'
            },
            {
              prop: 'priorityRatio',
              label: '占比'
            }
          ]
        },
        {
          prop: 'normal',
          label: '普通级',
          children: [
            {
              prop: 'normalCount',
              label: '件数'
            },
            {
              prop: 'normalRatio',
              label: '占比'
            }
          ]
        },
        {
          prop: 'strict',
          label: '严控级',
          children: [
            {
              prop: 'strictCount',
              label: '件数'
            },
            {
              prop: 'strictRatio',
              label: '占比'
            }
          ]
        }
      ],
      tableData: [
        {
          destination: 'CTU',
          totalCount: 20000,
          highRiskCount: 14000,
          highRiskRatio: '70%',
          lowRiskCount: 1000,
          lowRiskRatio: '5%',
          priorityCount: 2000,
          priorityRatio: '10%',
          normalCount: 2000,
          normalRatio: '10%',
          strictCount: 1000,
          strictRatio: '5%'
        },
        {
          destination: 'PEK',
          totalCount: 20000,
          highRiskCount: 14000,
          highRiskRatio: '70%',
          lowRiskCount: 1000,
          lowRiskRatio: '5%',
          priorityCount: 2000,
          priorityRatio: '10%',
          normalCount: 2000,
          normalRatio: '10%',
          strictCount: 1000,
          strictRatio: '5%'
        },
        {
          destination: 'NZH',
          totalCount: 20000,
          highRiskCount: 14000,
          highRiskRatio: '70%',
          lowRiskCount: 1000,
          lowRiskRatio: '5%',
          priorityCount: 2000,
          priorityRatio: '10%',
          normalCount: 2000,
          normalRatio: '10%',
          strictCount: 1000,
          strictRatio: '5%'
        }
      ]
    }
  },
  mounted() {
    this.setTableHeight()
    window.addEventListener('resize', this.setTableHeight)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setTableHeight)
  },
  methods: {
    changeHandler() {
      this.$router.push({
        path: './cargoCharts'
      })
    },
    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>
