<template>
  <div class="logistics-content">
    <van-empty
      description="暂无数据"
      v-if="
        !(
          (mapPointList && mapPointList.length > 0) ||
          (shippingInfo && shippingInfo.shippingNo) ||
          (stepList && stepList.length > 0) ||
          (orderInfo.isCold && coldInfo && coldInfo.length > 0)
        ) && !shoppingLoading
      "
    />
    <!--  高德地图  -->
    <div
      style="position:relative;height:300px"
      v-if="gpsLoading || (mapPointList && mapPointList.length > 0)"
    >
      <a-map-view
        :transport="sendType"
        :point-list="mapPointList"
        :drive-point="driveLine"
        v-if="!gpsLoading && mapPointList && mapPointList.length > 0"
      />
      <div class="map-loading" v-if="gpsLoading">
        {{ mapDataLoadingText }}
      </div>
    </div>
    <!--  物流主信息  -->
    <div class="logistics-header">
      <van-skeleton
        avatar
        :row="3"
        :loading="shoppingLoading"
        style="background-color:#fff;padding-top:10px;padding-bottom:10px"
      >
        <div
          class="header-title"
          v-if="shippingInfo && shippingInfo.shippingNo"
        >
          <van-icon class="logistic-logo" :name="icons.logo" />
          <span class="logistic-header-layout">
            <div class="header-order-info main-info">
              <span class="logistic-name">承运商:</span>
              <span class="logistic-values">{{ shippingInfo.carrier }}</span>
            </div>
            <div class="header-order-info" style="margin-top: 8px">
              <span class="logistic-name">运单号:</span>
              <span class="logistic-values">{{ shippingInfo.shippingNo }}</span>
            </div>
            <div
              class="header-order-info"
              style="margin-top: 2px;"
              v-if="shippingInfo.deliveryMan"
            >
              <span class="logistic-name">配送人:</span>
              <span class="logistic-values" style="display:flex;">
                <span style="flex:1"
                  >{{ shippingInfo.deliveryMan }}
                  {{ shippingInfo.deliveryManPhone }}</span
                >
                <img
                  class="logistic-func-icon"
                  :src="icons.call"
                  @click="callDriver(shippingInfo.deliveryManPhone)"
                />
              </span>
            </div>
            <div
              class="header-order-info"
              style="margin-top:2px;margin-bottom:8px"
              v-if="
                shippingInfo.estimatedArrivalTime &&
                  stepInfo &&
                  stepInfo.currentOrderStatusCode < 400
              "
            >
              <span class="logistic-name">预计到达时间:</span>
              <span class="logistic-values">{{
                shippingInfo.estimatedArrivalTime
              }}</span>
            </div>
          </span>
          <span class="logistic-type">{{
            shippingInfo.roadType === 'D' ? '市内' : '市外'
          }}</span>
        </div>
      </van-skeleton>
    </div>

    <!--  物流追踪信息  -->
    <div
      id="stepLine"
      :class="
        stepList.length > 2 ? 'logistics-step-line' : 'logistics-step-line_show'
      "
      v-if="stepList && stepList.length > 0"
    >
      <logistics-step>
        <step-item
          v-for="(item, index) in stepList"
          :stepInfo="item"
          :key="index"
        />
      </logistics-step>
      <div class="show-more" @click="showStepLine">
        点击查看更多物流详情
        <van-icon name="arrow-down" />
      </div>
    </div>
    <!--  冷链温度趋势  -->
    <van-tabs
      v-if="orderInfo.isCold && coldInfo && coldInfo.length > 0"
      v-model="temperatureActive"
      title-active-color="#1989FA"
      class="tabs"
    >
      <van-tab
        :title="item.deviceNumber"
        v-for="(item, index) in coldInfo"
        :key="index"
      >
        <echarts-view
          :line-array="item.temperatureInfoList"
          :car-no="item.deviceNumber"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {
  getShippingInfo,
  getTrackInfo,
  getGpsMapPoint,
  getColdTemperatureList
} from '@/api/myOrder'
import MapView from '../../../components/MapView'
import LogisticsStep from '../components/logisticsStep'
import StepItem from '../components/stepItem'
import AMapView from '../../../components/AMapView'
import EchartsView from '../../../components/EchartsView'
import { bridge } from '../../../utils'

export default {
  name: 'logisticsDetail',
  components: { EchartsView, AMapView, StepItem, LogisticsStep, MapView },
  data() {
    return {
      orderInfo: this.$route.query,
      temperatureActive: 0,
      shoppingLoading: true,
      gpsLoading: false,
      mapDataLoadingText: '地图数据加载中...',
      icons: {
        logo: require('@/assets/img/u48.png'),
        call: require('@/assets/img/ic_call.png')
      },
      shippingInfo: {},
      mapPointList: [],
      sendType: false,
      driveLine: {
        startPoint: {
          address: '',
          longitude: 0,
          latitude: 0
        },
        endPoint: {
          address: '',
          longitude: 0,
          latitude: 0
        }
      },
      stepInfo: {},
      stepList: [],
      coldInfo: []
    }
  },
  mounted() {
    // 设置标题栏关闭返回按钮
    this.$store.commit('setNavBar', {
      show: true,
      leftArrow: true,
      rightIcon: false,
      title: '物流详情',
      leftText: '',
      leftClick: this.onBrowserBack,
      rightClick: function() {}
    })
    window.addEventListener('popstate', this.onBrowserBack, false)
    // 获取运单信息
    this.getShippingData()
    // 获取物流追踪信息
    this.getTrackInfoDetail()
    // 获取冷链信息
    if (this.orderInfo.isCold) {
      this.getTemperatureData()
    }
  },
  destroyed() {
    // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
    window.removeEventListener('popstate', this.onBrowserBack, false)
  },
  methods: {
    /* 返回 */
    onBrowserBack() {
      this.$router.go(-1)
    },
    /* 拨打配送员电话 */
    callDriver(str) {
      bridge.callPhone(str)
    },
    /* 全部显示物流追踪详情 */
    showStepLine() {
      let stepEle = document.getElementById('stepLine')
      stepEle.className = 'logistics-step-line_show'
    },
    /* 获取运单信息 */
    getShippingData() {
      console.log(this.orderInfo)
      let data = {
        orderId: '',
        orderNo: this.orderInfo.orderNo, // '879202103190016',
        orderType: this.orderInfo.orderType, // 'SALE',
        sourceDb: this.orderInfo.sourceDb, // 'SHYY',
        pageSize: 10,
        pageNum: 1,
        sort: '',
        order: ''
      }
      getShippingInfo(data)
        .then(rt => {
          if (
            rt.code === 200 &&
            rt.data &&
            rt.data.code === '00000' &&
            rt.data.entity &&
            rt.data.entity.shippingList &&
            rt.data.entity.shippingList.length > 0
          ) {
            console.log(rt)
            this.shippingInfo = rt.data.entity.shippingList[0]
            // 定义驾驶规划参数
            this.driveLine.startPoint.address = this.shippingInfo.pickingLocationDesc
            this.driveLine.startPoint.longitude = parseFloat(
              this.shippingInfo.pickLongitude
            )
            this.driveLine.startPoint.latitude = parseFloat(
              this.shippingInfo.pickLatitude
            )
            this.driveLine.endPoint.address = this.shippingInfo.clientAddress
            this.driveLine.endPoint.longitude = parseFloat(
              this.shippingInfo.longitude
            )
            this.driveLine.endPoint.latitude = parseFloat(
              this.shippingInfo.latitude
            )

            // if (this.orderInfo.orderStatusCode > 300) {
            //   this.sendType = this.orderInfo.orderStatusCode === '310'
            //   this.getGpsPoint()
            // }
            console.log(this.orderInfo.orderStatusCode)
            if (this.orderInfo.orderStatusCode === '220' || this.orderInfo.orderStatusCode === '310' || this.orderInfo.orderStatusCode === '400') {
              // this.sendType = this.orderInfo.orderStatusCode === '310'
              if (this.orderInfo.orderStatusCode !== '400') {
                // console.log("2222222")
                this.sendType = true
              } else {
                // console.log("11111111")
                this.sendType = false
              }
              this.getGpsPoint()
            }
          } else {
            if (rt.code === 500) {
              this.$toast(rt.msg)
            }
          }
          this.shoppingLoading = false
        })
        .catch(err => {
          console.log('运单信息', err)
          this.$toast('运单信息获取失败')
        })
    },
    /* 物流追踪 */
    getTrackInfoDetail() {
      let data = {
        sourceDb: this.orderInfo.sourceDb,
        supplierId: [this.orderInfo.supplierId],
        clientID: [this.orderInfo.clientId],
        orderId: '',
        orderNo: this.orderInfo.orderNo,
        orderType: this.orderInfo.orderType,
        supplierCode: [this.orderInfo.supplierCode],
        clientCode: [this.orderInfo.clientCode]
      }
      getTrackInfo(data)
        .then(res => {
          if (
            res.code === 200 &&
            res.data &&
            res.data.code === '00000' &&
            res.data.entity &&
            res.data.entity.logisticsTrackingInfoList
          ) {
            this.stepInfo = res.data.entity.logisticsTrackingInfoList
            let tempStep = []
            this.stepInfo.orderStatusInfoVoList.forEach((item, index) => {
              tempStep.push({
                date: item.opDate.split(' ')[0],
                time: item.opDate.split(' ')[1],
                type: item.orderStatus,
                typeCode: item.orderStatusCode,
                text: item.statusMsg,
                showLine:
                  index !== this.stepInfo.orderStatusInfoVoList.length - 1
              })
            })
            this.stepList = tempStep
          } else {
            if (res.code === 500) {
              this.$toast(res.msg)
            }
          }
        })
        .catch(err => {
          console.log('物流跟踪', err)
          this.$toast('物流跟踪信息获取失败')
        })
    },
    /* GPS 定位信息 */
    getGpsPoint() {
      this.gpsLoading = true
      let data = {
        orderType: this.orderInfo.orderType, // 'SALE',
        shippingNo: this.shippingInfo.shippingNo, // '3S1255202103190010',
        sourceDb: this.orderInfo.sourceDb, // 'SHYY',
        gisTime: this.shippingInfo.actualArrivalTime,
        orderNo: this.orderInfo.orderNo // '879202103190016'
      }
      // let data = {
      //   'orderType': 'SALE', // 'SALE',
      //   'shippingNo': '543533082508945661', // '3S1255202103190010',
      //   'sourceDb': 'SHYY', // 'SHYY',
      //   'gisTime': '',
      //   'orderNo': '543533035211583431' // '879202103190016'
      // }
      getGpsMapPoint(data)
        .then(res => {
          if (
            res.code === 200 &&
            res.data.code === '00000' &&
            res.data.entity &&
            res.data.entity.gisMapInfoList
          ) {
            this.mapPointList = res.data.entity.gisMapInfoList
            // this.sendType = true
          } else {
            if (res.code === 500) {
              this.$toast(res.msg)
              this.mapDataLoadingText = res.msg
            }
            this.mapDataLoadingText = '定位数据请求失败或无数据'
          }
          this.gpsLoading = false
        })
        .catch(err => {
          console.log('GPS信息', err)
          this.mapDataLoadingText = '定位数据请求失败'
          this.$toast('定位数据请求失败')
          this.gpsLoading = false
        })
    },
    /* 获取温度变化趋势数据 */
    getTemperatureData() {
      let data = {
        order: 'desc',
        orderId: '',
        orderNo: this.orderInfo.orderNo, // '301202103261165',
        orderType: this.orderInfo.orderType, // 'SALE',
        pageNum: 1,
        pageSize: 1000,
        sort: 'COLLECTDATE',
        sourceDb: this.orderInfo.sourceDb // 'SHYY'
      }
      getColdTemperatureList(data).then(res => {
        if (
          res.code === 200 &&
          res.data.code === '00000' &&
          res.data.entity &&
          res.data.entity.temperatureRecordList &&
          res.data.entity.temperatureRecordList.length > 0
        ) {
          this.coldInfo = res.data.entity.temperatureRecordList
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.logistics-content {
  background-color: #f2f3f5;
  height: calc(100vh - 46px);
  overflow: scroll;

  .map-loading {
    height: 100px;
    width: 100px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    line-height: 100px;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  .logistics-header {
    background-color: #fff;
    border-bottom: 1px solid $line;
    padding-top: 10px;
    .header-title {
      padding: 10px;
      display: flex;

      .logistic-logo {
        font-size: 22px;
        margin-right: 6px;
      }

      .logistic-header-layout {
        flex: 1;
        margin-top: 3px;

        .main-info {
          font-size: 13px;
          font-weight: bold;
        }
      }

      .logistic-type {
        border: 1px solid $orderCold;
        color: $orderCold;
        padding: 0 8px;
        transform: scale(0.8);
        height: 100%;
        margin-top: 3px;
        background-color: #02a7f014;
        border-radius: 2px;
      }
    }

    .header-order-info {
      font-size: 13px;
      //margin-left: 28px;
      display: flex;
    }

    .logistic-name {
      flex: 4;
    }

    .logistic-values {
      //margin-left: 10px;
      flex: 8;
    }

    .logistic-func-icon {
      margin-top: -3px;
      margin-right: -24px;
      width: 20px;
      height: 20px;
      border: 0.5px solid $orderCold;
      border-radius: 10px;
    }
  }

  .logistics-step-line {
    height: 150px;
    overflow: hidden;
    position: relative;
    background-color: #fff;
    padding: 1px;

    .show-more {
      display: block;
      position: absolute;
      bottom: 0;
      height: 30px;
      width: 100%;
      text-align: center;
      background: #fff;
      z-index: 999;
      line-height: 30px;
    }
  }

  .logistics-step-line_show {
    background-color: #fff;
    padding: 1px 1px 10px 1px;

    .show-more {
      display: none;
    }
  }
}

.tabs {
  margin-top: 16px;
  padding-bottom: 5px;
  background-color: #fff;

  /deep/ .van-tab {
    max-width: 25%;
  }

  /deep/ .van-tabs__wrap {
    border-bottom: 1px solid #eeeeee;
  }

  /deep/ .van-tabs__line {
    width: 23px;
    border-radius: 5px !important;
  }
}
</style>
