<template>
  <!-- 运单查询 -->
  <!-- 查询单条温湿度数据 -->
  <div class="waybillquiry_home">
    <div class="header">
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
          <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
        </g>
      </svg>
      <div class="card_waybillquiry">
        <el-image style="height: 45px;width: 45px;flex: none;" :src="require('@/assets/logo3.png')"></el-image>
        <div class="head_title">宝智达智配送安全追溯</div>
      </div>
    </div>
    <div class="card_search">
      <div class="card_logistics_tab">
        <div class="title_logist center_in" :class="item.flag ? 'activate_card' :''"
          v-for="(item,index) in logisticsList" :key="index" @click="selective(item)">
          {{item.title}}
        </div>
      </div>
      <div v-if="currentId == 1">
        <humitureSupervision ref="humiture" :waybillNo="waybillNo" :humitureList="humitureList" :probeList="probeList"
          @selectiveRecord="selectiveRecord"></humitureSupervision>
      </div>
      <div v-if="currentId == 2">
        <logisticsTracking :activities="activitiesList"></logisticsTracking>
      </div>
      <div class="track_waybill" v-if="currentId == 3">
        <map-container ref="mapTracing" :trackList="trackList" v-if="waybillBasic.status == 5"></map-container>
        <map-delivery ref="mapTracing1" :trackList="trackList" :waybillBasic="waybillBasic"
          v-if="waybillBasic.status != 5"></map-delivery>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getWaybillNo,
    getWaybill,
    getWaybillTask,
    waybillTaskLocus,
  } from '@/api/waybillLogistics'
  import logisticsTracking from '@/components/logisticsTracking'
  import humitureSupervision from '@/components/humitureSupervision'
  import mobileHumiture from '@/components/mobileHumiture'
  import MapContainer from '@/components/MapContainer'
  import MapDelivery from '@/components/MapDelivery'
  import {
    WaybillStatus
  } from '@/assets/js/blockSort'
  import {
    encryptData,
    decryptData
  } from '@/assets/js/aes.js'
  export default {
    name: 'WaybillInquiry',
    components: {
      logisticsTracking,
      humitureSupervision,
      mobileHumiture,
      MapContainer,
      MapDelivery
    },
    data() {
      return {
        input3: '',
        tabIndex: '0',
        activitiesList: [],
        statusList: WaybillStatus(),
        geoCoder: null,
        waybillNo: null,
        humitureList: [],
        probeList: [],
        trackList: [],
        deviceType: false,
        waybillBasic: {},
        logisticsList: [{
          id: 1,
          flag: true,
          title: '温湿度监控'
        }, {
          id: 2,
          flag: false,
          title: '物流跟踪'
        }, {
          id: 3,
          flag: false,
          title: '轨迹查询'
        }],
        currentId: 1,
      }
    },
    created() {
      document.title = '宝智达智配送安全追溯'

      function isMobile() {
        let userAgentInfo = navigator.userAgent;
        let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
        let getArr = Agents.filter(i => userAgentInfo.includes(i));
        return getArr.length ? true : false;
      }
      this.deviceType = isMobile()
    },
    mounted() {
      const waybillNo = this.$route.query.waybillNo
      //解密方法
      let waybillNum = decryptData(waybillNo)
      this.waybillNo = waybillNum
      this.getList()
      this.getTask()
    },
    methods: {
      resizeChart() {
        window.addEventListener("resize", () => {
          this.myChart.resize();
          this.myChart1.resize();
        });
      },
      getList() {
        getWaybill({
          waybillNo: this.waybillNo,
        }).then((res) => {
          if (res.code == 200) {
            var arrList = []
            if (res.data.list) {
              arrList = res.data.list
            }
            if (arrList.length > 0) {
              arrList.forEach(async (item) => {
                item.content = ''
                let arr = ''
                this.statusList.forEach((item1) => {
                  if (item.status == item1.value) {
                    arr = item1.label
                  }
                });
                let yonTitle = ''
                if (item.coolerBox.id) {
                  yonTitle = item.coolerBox.name
                } else {
                  yonTitle = '运单号' + item.waybillNo
                }
                item.content = item.address + '【' + yonTitle + '】' + '  ' + '您的货物' + arr
              })
              this.activitiesList = arrList.reverse()
              this.activitiesList[this.activitiesList.length - 1].field = 'primary'
            }
            this.$forceUpdate()
          }
        })
      },
      // 获取运单基本信息
      getInformation() {
        getWaybillNo({
          waybillNo: this.waybillNo,
        }).then(res => {
          if (res.code == 200) {
            this.waybillBasic = res.data
          }
        })
      },
      // 轨迹查询
      getTaskLocus() {
        let that = this
        that.trackList = []
        waybillTaskLocus({
          waybillNo: that.waybillNo,
        }).then(res => {
          if (res.code == 200) {
            let arrList = res.data
            if (arrList.length > 0) {
              arrList.forEach(item => {
                if (item.T_site != '0,0' && item.T_site) {
                  const data = item.T_site.split(',')
                  that.trackList.push(data)
                }
              })
            }
            that.$nextTick(() => {
              setTimeout(() => {
                if (that.currentId == 3) {
                  if (that.waybillBasic.status == 5) {
                    that.$refs.mapTracing.keyUpSearch()
                  } else {
                    that.$refs.mapTracing1.keyUpSearch()
                  }
                }
              }, 100)
            })
          }
        })
      },
      // 获取运单列表
      async getTask() {
        getWaybillTask({
          waybillNo: this.waybillNo,
        }).then(res => {
          if (res.code == 200) {
            let arrlist = []
            // console.log(res, 776)
            if (res.data.list) {
              arrlist = res.data.list
            }
            if (arrlist.length > 0) {
              this.probeList = arrlist[0].deviceSensorList
              arrlist.forEach(item => {
                item.flag = false
                if (item.coolerBox.id) {
                  item.title = item.coolerBox.name
                }
              })
              this.humitureList = arrlist
              this.$nextTick(() => {
                if (this.currentId == 1) {
                  this.$refs.humiture.selectType()
                  this.$refs.humiture.inverseData()
                }
              })
            }
          }
        })
      },
      // 选择查看类型列表
      selectiveRecord(value) {
        this.probeList = value.deviceSensorList
        this.$nextTick(() => {
          this.$refs.humiture.inverseData()
        })
      },
      // tab选择
      async selective(event) {
        if (this.currentId != event.id) {
          if (event.id == 1) {
            await this.getTask()
          } else if (event.id == 2) {
            await this.getList()
          } else if (event.id == 3) {
            await this.getInformation()
            await this.getTaskLocus()
          }
        }
        this.logisticsList.forEach(item => {
          if (event.id == item.id) {
            item.flag = true
            this.currentId = event.id
          } else {
            item.flag = false
          }
        })
      },
      reverseGeocode(longitude, latitude) {
        return new Promise((resolve, reject) => {
          var geocoder = new AMap.Geocoder({
            // 需要设置的其他选项...
          });
          // 使用逆地理编码服务
          geocoder.getAddress([longitude, latitude], function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              // 得到地理位置信息
              resolve(result.regeocode.addressComponent.city)
            }
          });
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .header {
    position: relative;
    width: 100%;
    text-align: center;
    background: linear-gradient(60deg, rgba(0, 172, 193, 1) 0%, rgba(84, 58, 183, 1) 100%);
    color: white;
    border-bottom: 1px solid #fff;
  }

  .waves {
    position: relative;
    width: 100%;
    height: 70px;
    margin-bottom: -4px;
  }

  .parallax>use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
  }

  .parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
  }

  .parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
  }

  .parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
  }

  .parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
  }

  @keyframes move-forever {
    0% {
      transform: translate3d(-90px, 0, 0);
    }

    100% {
      transform: translate3d(85px, 0, 0);
    }
  }

  /*Shrinking for mobile*/
  @media (max-width: 768px) {
    .waves {
      height: 40px;
      min-height: 40px;
    }

    .card_waybillquiry {
      height: 40px;
    }

    .content {
      height: 30vh;
    }

    h1 {
      font-size: 24px;
    }
  }

  .waybillquiry_home {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100%;
    background: #fff;
  }

  .waybillquiry_home ::v-deep .el-table tr {
    background-color: #FFF;
  }

  .waybillquiry_home ::v-deep .el-table thead {
    color: #909399;
  }

  .waybillquiry_home ::v-deep .el-table td.el-table__cell,
  .waybillquiry_home ::v-deep .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #EBEEF5;
  }

  .waybillquiry_home ::v-deep .el-table--border::after,
  .waybillquiry_home ::v-deep .el-table--group::after,
  .waybillquiry_home ::v-deep .el-table::before {
    background-color: #EBEEF5;
  }

  .card_waybillquiry {
    position: absolute;
    top: 0;
    left: 30px;
    height: 70px;
    display: flex;
    align-items: center;
  }

  .head_title {
    font-size: 24px;
    font-weight: bold;
    color: rgb(35, 49, 105);
    margin-left: 10px;
  }

  .card_search {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    overflow-y: auto;
  }

  .card_table {
    width: 100%;
  }

  .track_waybill {
    width: 100%;
    height: 100%;
  }

  .mobile_table {
    width: 100%;
  }

  .mobile_table ::v-deep .el-tabs--border-card>.el-tabs__content {
    padding: 0px !important;
  }

  .card_logistics_tab {
    display: flex;
    align-items: center;
    background-color: #F5F7FA;
    border-bottom: 1px solid #E4E7ED;
  }

  .title_logist {
    cursor: pointer;
    padding: 0 20px;
    font-size: 14px;
    height: 40px;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-right-color: #F5F7FA;
    border-left-color: #F5F7FA;
  }

  .title_logist:hover {
    color: #409EFF;
  }

  .activate_card {
    background-color: #fff;
    color: #409EFF;
    border-right-color: #DCDFE6;
    border-left-color: #DCDFE6;
  }

  .card_certain {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #DCDFE6;
  }

  .card_humiture_quiry {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 10px;
    border-right: 1px solid #DCDFE6;
    padding-left: 10px;
    padding-top: 10px;
  }

  .supervision_title {
    font-size: 16px;
  }

  .supervision_title1 {
    font-size: 15px;
  }
</style>
