<!--
 * @Author: your name
 * @Date: 2022-01-17 10:39:22
 * @LastEditTime: 2022-03-14 12:04:16
 * @LastEditors: your name
 * @Description: 行李视图
-->
<template>
  <div class="departureTwo">
    <div class="part1">
      <div class="title">
        <span>行李基本信息</span>
        <el-radio-group
          v-model="infoBtn"
          class="radioBtn"
          size="mini"
          fill="#FFFFFF"
          text-color="#28344D"
        >
          <el-radio-button label="跟踪信息" />
          <el-radio-button label="跟踪报文" />
        </el-radio-group>
      </div>
      <div class="part1_info">
        <el-row :gutter="50">
          <el-col :span="3">行李牌号：{{ infoData.bagNo }}</el-col>
          <el-col :span="3">特殊行李类型：{{ infoData.specialType }}</el-col>
          <el-col :span="3">旅客姓名：{{ infoData.name }}</el-col>
          <el-col :span="3">行李异常分类： QOD20481</el-col>
          <el-col :span="4">企业或团队名称：{{ infoData.teamOrGroup }}</el-col>
          <el-col :span="4">PNR: {{ infoData.pnr }}</el-col>
        </el-row>
      </div>
    </div>
    <div class="part2">
      <div class="part2_info">
        <div class="title">行李跟踪信息</div>
        <div
          v-if="infoBtn == '跟踪信息'"
          class="type normal"
        >
          {{ infoData.status }}
        </div>
        <div
          v-if="infoBtn == '跟踪信息'"
          class="step"
        >
          <div class="stepLine">
            <div
              :style="{ width: lineWidth }"
              class="stepLineBlue"
            />
          </div>
          <div
            v-for="(item, index) in stepData"
            :key="index"
            class="stepItem"
            :class="{ activeItem: item.date.length > 0 }"
          >
            <span class="head">{{ item.airPort }}
              <span v-if="item.airPort && item.nodeName !== ''">-</span>
              <span>{{ item.nodeName.split('/')[1] || item.nodeName }}</span>
            </span>
            <span>{{ item.date }}</span>
            <span>{{ item.time }}</span>
          </div>
        </div>
      </div>
      <div class="Btn">
        <el-button
          type="primary"
          icon="el-icon-download"
          size="mini"
        />
        <el-button
          class="setBtn"
          type="primary"
          icon="el-icon-s-tools"
          size="mini"
          @click="show"
        />
      </div>
    </div>
    <div
      v-if="infoBtn == '跟踪信息'"
      class="part3"
    >
      <el-table
        ref="table"
        :data="baggageTableData"
        border
        style="width: 100%"
        height="calc(100vh - 81px - 144px - 156px)"
        stripe
        size="mini"
        :span-method="objectSpanMethod"
        :header-cell-style="{ color: '#101116' }"
      >
        <el-table-column
          v-for="item in tableColsCopy"
          :key="item.index"
          :prop="item.prop"
          :label="item.name"
          :align="item.align"
          :show-overflow-tooltip="true"
          :render-header="renderHeader"
        />
      </el-table>
    </div>

    <div
      v-if="infoBtn == '跟踪报文'"
      class="part4"
    >
      <template v-if="messageList.length">
        <el-row
          :gutter="24"
          type="flex"
        >
          <el-col
            v-for="(message, index) in messageList"
            :key="index"
            :span="6"
          >
            <div class="card">
              <div class="message">
                {{ message.replace(/\s+/g, '').split('.').join('\n.') }}
                <!-- BSM <br>
              .V/1LHRB <br>
              .F/XX1640/08APR/PEK/Y <br>
              .O/ZZ941/08APR/DXB/E <br>
              .N/0666826758001 <br>
              .D/SELF//08APR/110023L//PEK30113 <br>
              .S/N/32L/C/030//Y/I <br>
              .W/K/l/0 <br>
              .P/1CUI/DI ENDBSM<br> -->
              </div>
            </div>
          </el-col>
        </el-row>
      </template>
      <template v-else>
        <el-empty
          :image-size="1"
          description="暂无数据"
        />
      </template>
    </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: 'name',
              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>
  </div>
</template>
<script>
import Dialog from '@/layout/components/Dialog/index.vue'
import { nodeinfoes, fulltrackinfoAndNodeInfoList, BaggageMessageQuery } from '@/api/flight'
import tableColsMixin from '../../mixins/tableCols'

export default {
  name: 'BaggageView',
  components: {
    Dialog
  },
  mixins: [tableColsMixin],
  data() {
    return {
      departureAirport: '',
      landingAirport: '',
      infoData: null,
      dialogVisibledele: false,
      active: 2,
      infoBtn: '跟踪信息',
      hasMessageGotten: false,
      messageList: [
        // `BSM
        // .V/1LHRB
        // .F/XX1640/08APR/PEK/Y
        // .O/ZZ941/08APR/DXB/E
        // .N/0666826758001
        // .D/SELF//08APR/110023L//PEK30113
        // .S/N/32L/C/030//Y/I
        // .W/K/l/0
        // .P/1CUI/DI ENDBSM`
      ],
      lineWidth: '',
      checkList: [],
      stepData: [
        {
          airPort: this.departureAirport,
          nodeCode: 'CHECKIN',
          nodeName: '值机',
          date: '',
          time: ''
        },
        {
          airPort: this.departureAirport,
          nodeCode: 'SECURITY',
          nodeName: '安检',
          date: '',
          time: ''
        },
        {
          airPort: this.departureAirport,
          nodeCode: 'SORT',
          nodeName: '分拣',
          date: '',
          time: ''
        },
        {
          airPort: this.departureAirport,
          nodeCode: 'LOAD',
          nodeName: '装载/装车',
          date: '',
          time: ''
        },
        {
          airPort: this.departureAirport,
          nodeCode: 'INF',
          nodeName: '装机',
          date: '',
          time: ''
        },
        // {
        //   airPort: this.landingAirport,
        //   nodeCode: '',
        //   nodeName: '卸机',
        //   date: '',
        //   time: ''
        // },
        {
          airPort: this.landingAirport,
          nodeCode: 'UNLOAD',
          nodeName: '卸车',
          date: '',
          time: ''
        },
        {
          airPort: this.landingAirport,
          nodeCode: 'TiQu',
          nodeName: '提取',
          date: '',
          time: ''
        }
      ],
      tableCols: [
        {
          name: '航班号',
          prop: 'flightNo',
          align: 'center'
        },
        { name: '航班日期', prop: 'flightDate', align: 'center' },
        {
          name: '起飞航站/预计起飞时间',
          prop: 'start',
          align: 'center'
        },
        {
          name: '目的航站/预计降落时间',
          prop: 'end',
          align: 'center',
          sortable: 'custom'
        },
        { name: '旅客仓位', prop: 'passengerCompartment', align: 'center' },
        { name: '旅客座位号', prop: 'passengerSeatNumber', align: 'center' },
        { name: '值机序号', prop: 'passengerCheckInNumber', align: 'center' },
        { name: '节点标识', prop: 'nodeCode', align: 'center' },
        { name: '节点名称', prop: 'nodeName', align: 'center' },
        { name: '位置码', prop: 'locationCode', align: 'center' },
        { name: '位置描述', prop: 'locationRemark', align: 'center' },
        { name: '读取时间', prop: 'dealTime', align: 'center' },
        { name: '结果', prop: 'status', align: 'center' },
        { name: '次级代码', prop: 'secondaryCode', align: 'center' },
        { name: '操作人', prop: 'creator', align: 'center' },
        { name: '设备ID', prop: 'deviceId', align: 'center' },
        { name: '发往位置', prop: 'toLocation', align: 'center' },
        { name: '位置描述', prop: 'toLocationRemark', align: 'center' },
        { name: '装载序号', prop: 'loadSequenceNumber', align: 'center' },
        { name: '容器编号', prop: 'containerNumber', align: 'center' },
        { name: '报文', prop: 'messageType', align: 'center' }
      ],
      baggageTableData: [],
      spanArr: [],
      pos: 0
    }
  },
  watch: {
    infoBtn(val) {
      if (val === '跟踪报文' && !this.hasMessageGotten) {
        const { flightNo, flightDate, bagNo } = this.infoData
        const params = { flightNo, flightDate, bagNo }
        this.baggageMessageQuery(params)
      }
    }
  },
  created() {
    this.infoData = this._.cloneDeep(this.$route.query)
    // console.log(this.infoData)
    // this.baggageTableColumnCheckList = this._.cloneDeep(this.baggageTableColumn)
    const nodeData = {
      flightNo: this.infoData.flightNo,
      flightDate: this.infoData.flightDate,
      bagNo: this.infoData.bagNo
    }
    this.getNodeinfoes(nodeData)
    this.getFulltrackinfoAndNodeInfoList(nodeData)
  },
  methods: {
    async getFulltrackinfoAndNodeInfoList(data) {
      try {
        const result = await fulltrackinfoAndNodeInfoList(data)
        if (result.returnData.length > 0) {
          this.departureAirport = result.returnData[0].departureAirport
          this.landingAirport = result.returnData[0].landingAirport
        }
        result.returnData.forEach(item => {
          item['start'] = item.departureAirport + '\n' + item.departureTime
          item['end'] = item.landingAirport + '\n' + item.landingTime
          item['dealTime'] = item.dealTime.split('T')[1]
        })
        this.baggageTableData = this._.cloneDeep(result.returnData)
        for (var i = 0; i < this.baggageTableData.length; i++) {
          if (i === 0) {
            this.spanArr.push(1)
            this.pos = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (this.baggageTableData[i].flightNo === this.baggageTableData[i - 1].flightNo) {
              this.spanArr[this.pos] += 1
              this.spanArr.push(0)
            } else {
              this.spanArr.push(1)
              this.pos = i
            }
          }
          // console.log(this.spanArr)
        }
      } catch (error) {
        console.log(error)
      }
    },
    async getNodeinfoes(data) {
      try {
        const result = await nodeinfoes(data)
        const nodes = this._.cloneDeep(result.returnData)
        let finalStep = 0
        this.stepData.forEach((item, index) => {
          nodes.forEach(node => {
            if (item.nodeCode === node.nodeCode) {
              item.date = node.realTime.split(' ')[0]
              item.time = node.realTime.split(' ')[1]
              finalStep < index + 1 && (finalStep = index + 1)
            }
          })
        })
        this.lineWidth = (finalStep / 8) * 100 + '%'
        // console.log(this.stepData)
      } catch (error) {
        console.log(error)
      }
    },
    async baggageMessageQuery(params) {
      try {
        const result = await BaggageMessageQuery(params)
        this.hasMessageGotten = true
        // console.log(result.returnData)
        this.messageList = result.returnData
      } catch (error) {
        console.log(error)
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 4) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        // console.log(`rowspan:${_row} colspan:${_col}`)
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    renderHeader(h, { column, $index }) {
      const arr = column.label.split('/')
      if (arr.length > 1) {
        return h('span', {
          attrs: {},
          domProps: {
            innerHTML: '<span>' + arr[0] + '</span><br>' + arr[1]
          }
        })
      } else {
        return h('span', {
          attrs: {},
          domProps: {
            innerHTML: '<span>' + arr[0] + '</span>'
          }
        })
      }
    }
  }
}
</script>
<style lang="scss">
.radioBtn {
  padding: 5px;
  background: #000d2a;
  .el-radio-button__inner {
    background: #000d2a;
    color: #fff;
    border: none;
    font-weight: bold;
  }
  .el-radio-button:first-child .el-radio-button__inner {
    border: none;
  }
}
</style>
<style lang="scss" scoped>
.departureTwo {
  width: 100%;
  height: calc(100vh - 81px);
  overflow: hidden;
  background: #dfe3ea;
  padding: 10px 5px 0 5px;
  .part1 {
    width: 100%;
    height: 144px;
    background: #041741;
    padding: 31px 18px;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
      width: 320px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .part1_info {
      width: 100%;
      padding-top: 25px;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .part2 {
    width: 100%;
    padding: 24px 0;
    padding-left: 32px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .part2_info {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .title {
        font-size: 18px;
        font-weight: bold;
        color: #303133;
        margin-right: 42px;
      }
      .type {
        font-size: 18px;
        font-weight: bold;
        margin-right: 80px;
      }
      .warn {
        color: #df3559;
      }
      .normal {
        color: #519f6b;
      }
      .step {
        height: 80px;
        width: 980px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .stepLine {
          width: 100%;
          height: 20px;
          background: #afb4bf;
          position: absolute;
          top: 50%;
          margin-top: -10px;
          border-radius: 10px;
          .stepLineBlue {
            position: absolute;
            height: 100%;
            z-index: 1;
            background: #041741;
            border-radius: 10px;
          }
        }
        .stepItem {
          width: 80px;
          height: 80px;
          background: #afb4bf;
          border-radius: 50%;
          z-index: 1;
          text-align: center;
          font-weight: bold;
          color: #ffffff;
          font-size: 12px;
          display: flex;
          flex-direction: column;
          align-content: space-around;
          align-items: center;
          // padding-top: 19px;
          justify-content: center;
          .head {
            font-size: 14px;
          }
        }
        .activeItem {
          background: #041741;
        }
      }
    }
    .Btn {
      height: 30px;
      display: flex;
      .el-button {
        margin-left: 10px;
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .setBtn {
        margin-right: 30px;
      }
    }
  }
  .part3 {
    width: 100%;
    height: calc(100vh - 81px - 144px - 145px);
    padding: 10px 5px 15px 5px;
    ::v-deep .el-table .cell {
      white-space: pre-line;
    }
  }
  .part4 {
    width: 100%;
    height: calc(100vh - 81px - 144px - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    ::v-deep .el-row {
      flex-wrap: wrap;
      .card {
        width: 100%;
        min-height: 280px;
        padding: 36px 0 15px 31px;
        background: #ffffff;
        box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.29);
        margin-bottom: 24px;
        > .message {
          white-space: pre-line;
          line-height: 24px;
          font-size: 14px;
          color: #303133;
        }
      }
    }
  }
}
::v-deep .dialog-check-cols .el-tree {
  &.has-children .el-tree-node > .el-tree-node__children {
    display: flex;
    flex-wrap: wrap;
  }
  &.no-children {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
