<template>
  <div class="table-wrapper">
    <header ref="tableWrapperHeader" class="table-header-wrapper">
      <SecurityCheckHeader
        title="航空货物关联统计"
        @change="changeHandler"
        @search="searchHandler"
        selectPlaceholder="目的地"
        :optionLists="destination"
      />
    </header>
    <main>
      <SecurityCheckTable
        :table-cols="tableCols"
        :table-data="tableData"
        row-key="index"
        :height="tableHeight"
        show-summary
        :pagination="false"
        :loading="loading"
      />
    </main>
  </div>
</template>

<script>
import SecurityCheckHeader from "../components/securityCheckHeader.vue";
import SecurityCheckTable from "../components/securityCheckTable.vue";
import { agent, routeall } from "@/api/statistics/statistics.js";
export default {
  components: { SecurityCheckHeader, SecurityCheckTable },
  data() {
    return {
      destination: [],
      loading: false,
      tableHeight: "550",
      tableCols: [
        {
          title: "目的地",
          dataIndex: "flightLine",
          key: "flightLine",
        },
        {
          dataIndex: "count",
          key: "count",
          title: "总件数",
          clickHandler: (row, rowIndex) => {
            console.log(row);
            this.$router.push({
              path: "/waybillTable",
              query: {
                startTime: this.FormData.startTime,
                endTime: this.FormData.endTime,
                destination: row.flightLine,
                agentCode: this.FormData.agentCode,
                destination: this.FormData.agentLevel,
                riskRating: "",
                openResult: this.FormData.openResult,
              },
            });
          },
        },
        {
          dataIndex: "datas",
          key: "datas",
          title: "高风险级",
          children: [
            {
              dataIndex: "datas[0].count",
              key: "datas[0].count",
              title: "件数",
              clickHandler: (row, rowIndex) => {
                console.log(row);
                this.$router.push({
                  path: "/waybillTable",
                  query: {
                    startTime: this.FormData.startTime,
                    endTime: this.FormData.endTime,
                    destination: row.flightLine,
                    agentCode: this.FormData.agentCode,
                    destination: this.FormData.agentLevel,
                    riskRating: "高风险级",
                    openResult: this.FormData.openResult,
                  },
                });
              },
            },
            {
              dataIndex: "datas[0].mix",
              key: "datas[0].mix",
              title: "占比",
            },
          ],
        },
        {
          dataIndex: "datas",
          key: "datas",
          title: "低风险级",
          children: [
            {
              dataIndex: "datas[4].count",
              key: "datas[4].count",
              title: "件数",
              clickHandler: (row, rowIndex) => {
                console.log(row);
                this.$router.push({
                  path: "/waybillTable",
                  query: {
                    startTime: this.FormData.startTime,
                    endTime: this.FormData.endTime,
                    destination: row.flightLine,
                    agentCode: this.FormData.agentCode,
                    destination: this.FormData.agentLevel,
                    riskRating: "低风险级",
                    openResult: this.FormData.openResult,
                  },
                });
              },
            },
            {
              dataIndex: "datas[4].mix",
              key: "datas[4].mix",
              title: "占比",
            },
          ],
        },
        {
          dataIndex: "datas",
          key: "datas",
          prop: "priority",
          title: "优先级",
          children: [
            {
              dataIndex: "datas[3].count",
              key: "datas[3].count",
              title: "件数",
              clickHandler: (row, rowIndex) => {
                console.log(row);
                this.$router.push({
                  path: "/waybillTable",
                  query: {
                    startTime: this.FormData.startTime,
                    endTime: this.FormData.endTime,
                    destination: row.flightLine,
                    agentCode: this.FormData.agentCode,
                    destination: this.FormData.agentLevel,
                    riskRating: "优先级",
                    openResult: this.FormData.openResult,
                  },
                });
              },
            },
            {
              dataIndex: "datas[3].mix",
              key: "datas[3].mix",
              title: "占比",
            },
          ],
        },
        {
          dataIndex: "datas",
          key: "datas",
          prop: "normal",
          title: "普通级",
          children: [
            {
              dataIndex: "datas[2].count",
              key: "datas[2].count",
              title: "件数",
              clickHandler: (row, rowIndex) => {
                console.log(row);
                this.$router.push({
                  path: "/waybillTable",
                  query: {
                    startTime: this.FormData.startTime,
                    endTime: this.FormData.endTime,
                    destination: row.flightLine,
                    agentCode: this.FormData.agentCode,
                    destination: this.FormData.agentLevel,
                    riskRating: "普通级",
                    openResult: this.FormData.openResult,
                  },
                });
              },
            },
            {
              dataIndex: "datas[2].mix",
              key: "datas[2].mix",
              title: "占比",
            },
          ],
        },
        {
          dataIndex: "strict",
          key: "strict",
          prop: "strict",
          title: "严控级",
          children: [
            {
              dataIndex: "datas[1].count",
              key: "datas[1].count",
              title: "件数",
              clickHandler: (row, rowIndex) => {
                this.$router.push({
                  path: "/waybillTable",
                  query: {
                    startTime: this.FormData.startTime,
                    endTime: this.FormData.endTime,
                    destination: row.flightLine,
                    agentCode: this.FormData.agentCode,
                    destination: this.FormData.agentLevel,
                    riskRating: "严控级",
                    openResult: this.FormData.openResult,
                  },
                });
              },
            },
            {
              dataIndex: "datas[1].mix",
              key: "datas[1].mix",
              title: "占比",
            },
          ],
        },
      ],
      tableData: [],
      FormData: {
        destination: "", // 目的站
        agentCode: "", //代理人ID
        agentLevel: "", //代理人信用等级 A\B\C\D
        riskRating: "", //综合风险等级评估 低风险\优先\普通\高风险\严控
        startTime: "", //开始时间
        endTime: "", //结束时间
      },
    };
  },
  created() {
    this.formatDate();
  },
  mounted() {
    this.setTableHeight();
    window.addEventListener("resize", this.setTableHeight);
    this.routdata();
    this.getData();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.setTableHeight);
  },
  methods: {
    formatDate() {
      let date = new Date();
      let myyear = date.getFullYear();
      let mymonth = date.getMonth() + 1;
      let myweekday = date.getDate();
      mymonth < 10 ? (mymonth = "0" + mymonth) : mymonth;
      myweekday < 10 ? (myweekday = "0" + myweekday) : myweekday;
      this.FormData.startTime = `${myyear}-${mymonth}-${myweekday}`;
      this.FormData.endTime = `${myyear}-${mymonth}-${myweekday}`;
    },
    async routdata() {
      try {
        const result = await routeall({});
        if (result.status == 200) {
          this.destination = [];
          result.data.forEach((element) => {
            let obj = {
              name: element,
              lable: element,
            };
            this.destination.push(obj);
          });
        }
      } catch (error) {
        console.log(error);
      }
    },
    //接口数据
    async getData() {
      try {
        this.loading = true;
        // console.log(this.$route.query);
        if (Object.keys(this.$route.query).length !== 0) {
          const { startTime, endTime, destination, proxyId } =
            this.$route.query;
          this.FormData.startTime = startTime;
          this.FormData.endTime = endTime;
          this.FormData.destination = destination;
          this.FormData.proxyId = proxyId;
        }
        const result = await agent(this.FormData);
        if (result.status === 200) {
          this.tableData = result.data;
          this.tableData.forEach((item) => {
            item.datas.forEach((data) => {
              data["mix"] = (data.count / item.count).toFixed(2) * 100 + "%";
            });
          });
          this.loading = false;
        }
      } catch (error) {
        console.log(error);
      }
    },
    changeHandler() {
      this.$router.push({
        path: "./cargoCharts",
        query: this.FormData,
      });
    },
    searchHandler(arr) {
      this.FormData.startTime = arr[0][0];
      this.FormData.endTime = arr[0][1];
      this.FormData.destination = arr[1];
      this.FormData.agentCode = arr[2];
      this.getData();
    },
    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>
