<template>
  <!-- 运单查询 -->
  <div class="waybillquiry_home">
    <div class="waybillquiry_head">
      <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="!deviceType ? 'card_table' : 'mobile_table'">
        <el-tabs type="border-card" v-model="tabIndex" @tab-click="tabChange">
          <el-tab-pane label="基本信息">
            <waybillInformation ref="information" :list="waybillBasic" @getReceiving="getReceiving"
              @getSubmit="getSubmit">
            </waybillInformation>
          </el-tab-pane>
          <el-tab-pane label="温湿度监控">
            <div v-if="humitureList.length > 0">
              <div class="card_certain" v-for="(item,index) in humitureList">
                <div class="card_humiture_quiry">
                  <span class="supervision_title" style="font-weight: 600;">【{{item.title}}】</span>
                  <span class="supervision_title1">{{item.startTime}}</span>
                  <span class="supervision_title1">{{item.endTime}}</span>
                </div>
                <mobileHumiture ref="movement" :taskId="item.id" :waybillNo="waybillNo"
                  :probeList="item.deviceSensorList">
                </mobileHumiture>
              </div>
            </div>
            <el-empty description="暂无数据" v-else></el-empty>
          </el-tab-pane>
          <el-tab-pane label="轨迹查询">
            <div class="track_waybill">
              <map-container ref="mapTracing" :trackList="trackList"
                v-if="tabIndex == '2' && waybillBasic.status == 3"></map-container>
              <map-delivery ref="mapTracing1" :trackList="trackList" :waybillBasic="waybillBasic"
                v-if="tabIndex == '2' && waybillBasic.status != 3"></map-delivery>
              <div class="card_logistics">
                <div @click="clickImg">
                  <el-image :class="logisticsFlag ? '' : 'overturn'" style="height: 29px;width: 40px;flex: none;"
                    :src="require('@/assets/images/unfold.png')"></el-image>
                </div>
                <div v-if="logisticsFlag">
                  <div class="logistics_title">物流详情</div>
                  <logisticsTracking :activities="activitiesList"></logisticsTracking>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getReceipt
  } from '@/api/waybill'
  import {
    getWaybill,
    getWaybillTask,
    waybillTaskLocus,
    getWaybillNo
  } 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 waybillInformation from '@/components/waybillInformation'
  import {
    WaybillStatus
  } from '@/assets/js/blockSort'
  import {
    encryptData,
    decryptData
  } from '@/assets/js/aes.js'
  export default {
    name: 'WaybillInquiry',
    components: {
      logisticsTracking,
      humitureSupervision,
      mobileHumiture,
      MapContainer,
      MapDelivery,
      waybillInformation
    },
    data() {
      return {
        input3: '',
        tabIndex: '0',
        activitiesList: [],
        statusList: WaybillStatus(),
        geoCoder: null,
        waybillNo: null,
        humitureList: [],
        probeList: [],
        trackList: [],
        deviceType: false,
        waybillBasic: {},
        logisticsFlag: true,
      }
    },
    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.getInformation()
    },
    methods: {
      getSearch() {
        if (this.tabIndex == 0 || this.tabIndex == '0') {
          this.getInformation()
        } else if (this.tabIndex == 1 || this.tabIndex == '1') {
          this.getTask()
        } else if (this.tabIndex == 2 || this.tabIndex == '2') {
          this.getList()
          this.getTaskLocus()
        }
      },
      // 获取运单基本信息
      getInformation() {
        getWaybillNo({
          waybillNo: this.waybillNo,
        }).then(res => {
          if (res.code == 200) {
            this.waybillBasic = res.data
          }
        })
      },
      // 获取物流详情
      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
                }
                item.content = item.address + '【' + yonTitle + '】' + '  ' + '您的货物' + arr
              })
              this.activitiesList = arrList.reverse()
              this.activitiesList[this.activitiesList.length - 1].field = 'primary'
            }
            this.$forceUpdate()
          }
        })
      },
      // 轨迹查询
      getTaskLocus() {
        this.trackList = []
        waybillTaskLocus({
          waybillNo: this.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(',')
                  this.trackList.push(data)
                }
              })
            }
            this.$nextTick(() => {
              setTimeout(() => {
                if (this.waybillBasic.status == 3) {
                  this.$refs.mapTracing.keyUpSearch()
                } else {
                  this.$refs.mapTracing1.keyUpSearch()
                }
              }, 100)
            })
          }
        })
      },
      // 获取温湿度列表
      async getTask() {
        getWaybillTask({
          waybillNo: this.waybillNo,
        }).then(res => {
          if (res.code == 200) {
            let arrlist = []
            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.deviceType) {
                  // this.$refs.humiture.selectType()
                  // this.$refs.humiture.inverseData()
                } else if (this.tabIndex == 1 || this.tabIndex == '1' && this.deviceType) {
                  this.humitureList.forEach((item1, index) => {
                    this.$refs.movement[index].getHumitureList()
                  })
                }
              })
            }
          }
        })
      },
      // 签收
      getReceiving(value) {
        let params = {
          waybillNo: this.waybillBasic.waybillNo,
          status: 3,
          receiptImg: value,
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        getReceipt(params).then(res => {
          if (res.code == 200) {
            this.$refs.information.isModalVisibleil = false
            this.getInformation()
            this.$message({
              message: res.msg,
              type: 'success'
            });
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
      // 拒收
      getSubmit(value) {
        let params = {
          waybillNo: this.waybillBasic.waybillNo,
          status: 4,
          receiptImg: value.images,
          rejectionReason: value.reason,
        }
        setTimeout(() => {
          this.$nextTick(() => {
            document.querySelector(".el-loading-mask").style.zIndex = "999999";
          });
        });
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        getReceipt(params).then(res => {
          if (res.code == 200) {
            this.$refs.information.isModalVisible = false
            this.getInformation()
            this.$message({
              message: res.msg,
              type: 'warning'
            });
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
      // 选择查看类型列表
      selectiveRecord(value) {
        this.probeList = value.deviceSensorList
        this.$nextTick(() => {
          this.$refs.humiture.inverseData()
        })
      },
      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)
            }
          });
        })
      },
      tabChange(value) {
        this.getSearch()
      },
      clickImg() {
        if (this.logisticsFlag) {
          this.logisticsFlag = false
        } else {
          this.logisticsFlag = true
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .waybillquiry_home {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .waybillquiry_head {
    width: 95%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .card_waybillquiry {
    margin: 15px;
    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: 95%;
    margin-bottom: 30px;
  }

  .Waybill_inquiry {
    margin-left: 6.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
  }

  .title_inquiry {
    flex: none;
    font-size: 18px;
    font-weight: 500;
    margin-right: 10px;
  }

  .input_card_waybill {
    width: 500px;
  }

  .card_table {
    width: 100%;
  }

  .track_waybill {
    width: 100%;
    height: 80vh !important;
    position: relative;
  }

  .card_logistics {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    background-color: #fff;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .logistics_title {
    font-size: 17px;
    text-align: left;
    padding: 0px 20px 0px 20px;
  }

  .card_certain {
    padding-bottom: 10px;
  }

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

  .supervision_title {
    font-size: 16px;
  }

  .supervision_title1 {
    font-size: 15px;
  }

  .mobile_table {
    width: 100%;
  }

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

  .overturn {
    transform: rotate(180deg);
  }
</style>
