<template>
  <div class="newFlightView">
    <div class="newFlightView-left">
      <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="newFlightView-left-top">
        <div class="newFlightView-left-top-top">
          <div class="newFlightView-left-top-top-title flex-wrap">
            <div class="newFlightView-left-top-top-title-info">
              航班基本信息
            </div>
            <div class="newFlightView-left-top-top-title-no">
              {{ flightObj.carrierFlights }}
            </div>
          </div>
          <div class="newFlightView-left-top-top-status">
            <el-scrollbar style="height: 100%">
              <el-checkbox-group @change="checkChange" class="flex-wrap" v-model="checkList">
                <legItem v-for="(item, index) in checkStates" :key="index" :total="checkStates" :index="index + 1" :item="item" />
              </el-checkbox-group>
            </el-scrollbar>
          </div>
        </div>
        <div class="newFlightView-left-top-list">
          <el-descriptions :column="2">
            <el-descriptions-item label="起飞机场简称">{{
              infoObj.takeoff_airport_name
            }}</el-descriptions-item>
            <el-descriptions-item label="起飞机场三字码">{{
              infoObj.outAirport
            }}</el-descriptions-item>
            <el-descriptions-item label="登机口">{{
              infoObj.gateCd
            }}</el-descriptions-item>
            <el-descriptions-item label="停机位">
              {{ infoObj.depstandCd }}</el-descriptions-item>
            <el-descriptions-item :span="2" label="计划起飞时间">{{
              formatTime(infoObj.scheduleTakeOffTime)
            }}</el-descriptions-item>
            <el-descriptions-item :span="2" label="实际起飞时间">{{
              formatTime(infoObj.actualTakeOffTime)
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="newFlightView-left-top-list">
          <el-descriptions :column="2">
            <el-descriptions-item label="降落机场简称">{{
              infoObj.target_airport_name
            }}</el-descriptions-item>
            <el-descriptions-item label="降落机场三字码">{{
              infoObj.landAirport
            }}</el-descriptions-item>
            <el-descriptions-item label="提取转盘">{{
              infoObj.arrcarouselCd
            }}</el-descriptions-item>
            <el-descriptions-item label="停机位">
              {{ infoObj.arrstandCd }}</el-descriptions-item>
            <el-descriptions-item :span="2" label="计划降落时间">{{
              formatTime(infoObj.scheduleLandInTime)
            }}</el-descriptions-item>
            <el-descriptions-item :span="2" label="实际降落时间">{{
              formatTime(infoObj.actualLandInTime)
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="newFlightView-left-top-list">
          <el-descriptions :column="2">
            <el-descriptions-item label="航班状态">{{
              infoObj.normalState
            }}</el-descriptions-item>
            <el-descriptions-item label="托运旅客数">{{
              infoObj.checked_passengers_number
            }}</el-descriptions-item>
            <el-descriptions-item label="中转进行李数">{{
              infoObj.transfer_baggage_number
            }}</el-descriptions-item>
            <el-descriptions-item label="终点行李数">{{
              infoObj.destination_bags_number
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="newFlightView-left-bottom">
        <containerTable :msgContent="legTable" />
      </div>
    </div>
    <flightTable :msgObj="infoObj" :msgContent="flightTable" />
  </div>
</template>

<script>
import flightTable from './components/flightTable.vue'
import containerTable from './components/containerTable.vue'
import legItem from './components/list.vue'
import { Query } from '@/api/webApi'
import { combine } from '@/utils'
import { mapGetters } from 'vuex'
export default {
  name: 'FlightPage',
  components: { flightTable, containerTable, legItem },
  data () {
    return {
      infoObj: {},
      flightObj: {},
      checkList: [],
      checkStates: [],
      deArrs: [],
      deArrsNum: [],
      loading: false,
      legTable: [],
      flightTable: [],
      pageAuthtables: [],
      checkDatas: []
    }
  },
  computed: {
    ...mapGetters(['authArrs']),
  },
  methods: {
    //选中
    async checkChange (arr) {
      try {
        const ndata = []
        const result = [...arr]
        if (result?.length) {
          this.loading = true
          const setData = Array.from(new Set(result.join("-").split("-")))
          this.deArrsNum.forEach((item) => {
            setData.forEach((p) => {
              if (item.item == p) {
                const obj = {
                  name: item.item,
                  index: item.index,
                };
                ndata.push(obj)
              }
            })
          })
          const caps = ndata.sort((a, b) => a.index - b.index)
          const [c4, c5] = [caps[0].name, caps[caps.length - 1].name]
          const newPrams = _.cloneDeep(this.flightObj)
          const [tb1, tb2] = [_.cloneDeep(this.legTable), _.cloneDeep(this.flightTable)]
          newPrams.outAirport = c4
          newPrams.landAirport = c5
          tb1[0].nfilter = newPrams
          this.legTable = tb1
          tb2[0].nfilter = newPrams
          this.flightTable = tb2
          const res = await this.getLegInfo(111, newPrams)
          if (res && res.length) {
            this.infoObj = res[0]
          }
          this.loading = false
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 显示日期
    formatTime (datetime) {
      return datetime?.replace("T", " ") ?? "";
    },
    //格式化参数-航班号
    formatParams (arr = [], query = {}) {
      if (arr && arr.length) {
        for (let index = 0; index < arr.length; index++) {
          const { k1, k2 } = arr[index];
          if (query[k2]) {
            query.carrierFlights = query[k1];
            query.carrierFlightsDate = query[k2];
            delete query[k1];
            delete query[k2];
          }
        }
      }
      return query;
    },
    async getLegInfo (id, dataParams, event = 0, key = '') {
      const params = {
        serviceid: id,
        datacontent: { filter: dataParams },
        event,
      }
      const { code, returnData } = await Query(params)
      if (code == 0) {
        return returnData
      } else {
        return []
      }
    },
    setLegInfo (infos = []) {
      if (!infos.length) return
      const infoArrs = []
      const checkDatas = []
      for (const p of infos) {
        const { outAirport, landAirport } = p
        if (outAirport && landAirport) {
          infoArrs.push({
            outAirport,
            landAirport,
          })
        }
      }
      this.deArrs = infoArrs
      const m = combine(this.deArrs, "outAirport", "landAirport")
      m.forEach((item, index) => {
        checkDatas.push(`${m[index]}-${m[index + 1]}`);
        const obj = {
          item,
          index,
        };
        this.deArrsNum.push(obj);
      });
      this.checkDatas = checkDatas
      this.checkStates = m
    },
    setCheckInfo (infos) {
      const m = [...infos]
      const [a1, a2] = [m[0], m[m.length - 1]]
      const { outAirport, landAirport } = this.infoObj
      if (a1 == outAirport && a2 == landAirport) {
        this.checkList = this.checkDatas.splice(0, m.length - 1)
      } else {
        this.checkList = [`${outAirport}-${landAirport}`]
      }
    },
    setTableData (dataParams) {
      if (this.pageAuthtables?.length) {
        this.pageAuthtables.map(item => {
          item.nfilter = dataParams
        })
        this.legTable = this.pageAuthtables.filter(item => item.serviceid == 112)
        this.flightTable = this.pageAuthtables.filter(item => item.serviceid == 113)
      }
    }
  },
  async mounted () {
    const { query } = this.$route
    //获取页面配置
    const { auth_id } = this.$route.meta
    //获取页面权限类型组件  pagetype 1模块  2页面  3按钮 4表格 5树形  6弹窗
    const pageAuths = this.authArrs
    if (!pageAuths.length) return
    //获取当前页面权限类型
    const pageAuthArrs = pageAuths.filter(item => item['superiorid'] == auth_id)
    if (!pageAuthArrs.length) return
    //获取table权限
    const pageAuthtables = pageAuthArrs.filter(item => item.pagetype == 'table')
    this.pageAuthtables = pageAuthtables
    const np = [
      {
        k1: "inflightNo",
        k2: "inflightDate",
      },
      {
        k1: "transferFlightNO",
        k2: "outflightDate",
      },
      {
        k1: "Inbound_flight_number",
        k2: "Inbound_flight_date",
      },
      {
        k1: "departure_flights_number",
        k2: "departure_flights_date",
      },
    ]
    this.loading = true
    const nq = this.formatParams(np, { ...query })
    this.flightObj = { ...nq }
    const legInfo = await this.getLegInfo(114, nq)
    if (legInfo?.length) {
      this.setLegInfo([...legInfo])
      const dataParams = Object.assign({ ...nq }, { outAirport: this.checkStates[0], landAirport: this.checkStates[1] })
      this.setTableData(dataParams)
      const dataInfo = await this.getLegInfo(111, dataParams)
      if (dataInfo?.length) {
        this.infoObj = dataInfo[0]
        this.setCheckInfo(this.checkStates)
      }
    }
    this.loading = false
  }
}
</script>

<style lang="scss" scoped>
.newFlightView {
  height: calc(100vh - 90px);
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  &-left {
    width: 408px;
    margin-right: 8px;
    &-top {
      height: 575px;
      background-color: #fff;
      &-top {
        padding: 25px 16px;
        border-bottom: 1px solid #c8cfdb;
        &-title {
          line-height: 23px;
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #101116;
          margin-bottom: 25px;
          &-info {
            margin-right: 16px;
          }
        }
        &-status {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #101116;
          ::v-deep .el-checkbox-group {
            font-size: initial;
            .el-checkbox__inner {
              border-radius: 50%;
            }
            .el-checkbox__label {
              display: none;
            }
          }
        }
      }
      &-list {
        padding: 25px 16px 13px 16px;
        border-bottom: 1px solid #c8cfdb;
        &:last-child {
          border-bottom: none;
        }
      }
    }
    &-bottom {
      height: calc(100% - 575px - 10px);
      margin-top: 8px;
    }
  }
}
</style>