<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"
        row-key="destination"
        :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: [
        {
          title: "目的地",
          dataIndex: "destination",
          key: "destination",
        },
        {
          dataIndex: "totalCount",
          key: "totalCount",
          title: "总件数",
          clickHandler: () => {
            this.$router.push({
              path: "/waybillTable",
            });
          },
        },
        {
          dataIndex: "highRisk",
          key: "highRisk",
          title: "高风险货物等级",
          children: [
            {
              dataIndex: "highRiskCount",
              key: "highRiskCount",
              title: "件数",
              clickHandler: () => {
                this.$router.push({
                  path: "/waybillTable",
                });
              },
            },
            {
              dataIndex: "highRiskRatio",
              key: "highRiskRatio",
              title: "占比",
            },
          ],
        },
        {
          dataIndex: "lowRisk",
          key: "lowRisk",
          title: "低风险货物等级",
          children: [
            {
              dataIndex: "lowRiskCount",
              key: "lowRiskCount",
              title: "件数",
              clickHandler: () => {
                this.$router.push({
                  path: "/waybillTable",
                });
              },
            },
            {
              dataIndex: "lowRiskRatio",
              key: "lowRiskRatio",
              title: "占比",
            },
          ],
        },
        {
          dataIndex: "priority",
          key: "priority",
          prop: "priority",
          title: "优先级",
          children: [
            {
              dataIndex: "priorityCount",
              key: "priorityCount",
              prop: "priorityCount",
              title: "件数",
              clickHandler: () => {
                this.$router.push({
                  path: "/waybillTable",
                });
              },
            },
            {
              dataIndex: "priorityRatio",
              key: "priorityRatio",
              prop: "priorityRatio",
              title: "占比",
            },
          ],
        },
        {
          dataIndex: "normal",
          key: "normal",
          prop: "normal",
          title: "普通级",
          children: [
            {
              dataIndex: "normalCount",
              key: "normalCount",
              prop: "normalCount",
              title: "件数",
              clickHandler: () => {
                this.$router.push({
                  path: "/waybillTable",
                });
              },
            },
            {
              dataIndex: "normalRatio",
              key: "normalRatio",
              prop: "normalRatio",
              title: "占比",
            },
          ],
        },
        {
          dataIndex: "strict",
          key: "strict",
          prop: "strict",
          title: "严控级",
          children: [
            {
              dataIndex: "strictCount",
              key: "strictCount",
              prop: "strictCount",
              title: "件数",
              clickHandler: () => {
                this.$router.push({
                  path: "/waybillTable",
                });
              },
            },
            {
              dataIndex: "strictRatio",
              key: "strictRatio",
              prop: "strictRatio",
              title: "占比",
            },
          ],
        },
      ],
      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%",
          index: 1,
        },
        {
          destination: "PEK",
          totalCount: 20000,
          highRiskCount: 14000,
          highRiskRatio: "70%",
          lowRiskCount: 1000,
          lowRiskRatio: "5%",
          priorityCount: 2000,
          priorityRatio: "10%",
          normalCount: 2000,
          normalRatio: "10%",
          strictCount: 1000,
          strictRatio: "5%",
          index: 2,
        },
        {
          destination: "NZH",
          totalCount: 20000,
          highRiskCount: 14000,
          highRiskRatio: "70%",
          lowRiskCount: 1000,
          lowRiskRatio: "5%",
          priorityCount: 2000,
          priorityRatio: "10%",
          normalCount: 2000,
          normalRatio: "10%",
          strictCount: 1000,
          strictRatio: "5%",
          index: 3,
        },
      ],
    };
  },
  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;
  background: #dfe3ea;
  .table-header-wrapper {
    padding-top: 24px;
  }
}
</style>
