<template>
  <div class="newFlightView-right">
    <div class="newFlightView-right-top flex">
      <div class="newFlightView-right-top-left flex-wrap">
        <div class="manageTitle">航班行李列表</div>
        <div class="newFlightView-right-top-left-select">
          快捷筛选
          <el-cascader v-model="selectedFilter" :options="fastFilterOptions" :props="{ expandTrigger: 'hover', checkStrictly: true }" size="small" placeholder="无" clearable />
        </div>
      </div>
      <div class="newFlightView-right-top-right">
        <!-- <TimeZoneSelector /> -->
        <img class="btn-img btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '航班行李列表')" />
      </div>
    </div>
    <div class="newFlightView-right-bottom">
      <tablePage ref="table" @tableLoad="tableLoad" :fast-filter="fastFilter" :msgContent="msgContent" />
    </div>
  </div>
</template>

<script>
import tablePage from '@/components/Table'
import { exportToExcel } from '@/utils/table'
export default {
  components: { tablePage },
  props: {
    msgContent: {
      type: Array,
      default: () => new Array()
    },
    msgObj: {
      type: Object,
      default: () => new Object()
    }
  },
  data () {
    return {
      selectedFilter: [],
      fastFilterOptions: [
        {
          label: "中转进航班",
          value: "inflightNo",
          children: [],
        },
        {
          label: "中转出航班",
          value: "transferFlightNO",
          children: [],
        },
      ],
      viewClassName: [
        {
          label: "值机",
          value: "check_in_baggage_number",
        },
        {
          label: "未激活",
          value: "NO_activate_number",
        },
        {
          label: "预计装载",
          value: "estimated_load_number",
        },
        {
          label: "安检",
          value: "screened_number",
        },
        {
          label: "分拣",
          value: "sorted_number",
        },
        {
          label: "装车",
          value: "loaded_number",
        },
        {
          label: "装机",
          value: "onaiecraft_number",
        },
        {
          label: "待翻检",
          value: "NO_check_number",
        },
        {
          label: "已翻减",
          value: "checked_number",
        },
        {
          label: "取消托运",
          value: "cancel_consignment_number",
        },
        {
          label: "无bsm",
          value: "NO_BSM_number",
        },
        {
          label: "中转行李",
          value: "transfer_baggage_number",
        },
      ],
    }
  },
  computed: {
    fastFilter () {
      const [key, value] = this.selectedFilter;
      // console.log(this.selectedFilter)
      if (!key) {
        return () => true;
      }
      return (row) => {
        switch (key) {
          case "inflightNo":
          case "transferFlightNO":
            return value ? row[key] === value : (row[key] ?? "") !== "";
          case "check_in_baggage_number":
            return row["No_BSM"] != 1;
          case "NO_activate_number":
            return row["activeState"] == 1;
          case "estimated_load_number":
            return row["dataState"] != "DEL" && row["activeState"] != 1;
          case "screened_number":
            return row["securityInspectionResults"];
          case "sorted_number":
            return row["sorting_time"];
          case "loaded_number":
            return (
              row["loading_time"] &&
              (row["abnormalType"] == "OFF" || !row["abnormalType"])
            );
          case "onaiecraft_number":
            return row["installation_time"];
          case "NO_check_number":
            return (
              row["dataState"] == "DEL" &&
              row["loading_time"] &&
              (row["abnormalType"] != "OFF" || !row["abnormalType"])
            );
          case "checked_number":
            return row["dataState"] == "DEL" && row["abnormalType"] == "OFF";
          case "cancel_consignment_number":
            return row["dataState"] == "DEL";
          case "NO_BSM_number":
            return row["No_BSM"] == 1;
          case "transfer_baggage_number":
            return row["inflightNo"] && row["dataState"] != "DEL";
          default:
            return (row[key] ?? "") !== "";
        }
      };
    },
  },
  methods: {
    // 获取行李列表后设置快捷筛选
    tableLoad (tableData) {
      this.setFastFilterOptions(tableData);
    },
    setFastFilterOptions (tableData) {
      const viewDatas = [];
      const inFlightNOList = new Set();
      const transferFlightNOList = new Set();
      tableData.forEach((item) => {
        item["inflightNo"] && inFlightNOList.add(item["inflightNo"]);
        item["transferFlightNO"] &&
          transferFlightNOList.add(item["transferFlightNO"]);
      });
      this.fastFilterOptions.splice(
        this.fastFilterOptions.length - 2,
        2,
        {
          label: "中转进航班",
          value: "inflightNo",
          children: [...inFlightNOList].map((value) => ({
            label: value,
            value,
          })),
        },
        {
          label: "中转出航班",
          value: "transferFlightNO",
          children: [...transferFlightNOList].map((value) => ({
            label: value,
            value,
          })),
        }
      );
      this.viewClassName.forEach((item) => {
        viewDatas.push({
          label: item.label,
          value: item.value,
        });
      });
      this.fastFilterOptions = this.fastFilterOptions.concat(viewDatas);
    },
    // 导出
    exportHandler (refName, tableName) {
      const { carrierFlights, carrierFlightsDate, outAirport, landAirport } =
        this.msgObj
      const table = this.$refs[refName].$el.cloneNode(true);
      const fileName = `${tableName}-${carrierFlights}-${carrierFlightsDate}-${outAirport}-${landAirport}.xlsx`;
      exportToExcel(table, tableName, fileName);
    },
  }
}
</script>

<style lang="scss" scoped>
.newFlightView-right {
  flex: 1;
  height: 100%;
  width: calc(100% - 416px);
  &-top {
    padding: 18px 0;
    &-left {
      line-height: 30px;
    }
    &-right {
      .btn-img {
        margin-left: 10px;
      }
    }
  }
  &-bottom {
    height: calc(100% - 68px);
  }
}
</style>