<template>
  <div class="logistics-path">
    <div id="text">
      <!--详情信息-->
      <div class="detail">
        <van-cell-group>
          <van-cell
            :title="`运单号: ${detailData.waybillNo}`"
            :value="detailData.status"
            :label="`运输方式: ${detailData.transportType}`"
          />
        </van-cell-group>
      </div>
      <!--起止信息-->
      <div class="info">
        <van-cell-group>
          <van-cell
            title="发站信息"
            :value="detailData.fmLocationName"
          />
          <van-cell
            title="到站信息"
            :value="detailData.toLocationName"
          />
        </van-cell-group>
      </div>
      <!--状态-->
      <div class="status">
        <template v-for="(item, index) in detailData.waybillStatusList">
          <van-cell-group :key="index">
            <van-cell
              :title="item.waybillStatus"
              :label="item.statusTime"
            ></van-cell>
          </van-cell-group>
        </template>
      </div>
    </div>
    <!--路径图-->
    <div id="map" :style="{height}" v-if="showMap">
      <PathMap
        :pathList="pathList"
      />
    </div>
  </div>
</template>

<script>
import PathMap from '../../components/PathMap'

export default {
  components: { PathMap },
  created () {
    // 路由获取上页运单详情信息
    this.detailData = this.$route.params.detailData
    document.title = '运单跟踪'
  },
  mounted () {
    // 计算地图高度
    this.calcMapHeight()
  },

  data () {
    return {
      detailData: {}, // 运单详情
      pathList: [
        {
          'waybillNo': 'LOG20190109001',
          'origin': '广东省深圳市福田区文化创意园',
          'destination': '河北省石家庄市第四十五中学',
          'locations': [{ 'lat': '22.5582204548', 'lon': '114.0435791016' }, { 'lat': '23.0291873467', 'lon': '113.7469482422' }, { 'lat': '23.6948347222', 'lon': '113.5272216797' }, { 'lat': '23.8255513069', 'lon': '113.1591796875' }, { 'lat': '25.4035849732', 'lon': '111.8408203125' }, { 'lat': '26.7456103822', 'lon': '112.5219726563' }, { 'lat': '28.2850332946', 'lon': '110.9399414063' }, { 'lat': '29.9358952134', 'lon': '110.9399414063' }, { 'lat': '31.8962144634', 'lon': '110.8300781250' }, { 'lat': '32.6393748736', 'lon': '109.8852539063' }, { 'lat': '33.7608820009', 'lon': '109.0722656250' }, { 'lat': '34.3525066687', 'lon': '108.9459228516' }],
          'vehicles': [
            {
              'vehicleNo': '桂A01111',
              'currentAddress': '陕西省西安市长安区'
            },
            {
              'vehicleNo': '湘A022FF7',
              'currentAddress': '陕西省西安市雁塔区'
            },
            {
              'vehicleNo': '粤A33DS3',
              'currentAddress': '陕西省西安市莲湖区'
            },
            {
              'vehicleNo': '赣C44IO4',
              'currentAddress': '陕西省西安市碑林区'
            },
            {
              'vehicleNo': '陕B59JL5',
              'currentAddress': '陕西省西安市渭水区'
            },
            {
              'vehicleNo': '粤A6L3P3',
              'currentAddress': '陕西省西安市长安区'
            },
          ]
        }
      ],
      height: '', // 地图容器高
      showMap: false, // 显示地图
    }
  },
  methods: {
    // 计算地图高度
    calcMapHeight () {
      const textEl = document.querySelector('#text')
      const textHeight = textEl.offsetHeight
      console.log(textHeight)
      this.height = `calc(100vh - ${textHeight}px - 0.5rem)`
      this.showMap = true
    },
  },
}
</script>

<style lang="scss" scoped>
.logistics-path {
  background: #eee;
  #text {
    max-height: calc(50vh - 0.5rem);
    overflow: hidden auto;

    > div:not(:last-child) {
      margin-bottom: 0.5rem;
    }
    .detail {
      /deep/
      .van-cell__title {
        flex: 2.5
      }
    }
    .info {
      /deep/
      .van-cell__value {
        flex: 2.5
      }
    }
  }
  #map {
    width: 100%;
    min-height: 50vh;
    margin-top: 0.5rem;
  }
}
</style>
