<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 class="Waybill_inquiry">
        <span class="title_inquiry">运单查询:</span>
        <div class="input_card_waybill">
          <el-input placeholder="请输入内容" v-model="waybillNo" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="getSearch">查询</el-button>
          </el-input>
        </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="物流跟踪">
            <logisticsTracking :activities="activitiesList"></logisticsTracking>
          </el-tab-pane>
          <el-tab-pane label="温湿度监控">
            <div v-if="!deviceType">
              <humitureSupervision ref="humiture" :waybillNo="waybillNo" :humitureList="humitureList"
                :probeList="probeList" @selectiveRecord="selectiveRecord"></humitureSupervision>
            </div>
            <div v-else>
              <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-tab-pane>
          <el-tab-pane label="轨迹查询">
            <div class="track_waybill">
              <map-container ref="mapTracing" :trackList="trackList"></map-container>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    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'
  export default {
    name: 'WaybillInquiry',
    components: {
      logisticsTracking,
      humitureSupervision,
      mobileHumiture,
      MapContainer
    },
    data() {
      return {
        input3: '',
        tabIndex: '0',
        activitiesList: [],
        statusList: [{
          id: 1,
          title: '待派单',
        }, {
          id: 2,
          title: '待装车',
        }, {
          id: 3,
          title: '待入库',
        }, {
          id: 4,
          title: '已装车',
        }, {
          id: 5,
          title: '已入库',
        }, {
          id: 6,
          title: '已下车',
        }, {
          id: 7,
          title: '已出库',
        }, {
          id: 8,
          title: '已签收',
        }],
        geoCoder: null,
        waybillNo: null,
        humitureList: [],
        probeList: [],
        trackList: [],
        deviceType: false,
      }
    },
    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
      this.waybillNo = waybillNo
      this.getList()
      this.getTask()
      this.$nextTick(() => {
        setTimeout(() => {
          // AMap.service(["AMap.Geocoder"], function() {});
          this.getTaskLocus()
        })
      })
    },
    methods: {
      getSearch() {
        if (this.tabIndex == 0 || this.tabIndex == '0') {
          this.getList()
        } else if (this.tabIndex == 1 || this.tabIndex == '1') {
          this.getTask()
        } else if (this.tabIndex == 2 || this.tabIndex == '2') {
          this.getTaskLocus()
        }
        // console.log(this.waybillNo, this.tabIndex, 557)
      },
      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.filter((i) => {
                  return item.status == i.id;
                });
                let yonTitle = ''
                if (item.car.id) {
                  yonTitle = item.car.carNo
                } else if (item.warehouse.id) {
                  yonTitle = item.warehouse.name
                }
                item.content = item.address + '【' + yonTitle + '】' + '您的货物' + arr[0].title
                // await setTimeout(() => {
                //   this.reverseGeocode(item.lng, item.lat).then(res => {
                //     const trapeze = res
                //     item.content = trapeze + item.content
                //   })
                // }, 1000)
              })
              this.activitiesList = arrList
              this.activitiesList[0].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 => {
                const data = item.T_site.split(',')
                this.trackList.push(data)
              })
            }
            this.$nextTick(() => {
              this.$refs.mapTracing.keyUpSearch()
            })
          }
        })
      },
      // 获取运单列表
      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.car.id) {
                  item.title = item.car.carNo
                } else if (item.warehouse.id) {
                  item.title = item.warehouse.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()
                  })
                }
              })
            }
          }
        })
      },
      // 选择查看类型列表
      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()
      }
    }
  }
</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: 75vh;
  }

  .card_certain {
    padding-bottom: 10px;
    border-bottom: 5px solid #F2F6FC;
  }

  .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;
  }
</style>
