<template>
  <div class="newBagDetails">
    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="newBagDetails-info">
      <div class="newBagDetails-info-look">
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="flex-wrap">
              <el-tooltip class="item" effect="dark" :content="passengerName" placement="top">
                <span class="newBagDetails-info-look-name">{{ passengerName }}</span>
              </el-tooltip>
              <el-button type="text">查看</el-button>
            </div>
          </el-col>
          <el-col :span="20">
            <el-scrollbar>
              <div class="tags-view-wrapper">
                <div v-for="(item,index) in detailsArr" class="tags-view-item" @click="tagClick(item,index)" :class="activeIndex == index ? 'active' : ''" :key="index">{{ item.luggageNum }}-<el-button @click.stop="getImg(item)" type="text">照片</el-button></div>
              </div>
            </el-scrollbar>
          </el-col>
        </el-row>
      </div>
      <div class="newBagDetails-info-details">
        <div class="newBagDetails-info-details-msgs">
          <el-scrollbar style="height: 100%;">
            <el-row class="newBagDetails-info-details-msgs-l1" :gutter="20">
              <el-col :span="3" class="msgs-list" v-for="(item,index) in msgs1" :key="index">{{ item.columnLabel }}：
                <el-tooltip class="item" effect="dark" :content="item.value+''" placement="top">
                  <span>{{ item.value }}</span>
                </el-tooltip>
              </el-col>
            </el-row>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <div class="newBagDetails-contents">
      <div class="newBagDetails-contents-tabs flex-wrap">
        <div class="newBagDetails-contents-tabs-title">行李跟踪信息</div>
        <div class="newBagDetails-contents-tabs-btns flex-wrap">
          <div v-for="(item,index) in tabMenu" @click="tabClick(item,index)" :key="index" :class="index == tabIndex ? 'is-active' : ''" class="newBagDetails-contents-tabs-btns-bt">{{ item.name }}</div>
        </div>
      </div>
      <div class="newBagDetails-contents-page">
        <component ref="dataChild" :tableDatas="tableDatas" :is="componentName"></component>
      </div>
    </div>
    <Dialog :flag="imgFlag" width="600px" class="dialog-check-img">
      <div class="dialog-wrapper">
        <div class="title">照片预览</div>
        <div style="height: 600px;padding: 0 20px 0 20px;">
          <el-scrollbar style="height: 100%;">
            <el-row :gutter="20">
              <el-col style="margin-bottom: 20px;" v-for="(item,index) in srcUrl" :key="index" :span="8">
                <template v-if="isBase64(item.picData)">
                  <el-image style="height:100px;width: 100%;" :src="item.picData" :preview-src-list="srcList">
                  </el-image>
                </template>
                <template v-else>
                  <el-image style="height:100px;width: 100%;" :src="'data:image/gif;base64,'+item.picData" :preview-src-list="srcList">
                  </el-image>
                </template>
              </el-col>
            </el-row>
          </el-scrollbar>
        </div>
        <div class="foot right t30">
          <el-button size="medium" class="r24" @click="imgFlag = false" type="primary">确定</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import ScrollPane from "@/layout/components/TagsView/ScrollPane.vue"
import baggageView from './components/baggageView.vue'
import baggageList from './components/baggageList.vue'
import baggageMessage from './components/baggageMessage.vue'
import Dialog from '@/layout/components/Dialog/index.vue'
import { getAuthData, formatOrder, listToTree } from '@/utils/validate'
import { getToken } from '@/utils/auth'
import { Query } from '@/api/webApi'
import { mapGetters } from 'vuex'
export default {
  name: 'NewBagDetails',
  components: { ScrollPane, baggageView, baggageList, baggageMessage, Dialog },
  data () {
    return {
      infoArrs: [],
      passenger_name: '',
      detailsArr: [],
      activeIndex: null,
      msgs1: [],
      tableCols: [],
      tabMenu: [
        {
          key: 'baggageView',
          name: '行李流程图'
        },
        {
          key: 'baggageList',
          name: '行李流程列表信息'
        },
        {
          key: 'baggageMessage',
          name: '行李报文'
        },
      ],
      tabIndex: 0,
      componentName: 'baggageView',
      query: '',
      passengerName: '',
      PNRNO: '',
      tagObj: {},
      tableDatas: [],
      tableDatas5Id: '',
      loading: false,
      queryObj: {},
      imgFlag: false,
      srcList: [],
      srcUrl: []
    }
  },
  computed: {
    ...mapGetters(['authArrs']),
  },
  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')
    if (!pageAuthtables.length) return
    //获取行李信息表
    const bagInfoTable = pageAuthtables.filter(item => item.serviceid == 115)
    this.tableDatas = pageAuthtables.filter(item => item.serviceid == 116)
    this.query = { ...query }
    this.getPageTableSetting(bagInfoTable)
  },
  methods: {
    isBase64 (base) {
      if (base.includes('base64')) {
        return true
      } else {
        return false
      }
    },
    //根据页面table设置数据
    getPageTableSetting (pageAuthtables) {
      const pageAuths = this.authArrs ?? []
      const authTableObj = pageAuthtables[0]
      //获取当前页面table的配置
      const { pagename, pageconfigurationid, serviceid, pagecode, userpermissionsid, nfilter, selected, triggerserviceid } = authTableObj

      const tableColumnArrs = pageAuths.filter(item => item['superiorid'] == pageconfigurationid && item['pagetype'] == 'column')
      this.getColumnData(serviceid, tableColumnArrs)
    },
    //获取表头数据
    getColumnData (serviceid, columnArrs = []) {
      const returnData = [...columnArrs]
      const tableColsCopy = _.cloneDeep(returnData).filter((item) => item.isdisplay)
      const tableColsCopyOrder = _.orderBy(tableColsCopy, ['displaynumber'], ['asc'])
      this.tableCols = tableColsCopyOrder
      this.queryTableData(serviceid, this.query)
    },
    setTableLocalData (key, data) {
      sessionStorage.setItem(key, JSON.stringify(data))
    },
    //获取表头数据
    async queryTableData (serviceid, dataParmas) {
      this.loading = true
      try {
        const datacontent = { filter: dataParmas }
        const parmas = {
          page: 1,
          serviceid,
          datacontent,
          size: 9999,
          event: '0'
        }
        const { code, returnData } = await Query(parmas)
        if (code == 0) {
          if (returnData?.length) {
            const ndata = []
            const bagInfo = [...returnData][0]
            const { luggageNum, PNRNO } = bagInfo
            this.passengerName = bagInfo['passengerName'] || ''
            this.PNRNO = bagInfo['PNRNO'] || ''
            if (PNRNO) {
              this.queryObj = {
                luggageNum,
                PNRNO
              }
            } else {
              this.queryObj = { ...this.query }
            }
            const bagInfoArr = Object.entries(bagInfo)
            this.tableCols.map(({ pagecode, pagename }) => {
              bagInfoArr.map(item => {
                const [key, value] = item
                if (pagecode == key) {
                  ndata.push({
                    columnLabel: pagename,
                    key,
                    value
                  })
                }
              })
            })
            this.msgs1 = [...ndata]
            this.setTableLocalData('bagQueryParams', this.queryObj)
            this.getLuggageNums()
            this.loading = false
          }
        } else {
          this.loading = false
          this.$message.error("获取表头数据失败")
        }
      } catch (error) {
        this.loading = false
        console.log(error)
      }
    },
    //获取行李号
    async getLuggageNums () {
      try {
        const { carrierFlights, carrierFlightsDate } = this.query
        let parmObj = null
        if (this.PNRNO) {
          parmObj = {
            PNRNO: this.PNRNO,
            passengerName: this.passengerName,
            carrierFlights,
            carrierFlightsDate
          }
        } else {
          parmObj = { ...this.query }
        }
        const datacontent = { filter: parmObj }
        const parmas = {
          page: 1,
          serviceid: 126,
          datacontent,
          size: 9999,
          event: '0'
        }
        const { code, returnData } = await Query(parmas)
        if (code == 0 && returnData && returnData.length) {
          this.detailsArr = _.uniqBy([...returnData], 'luggageNum')
        }
      } catch (error) {
        console.log(error)
      }
    },
    tagClick (item, index) {
      const { luggageNum, carrierFlights, carrierFlightsDate, PNRNO, passengerName } = item
      if (PNRNO) {
        this.tagObj = {
          PNRNO,
          passengerName,
          luggageNum
        }
      } else {
        this.tagObj = {
          luggageNum,
          carrierFlights,
          carrierFlightsDate
        }
      }
      this.activeIndex = index
      this.setTableLocalData('bagQueryParams', this.tagObj)
      this.queryTableData(115, this.tagObj)
    },
    tabClick (item, index) {
      if (item.key == 'baggageList' || item.key == 'baggageMessage') {
        let parmObj = null
        const { luggageNum } = this.query
        if (this.PNRNO) {
          parmObj = {
            PNRNO: this.PNRNO,
            passengerName: this.passengerName,
            luggageNum
          }
        } else {
          parmObj = { ...this.query }
        }
        this.tagObj = parmObj
      }
      this.setTableLocalData('bagQueryParams', this.tagObj)
      setTimeout(() => {
        this.tabIndex = index
        this.componentName = item.key
      }, 10);
    },
    async getImg (item) {
      const { luggageNum, carrierFlightsDate } = item
      const datacontent = { filter: { luggageNum, carrierFlightsDate } }
      const parmas = {
        page: 1,
        serviceid: 127,
        datacontent,
        size: 9999,
        event: '0'
      }
      const { code, returnData } = await Query(parmas)
      if (code == 0 && returnData && returnData.length) {
        const urls = []
        this.imgFlag = true
        this.srcUrl = returnData
        const datas = [...returnData]
        datas.forEach(item => {
          if (item.picData.includes('base64')) {
            urls.push(item.picData)
          } else {
            urls.push('data:image/gif;base64,' + item.picData)
          }
        })
        this.srcList = urls
      } else {
        this.$message.warning('暂无照片')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.newBagDetails {
  height: calc(100vh - 90px);
  padding: 12px;
  &-info {
    height: 200px;
    background: #051436;
    color: #fff;
    font-size: 14px;
    &-look {
      padding: 0 32px;
      height: 64px;
      line-height: 64px;
      background: #041741;
      &-name {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
        margin-right: 7px;
        max-width: 101px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
      }
      .el-scrollbar {
        height: 64px;
        ::-webkit-scrollbar {
          height: 0;
        }
        .tags-view-wrapper {
          display: flex;
          .tags-view-item {
            position: relative;
            cursor: pointer;
            height: 64px;
            line-height: 64px;
            // border: 1px solid #767eba;
            // border-radius: 4px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #aaacb2;
            margin-right: 100px;
            &:last-child {
              margin-right: 0;
            }
            &.active {
              color: #fff;
              position: relative;
              &::after {
                position: absolute;
                content: "";
                width: 100%;
                left: 0;
                bottom: 0;
                height: 3px;
                background: #2d67e3;
              }
            }
          }
        }
      }
    }
    &-details {
      position: relative;
      padding: 0 32px;
      height: 136px;
      &-tags {
        height: 32px;
        line-height: 32px;
      }
      &-msgs {
        padding: 12px 0;
        height: 135px;
        ::v-deep .el-scrollbar__wrap {
          overflow-x: hidden;
        }
        ::v-deep .el-scrollbar__bar.is-horizontal {
          height: 0 !important;
        }
        &-l1 {
          .msgs-list {
            margin-bottom: 22px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
  }
  &-contents {
    margin-top: 8px;
    background-color: #fff;
    height: calc(100% - 208px);
    &-tabs {
      line-height: 65px;
      padding: 0 32px;
      border-bottom: 1px solid #dfe3ea;
      &-title {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #303133;
        margin-right: 92px;
      }
      &-btns {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #afb4bf;
        &-bt {
          margin-right: 55px;
          cursor: pointer;
          position: relative;
          &:last-child {
            margin-right: 0;
          }
          &.is-active {
            color: #303133;
            &::after {
              position: absolute;
              content: "";
              width: 100%;
              left: 0;
              bottom: 0;
              height: 3px;
              background: #2d67e3;
            }
          }
        }
      }
    }
    &-page {
      height: calc(100% - 66px);
    }
  }
}
</style>