CABaggageData2.0/src/views/advancedQuery/views/advancedHome.vue

<template>
  <div class="advance">
    <div class="advance__head flex">
      <div class="flex-wrap interfaceLog_head_time">
        <div class="manageTitle">高级查询</div>
        <!-- <div class="interfaceLog_head_time_start mr10">
          <el-date-picker
            v-model="flightDate[0]"
            class="input-shadow"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择开始日期时间"
            @change="startDateChangeHandler"
          />
        </div>
        <div class="interfaceLog_head_time_end">
          <el-date-picker
            v-model="flightDate[1]"
            class="input-shadow"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择结束日期时间"
            @change="endDateChangeHandler"
          />
        </div> -->
        <el-date-picker
          v-model="flightDate"
          size="small"
          type="daterange"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="dateRangePickerOptions"
        />
      </div>
      <Search
        ref="search"
        class="advanced-search"
        :is-title="false"
        :is-slot="true"
        :search-tooltip="'请输入航班号（示例：CA1234）或行李牌号（示例：1234567890）'"
        @getSearchData="getSearchData"
        @clearSearchData="clearSearchData"
      >
        <div class="flex-wrap">
          <button
            class="btnAn"
            @click="dialogShow"
          >高级查询</button>
          <!-- <div
            class="setting"
            @click="show"
          /> -->
        </div>
      </Search>
    </div>
    <!--表格-->
    <div
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="advance__table"
    >
      <el-table
        ref="table"
        v-el-table-infinite-scroll="load"
        max-height="100%"
        class="table"
        :data="dealedTableData"
        border
        stripe
        fit
        height="calc(100vh - 158px)"
        style="width: 100%"
        show-summary
        :summary-method="summaryRow(tableData.length)"
        :header-cell-class-name="headerCellClass"
        :row-class-name="tableRowClassName"
        :cell-class-name="cellClass"
        :span-method="objectSpanMethod"
        @cell-click="cellClickHandler"
      >
        <el-table-column
          v-for="col in tableCols"
          :key="col.prop"
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
          :fixed="col.fixed"
          :formatter="tableFormat"
        >
          <template #header>
            <TableHeaderCell
              :label="col.label"
              :filter-options="tableDataFilters[col.prop]"
              :filter-values.sync="filterValues[col.prop]"
              :sortable="col.sortable"
              :sort-rule.sync="tableDataSortRules[col.prop]"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--列设置-->
    <!-- <Dialog
      :flag="dialogFlag"
      class="dialog-check-cols"
    >
      <div class="col-dialog">
        <div class="title">列设置</div>
        <div class="content">
          <el-tree
            :data="tableCols"
            :class="colsCheckClass"
            show-checkbox
            node-key="index"
            :default-expand-all="true"
            :props="{
              label: 'label',
              children: 'children'
            }"
            :default-checked-keys="checkedKeysTemp"
            @check="handleCheck"
          />
        </div>
        <div class="foot right t30">
          <el-button
            size="medium"
            class="r24"
            type="primary"
            @click="onCheck"
          >确定</el-button>
          <el-button
            size="medium"
            @click="hide"
          >取消</el-button>
        </div>
      </div>
    </Dialog> -->
    <!--高级查询-->
    <Dialog
      width="852px"
      :flag="gjFlag"
    >
      <div
        ref="dialog"
        class="rowDialog"
        :tabindex="0"
        @keyup.enter="onCheckGj(true)"
        @keyup.self.esc="gjFlag=false"
      >
        <div class="title">高级查询</div>
        <div class="content">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="100px"
          >
            <el-row :gutter="20">
              <el-col
                v-for="item in formItems"
                :key="item.prop"
                :span="item.span || 8"
              >
                <el-form-item
                  :label="item.label"
                  :prop="item.prop"
                >
                  <template v-if="item.prop === 'flightDate'">
                    <el-date-picker
                      v-model="flightDate"
                      size="small"
                      type="daterange"
                      value-format="yyyy-MM-dd"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="dateRangePickerOptions"
                      @keyup.esc.native="dialogFocus"
                    />
                  </template>
                  <template v-else-if="item.prop === 'status'">
                    <el-select
                      v-model="form.status"
                      size="small"
                      filterable
                      default-first-option
                      clearable
                      @keyup.esc.native="dialogFocus"
                    >
                      <el-option
                        v-for="option in statusList"
                        :key="option.ID"
                        :label="option.StatusName"
                        :value="option.StatusCode"
                      />
                    </el-select>
                  </template>
                  <template v-else-if="item.prop === 'specialType'">
                    <el-select
                      v-model="form.specialType"
                      size="small"
                      filterable
                      allow-create
                      default-first-option
                      clearable
                      @keyup.esc.native="dialogFocus"
                    >
                      <el-option
                        v-for="option in baggageTypeList"
                        :key="option.specialType"
                        :label="option.specialType"
                        :value="option.specialType"
                      />
                    </el-select>
                  </template>
                  <template v-else-if="item.prop === 'unLoad'">
                    <el-select
                      v-model="form.unLoad"
                      size="small"
                      clearable
                      @keyup.esc.native="dialogFocus"
                    >
                      <el-option
                        label="已翻减"
                        :value="1"
                      />
                      <el-option
                        label="待翻减"
                        :value="0"
                      />
                    </el-select>
                  </template>
                  <template v-else-if="item.prop === 'checkIn'">
                    <el-select
                      v-model="form.checkIn"
                      size="small"
                      clearable
                      @keyup.esc.native="dialogFocus"
                    >
                      <el-option
                        label="是"
                        :value="1"
                      />
                      <el-option
                        label="否"
                        :value="0"
                      />
                    </el-select>
                  </template>
                  <template v-else-if="item.prop === 'active'">
                    <el-select
                      v-model="form.active"
                      size="small"
                      clearable
                      @keyup.esc.native="dialogFocus"
                    >
                      <el-option
                        label="是"
                        :value="1"
                      />
                      <el-option
                        label="否"
                        :value="0"
                      />
                    </el-select>
                  </template>
                  <template v-else-if="item.prop === 'transferIn'">
                    <el-select
                      v-model="form.transferIn"
                      size="small"
                      clearable
                      @keyup.esc.native="dialogFocus"
                    >
                      <el-option
                        label="是"
                        :value="1"
                      />
                      <el-option
                        label="否"
                        :value="0"
                      />
                    </el-select>
                  </template>
                  <template v-else-if="item.prop === 'canceled'">
                    <el-select
                      v-model="form.canceled"
                      size="small"
                      clearable
                      @keyup.esc.native="dialogFocus"
                    >
                      <el-option
                        label="是"
                        :value="1"
                      />
                      <el-option
                        label="否"
                        :value="0"
                      />
                    </el-select>
                  </template>
                  <template v-else-if="item.prop === 'noBSM'">
                    <el-select
                      v-model="form.noBSM"
                      size="small"
                      clearable
                      @keyup.esc.native="dialogFocus"
                    >
                      <el-option
                        label="是"
                        :value="0"
                      />
                      <el-option
                        label="否"
                        :value="1"
                      />
                    </el-select>
                  </template>
                  <template v-else>
                    <el-popover
                      v-model="item.hintVisible"
                      placement="right"
                      trigger="manual"
                    >
                      <span>{{ item.hintText }}</span>
                      <el-input
                        :ref="'input-' + item.prop"
                        slot="reference"
                        v-model="form[item.prop]"
                        size="small"
                        @focus="item.hintVisible = true"
                        @blur="item.hintVisible = false"
                        @keyup.esc.native="dialogFocus"
                      />
                    </el-popover>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="foot right t30">
          <el-button
            size="medium"
            class="r24"
            type="primary"
            @click="onCheckGj(true)"
          >确定</el-button>
          <el-button
            size="medium"
            @click="closeCheckGj"
          >取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Search from '@/components/SearchWithTooltip'
import Dialog from '@/layout/components/Dialog'
import { parseTime } from '@/utils/index'
import { Query, myQuery } from '@/api/dataIntegration'
import { mapGetters } from 'vuex'
import TableHeaderCell from '@/components/TableHeaderCell'
import { setTableFilters } from '@/utils/table'

export default {
  name: 'advanceHome',
  components: { Search, Dialog, TableHeaderCell },
  data() {
    return {
      loading: false,
      colDialogFlag: false,
      gjFlag: false,
      tableData: [
        // {
        //   flightNO: '',
        //   flightDate: '',
        //   sourceAirport: '',
        //   targetAirport: '',
        //   passengerNameUpcase: '',
        //   bagSN: '',
        //   specialType: '',
        //   checkIn: '',
        //   deleted: '',
        //   activated: '',
        //   bagWeight: '',
        //   latestStatus: '',
        //   bagLocation: '',
        //   transferFlightNO: ''
        // }
      ],
      page: -1,
      noMore: false,
      checkList: [],
      tableCols: [
        {
          prop: 'flightNO',
          label: '航班号',
          fixed: 'left',
          filterable: true,
          sortable: true
        },
        {
          prop: 'flightDate',
          label: '航班日期',
          fixed: 'left',
          width: 110,
          filterable: true,
          sortable: true
        },
        {
          prop: 'departureTime',
          label: '起飞时间',
          width: 150
        },
        {
          prop: 'sourceAirport',
          label: '起飞站',
          filterable: true,
          sortable: true
        },
        {
          prop: 'targetAirport',
          label: '目的地',
          filterable: true,
          sortable: true
        },
        {
          prop: 'passengerNameUpcase',
          label: '旅客姓名',
          width: 150,
          filterable: true,
          sortable: true
        },
        {
          prop: 'bagSN',
          label: '行李牌号',
          width: 110,
          filterable: true,
          sortable: true
        },
        {
          prop: 'specialType',
          label: '特殊行李类型',
          width: 115,
          filterable: true,
          sortable: true
        },
        {
          prop: 'deleted',
          label: '删除',
          filterable: true,
          sortable: true
        },
        {
          prop: 'activated',
          label: '激活',
          filterable: true,
          sortable: true
        },
        {
          prop: 'bagWeight',
          label: '重量'
        },
        {
          prop: 'latestStatus',
          label: '最新状态',
          width: 110,
          filterable: true,
          sortable: true
        },
        {
          prop: 'bagLocation',
          label: '最新位置',
          width: 110,
          filterable: true,
          sortable: true
        },
        {
          prop: 'U_Device_ID',
          label: '容器编号',
          width: 110,
          filterable: true,
          sortable: true
        },
        {
          prop: 'preFlightNO',
          label: '中转进航班',
          width: 110,
          filterable: true,
          sortable: true
        },
        {
          prop: 'transferFlightNO',
          label: '中转出航班',
          width: 110,
          filterable: true,
          sortable: true
        }
      ],
      flightDate: [parseTime(new Date(), '{y}-{m}-{d}'), parseTime(new Date(), '{y}-{m}-{d}')],
      dateRangePickerOptions: {
        onPick: this.dateRangePickHandler,
        disabledDate: this.dateRangeDisabled
      },
      form: {
        flightNO: '',
        destination: '',
        departureStation: '',
        baggageNO: '',
        specialType: '',
        U_Device_ID: '',
        passengerName: '',
        PNR: '',
        checkInSequence: '',
        transferArrival: '',
        transferDeparture: '',
        unLoad: '',
        checkIn: '',
        active: '',
        transferIn: '',
        canceled: '',
        status: '',
        noBSM: ''
      },
      formItems: [
        {
          prop: 'flightDate',
          label: '航班日期',
          span: 16
        },
        {
          prop: 'status',
          label: '当前状态'
        },
        {
          prop: 'flightNO',
          label: '航班号',
          hintText: '示例：CA1111',
          hintVisible: false
        },
        {
          prop: 'departureStation',
          label: '起飞站',
          hintText: '示例：PEK',
          hintVisible: false
        },
        {
          prop: 'destination',
          label: '目的地',
          hintText: '示例：CTU',
          hintVisible: false
        },
        {
          prop: 'baggageNO',
          label: '行李牌号',
          hintText: '示例：1234567890',
          hintVisible: false
        },
        {
          prop: 'specialType',
          label: '特殊行李类型'
        },
        {
          prop: 'U_Device_ID',
          label: '容器编号',
          hintText: '示例：AKE25810CA',
          hintVisible: false
        },
        {
          prop: 'passengerName',
          label: '旅客姓名',
          hintText: '示例：ZHAOWEI',
          hintVisible: false
        },
        {
          prop: 'PNR',
          label: 'PNR',
          hintText: '示例：PZR25X',
          hintVisible: false
        },
        {
          prop: 'checkInSequence',
          label: '值机序号',
          hintText: '示例：1',
          hintVisible: false
        },
        {
          prop: 'transferArrival',
          label: '中转进航班',
          hintText: '示例：CA1111',
          hintVisible: false
        },
        {
          prop: 'transferDeparture',
          label: '中转出航班',
          hintText: '示例：CA1111',
          hintVisible: false
        },
        {
          prop: 'unLoad',
          label: '翻减状态'
        },
        {
          prop: 'checkIn',
          label: '已值机'
        },
        {
          prop: 'active',
          label: '已激活'
        },
        {
          prop: 'transferIn',
          label: '中转行李'
        },
        {
          prop: 'canceled',
          label: '已取消'
        },
        {
          prop: 'noBSM',
          label: '无BSM'
        }
      ],
      statusList: [
        {
          ID: 0,
          StatusName: '安检',
          StatusCode: '安检'
        },
        {
          ID: 1,
          StatusName: '分拣',
          StatusCode: '分拣'
        },
        {
          ID: 2,
          StatusName: '装车',
          StatusCode: '装车'
        },
        {
          ID: 3,
          StatusName: '装机',
          StatusCode: '装机'
        },
        {
          ID: 4,
          StatusName: '到达',
          StatusCode: '到达'
        }
      ],
      baggageTypeList: [],
      dataContent: [],
      rules: {
        // 机器信息表单验证
        // flightNO: [
        //   { required: true, message: "请输入有效航班号", trigger: "blur" },
        // ],
      },
      tableDataFilters: {},
      filterValues: {},
      tableDataSortRules: {},
      spanArr: [],
      contactDot: 0,
      scrollTop: 0,
      dom: null
    }
  },
  computed: {
    ...mapGetters(['clickedCells', 'queryForm']),
    dealedTableData() {
      const filtered = this.tableData.filter(item => {
        let flag = true
        Object.entries(this.filterValues).forEach(([key, arr]) => {
          if (arr.length && !arr.includes(item[key])) {
            flag = false
          }
        })
        return flag
      })
      const sortRules = Object.entries(this.tableDataSortRules).reduce(
        (pre, [key, value]) => {
          if (value) {
            pre[0].push(key)
            value = value === 'ascending' ? 'asc' : 'desc'
            pre[1].push(value)
          }
          return pre
        },
        [[], []]
      )
      return this._.orderBy(filtered, sortRules[0], sortRules[1])
    }
  },
  watch: {
    flightDate: {
      handler(val) {
        if (val === null) {
          this.flightDate = ['', '']
        }
      },
      deep: true
    },
    dealedTableData: {
      handler(val) {
        this.spanArr = []
        let contactDot = this.contactDot
        val.forEach((item, index, arr) => {
          if (index === 0) {
            this.spanArr.push(1)
          } else {
            if (
              item['flightNO'] === arr[index - 1]['flightNO'] &&
              item['flightDate'] === arr[index - 1]['flightDate'] &&
              item['passengerNameUpcase'] === arr[index - 1]['passengerNameUpcase'] &&
              item['checkInNO'] === arr[index - 1]['checkInNO'] &&
              item['bagWeight'] === arr[index - 1]['bagWeight']
            ) {
              this.spanArr[contactDot] += 1
              this.spanArr.push(0)
            } else {
              this.spanArr.push(1)
              contactDot = index
            }
          }
        })
      },
      deep: true
    }
  },
  created() {
    Object.values(this.tableCols).forEach(({ prop, filterable, sortable }) => {
      if (filterable) {
        this.$set(this.tableDataFilters, prop, [])
        this.$set(this.filterValues, prop, [])
      }
      if (sortable) {
        this.$set(this.tableDataSortRules, prop, '')
      }
    })
    // console.log(this.$store.state.app.queryForm)
    // 参数顺序   【航班开始日期，航班结束日期，航班号，航班号，行李牌号，行李牌号，起飞站，起飞站，目的站，目的站，特殊行李类型，特殊 行李类型，旅客姓名大写拼音，旅客姓名大写拼音，PNR，PNR,值机号，值机号】
    // const dataContent = [this.time[0], this.time[1]]
    // for (let i = 0; i < 18; i++) {
    //   dataContent.push(null)
    // }
    // this.statItemsQueryByStatMain(dataContent);
  },
  mounted() {
    this.baggageTypeQuery()
    this.dom = this.$refs.table.bodyWrapper
    let that = this
    this.dom.addEventListener('scroll', () => {
      that.scrollTop = this.dom.scrollTop
    })
  },
  activated() {
    let queryFlag = false
    const query = this.$route.query
    const { startDate, endDate, singleJump } = query
    const queryEntries = Object.entries(query)
    if (queryEntries.length) {
      this.clearForm()
    }
    queryEntries.forEach(([key, value]) => {
      if (!['startDate', 'endDate', 'singleJump'].includes(key) && (value ?? '') !== '') {
        queryFlag = true
        this.form[key] = ['unLoad', 'checkIn', 'active', 'transferIn', 'canceled', 'noBSM'].includes(key)
          ? Number(value)
          : value
      }
    })
    if (startDate) {
      this.$set(this.flightDate, 0, startDate)
    }
    if (endDate) {
      this.$set(this.flightDate, 1, endDate)
    }
    // startDate && (this.flightDate[0] = startDate)
    // endDate && (this.flightDate[1] = endDate)
    if (queryFlag) {
      this.onCheckGj(singleJump)
    } else {
      this.dom = this.$refs.table.bodyWrapper
      this.dom.scrollTop = this.scrollTop
    }
    // else if (this.queryForm) {
    //   Object.keys(this.form).forEach(key => {
    //     this.form[key] = this.queryForm[key]
    //   })
    //   this.flightDate = this.queryForm.flightDate
    //   this.onCheckGj()
    // }
  },
  updated() {
    // table数据更新
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  beforeDestroy() {
    // console.log(this.$route.matched.filter(item => item.name && item.meta.title))
    if (this.$route.matched.filter(item => item.name && item.meta.title).length > 1) {
      this.$store.dispatch('app/setQueryForm', {
        ...this.form,
        flightDate: this.flightDate
      })
    } else {
      this.$store.dispatch('app/setQueryForm', null)
    }
  },
  methods: {
    load() {
      if (this.noMore || this.loading || this.page < 0) {
        return
      }
      this.statItemsQueryByStatMain(this.dataContent)
    },
    resetTable() {
      this.page = 0
      this.noMore = false
      this.tableData = []
    },
    dialogShow() {
      this.gjFlag = true
      this.$nextTick(() => {
        this.dialogFocus()
      })
    },
    dialogFocus() {
      this.$refs['dialog'].focus()
    },
    // startDateChangeHandler(val) {
    //   this.flightDate[0] = val ?? ''
    //   if (!val || !this.flightDate[1]) {
    //     return
    //   }
    //   const startDate = new Date(val)
    //   const endDate = new Date(this.flightDate[1])
    //   if (startDate > endDate) {
    //     this.flightDate.splice(1, 1, '')
    //     this.$message.info('结束时间不能早于开始时间，请重新选择')
    //   } else if (endDate - startDate > 2 * 24 * 60 * 60 * 1000) {
    //     this.flightDate.splice(1, 1, '')
    //     this.$message.info('时间跨度不能超过三天，请重新选择')
    //   }
    // },
    // endDateChangeHandler(val) {
    //   this.flightDate[1] = val ?? ''
    //   if (!val || !this.flightDate[0]) {
    //     return
    //   }
    //   const startDate = new Date(this.flightDate[0])
    //   const endDate = new Date(val)
    //   if (startDate > endDate) {
    //     this.flightDate.splice(0, 1, '')
    //     this.$message.info('开始时间不能晚于结束时间，请重新选择')
    //   } else if (endDate - startDate > 2 * 24 * 60 * 60 * 1000) {
    //     this.flightDate.splice(0, 1, '')
    //     this.$message.info('时间跨度不能超过三天，请重新选择')
    //   }
    // },
    dateRangePickHandler({ maxDate, minDate }) {
      if (!maxDate) {
        this.pickedDate = minDate
      } else {
        this.pickedDate = null
      }
    },
    dateRangeDisabled(date) {
      return this.pickedDate ? Math.abs(date - this.pickedDate) > 2 * 24 * 60 * 60 * 1000 : false
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (['passengerNameUpcase', 'bagWeight'].includes(column.property)) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
    headerCellClass({ row, column, rowIndex, columnIndex }) {
      const classes = []
      const rule = this.tableDataSortRules[column.property]
      if (rule) {
        classes.push(rule)
      }
      return classes.join(' ')
    },
    tableRowClassName({ row, rowIndex }) {
      const classes = []
      if (row.deleted === 'DEL') {
        classes.push('bgl-deleted')
      }
      return classes.join(' ')
    },
    cellClass({ row, column, rowIndex, columnIndex }) {
      const classes = []
      if (['flightNO', 'bagSN', 'preFlightNO', 'transferFlightNO'].includes(column.property) && row[column.property]) {
        classes.push('cell-click')
        if (
          this.clickedCells.some(
            cell =>
              cell.pageName === 'advance' &&
              Object.entries(cell.row).every(([key, value]) => row[key] === value) &&
              cell.columnProp === column.property
          )
        ) {
          classes.push('cell-clicked')
        }
      }
      return classes.join(' ')
    },
    cellClickHandler(row, column, cell, event) {
      if (['flightNO', 'bagSN', 'preFlightNO', 'transferFlightNO'].includes(column.property)) {
        this.$store.dispatch('keepAlive/addClickedCell', {
          row,
          columnProp: column.property,
          pageName: 'advance'
        })
      }
      switch (column.property) {
        case 'flightNO':
          this.$router.push({
            path: '/advance/flightView',
            query: {
              flightNO: row.flightNO,
              flightDate: row.flightDate
            }
          })
          break
        case 'bagSN':
          this.$router.push({
            path: '/advance/baggageView',
            query: {
              flightNO: row.flightNO,
              flightDate: row.flightDate,
              bagSN: row.bagSN
            }
          })
          break
        case 'transferFlightNO':
          this.$router.push({
            path: '/advance/flightView',
            query: {
              flightNO: row.transferFlightNO,
              flightDate: row.transferFlightDate
            }
          })
          break
        case 'preFlightNO':
          this.$router.push({
            path: '/advance/flightView',
            query: {
              flightNO: row.preFlightNO,
              flightDate: row.preFlightDate
            }
          })
          break
        default:
          break
      }
    },
    tableFormat(row, column, cellValue) {
      switch (column.property) {
        case 'departureTime':
          return (cellValue ?? '').replace('T', ' ')
        case 'deleted':
          return cellValue === 'DEL' ? cellValue : ''
        case 'activated':
          return cellValue === 1 ? '激活' : '未激活'
        default:
          return cellValue ?? ''
      }
    },
    // 查询
    getSearchData(val) {
      this.clearForm()
      if (this.flightDate[0] === '' || this.flightDate[1] === '' || val === '') {
        this.$message.error('请先输入完整查询信息')
      } else {
        // 点击搜索后清除跳转携带的查询信息
        this.$route.query && this.$router.replace(this.$route.path)

        // let searchData = {dataContent:[this.time[0],this.time[1],val]}
        const az = /^[a-zA-Z]+$/
        const azNum = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]*$/
        // const top2 = /^[a-zA-Z]{2}\w*$/
        const top2 = /^([a-zA-Z][0-9])|([0-9][a-zA-Z])|([a-zA-Z]{2})/
        const num = /^[0-9]+$/
        const bagNo = /^[a-zA-Z]{2}[0-9]{6}$/
        // 纯字母则为旅客姓名
        if (az.test(val)) {
          this.form['passengerName'] = val
          this.onCheckGj(true)
        } else if (azNum.test(val) && top2.test(val)) {
          // 字母加数字且前两位为字母则为航班号
          this.form['flightNO'] = val
          this.onCheckGj(true)
        } else if ((num.test(val) && val.length === 10) || bagNo.test(val)) {
          // 纯数字且位数等于10则为行李牌号
          this.form['baggageNO'] = val
          this.onCheckGj(true)
        } else {
          this.$message.error('请先输入有效查询信息如航班号、旅客姓名首字母、行李牌号')
        }
        // this.sempleQueryByStatMain(searchData)
      }
    },
    // 清除查询
    clearSearchData() {
      this.clearForm()
      this.resetTable()
    },
    // 清除表单
    clearForm() {
      Object.keys(this.form).forEach(key => {
        this.form[key] = ''
      })
    },
    // 高级查询-确定
    onCheckGj(singleJump) {
      this.resetTable()
      /* 参数顺序
      【航班开始日期，航班结束日期，航班号，航班号，行李牌号，行李牌号，起飞站，起飞站，目的站，目的站，特殊行李类型，特殊行李类型，旅客姓名大写拼音，旅客姓名大写拼音，
      PNR，PNR，值机号，值机号，中转进航班，中转进航班，中转出航班，中转出航班，容器编号，容器编号，
      是否已翻减（null/OFF/其他），是否已翻减（null/OFF/其他），是否值机（null/0/1），是否值机（null/0/1），
      是否激活（null/0/1），是否激活（null/0/1），是否中转（null/0/1），是否中转（null/0/1），是否取消行李（null/0/1)，是否取消行李（null/0/1)】 */
      this.dataContent = []
      const flightDate = this.flightDate
      if (flightDate && flightDate.length) {
        this.dataContent.push(flightDate[0])
        this.dataContent.push(flightDate[1])
        if (Object.values(this.form).every(value => value === '')) {
          this.$message.error('请先输入查询信息')
        } else {
          const {
            flightNO,
            baggageNO,
            departureStation,
            destination,
            specialType,
            passengerName,
            PNR,
            checkInSequence,
            transferArrival,
            transferDeparture,
            U_Device_ID,
            unLoad,
            checkIn,
            active,
            transferIn,
            canceled,
            status,
            noBSM
          } = this.form
          this.setDataContent(
            flightNO,
            baggageNO,
            departureStation,
            destination,
            specialType,
            passengerName,
            PNR,
            checkInSequence,
            transferArrival,
            transferDeparture,
            U_Device_ID,
            unLoad,
            checkIn,
            active,
            transferIn,
            canceled,
            status,
            noBSM
          )
          this.statItemsQueryByStatMain(this.dataContent, singleJump)
          this.gjFlag = false
        }
      } else {
        this.$message.error('请先选择要查询的时间')
      }
    },
    closeCheckGj() {
      this.gjFlag = false
    },
    setDataContent(...dataContent) {
      dataContent.forEach(target => {
        target = typeof target === 'string' ? target.trim() : target
        if ((target ?? '') !== '') {
          this.dataContent.push(target, target)
        } else {
          this.dataContent.push(null, null)
        }
      })
    },
    // 数据查询
    async statItemsQueryByStatMain(dataContent, singleJump) {
      this.loading = true
      try {
        const {
          code,
          returnData: { listValues: result, needPage }
        } = await Query({
          id: DATACONTENT_ID.advacedQueryId,
          needPage: ++this.page,
          dataContent
        })
        if (Number(code) !== 0) {
          this.page--
          this.loading = false
          this.$message.error('获取数据失败')
          return
        }
        if (needPage === this.page && result.length) {
          if (singleJump) {
            if (result.length === 1) {
              this.$router.push({
                path: '/advance/baggageView',
                query: {
                  bagSN: result[0].bagSN,
                  flightNO: result[0].flightNO,
                  flightDate: result[0].flightDate
                }
              })
            } else {
              const onlyFlight = result.reduce((pre, curr) => {
                if (
                  pre === null ||
                  (curr.flightNO &&
                    curr.flightDate &&
                    curr.flightNO === pre.flightNO &&
                    curr.flightDate === pre.flightDate)
                ) {
                  return {
                    flightNO: curr.flightNO,
                    flightDate: curr.flightDate
                  }
                } else {
                  return {}
                }
              }, null)
              if (onlyFlight.flightNO) {
                this.$router.push({
                  path: '/advance/flightView',
                  query: onlyFlight
                })
              }
            }
          }
          // const tableData = this._.sortBy(result, ['flightDate', 'departureTime', 'passengerNameUpcase', 'bagSN'])
          this.tableData = [...this.tableData, ...result]
          setTableFilters(this.tableData, this.tableDataFilters)
        } else {
          if (this.page === 1) {
            this.$message.info('未查询到匹配结果')
          }
          this.page--
          this.noMore = true
        }
      } catch (error) {
        this.page--
        console.log('出错了', error)
      }
      this.loading = false
    },
    // 特殊行李类型下拉选项查询
    async baggageTypeQuery() {
      try {
        const result = await myQuery(DATACONTENT_ID.baggageTypeId)
        this.baggageTypeList = result
      } catch (error) {
        console.log('出错了', error)
      }
    },
    // 简单查询 废弃
    // async sempleQueryByStatMain(dataContent) {
    //   try {
    //     const res = await getQuery({
    //       id: 31,
    //       dataContent
    //     })
    //     if (res.code == 0) {
    //       this.tableData = res.returnData
    //     } else {
    //       this.$message.error(res.message)
    //     }
    //   } catch (error) {
    //     console.log('出错了', error)
    //   }
    // },
    // 统计行数
    summaryRow(num) {
      return function () {
        return ['合计', `共${num}件`]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.advance {
  padding: 8px;
  &__head {
    line-height: 32px;
    margin-top: 8px;
    margin-bottom: 16px;
    .setting {
      height: 32px;
      width: 32px;
      cursor: pointer;
      background-size: 100% 100%;
      background: url('../../../assets/baggage/ic_setting.png') no-repeat;
      margin-left: 12px;
      position: relative;
      top: 2px;
    }
    .mr10 {
      margin-right: 10px;
    }
    ::v-deep .interfaceLog_head_time {
      .el-input__prefix {
        left: 10px;
        color: #101116;
      }
      .el-input--prefix .el-input__inner {
        padding-left: 50px;
      }
    }
  }
}
.advance__table {
  width: 100%;
  ::v-deep .table {
    width: 100%;
    .cell {
      padding: 0;
      text-align: center;
      font-size: 14px;
      font-family: Helvetica, 'Microsoft YaHei';
      letter-spacing: 0;
    }
    .cell-click {
      cursor: pointer;
      color: #2d7cff;
      &.cell-clicked {
        color: purple;
      }
    }
    .el-table__header-wrapper,
    .el-table__fixed-header-wrapper {
      .cell {
        font-weight: bold;
        color: #101116;
      }

      .has-gutter {
        tr {
          .bgl-huang {
            background: #fcf0b1;
          }
        }
      }
    }

    .el-table__body-wrapper,
    .el-table__fixed-body-wrapper {
      tr.bgl-deleted {
        background: #d2d6df;
        td {
          background: #d2d6df;
          font-style: italic;
        }
      }
    }
  }
}
.el-table tbody tr:hover > td {
  background-color: red !important;
}

.el-table__body tr.hover-row.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped > td,
.el-table__body tr.hover-row > td {
  background-color: red;
}

.rowDialog::v-deep .el-form > .el-row > .el-col:nth-child(1) .el-date-editor {
  width: 100%;
}
</style>