<template>
  <div class="logistics-detail">
    <!--搜索区-->
    <div class="search">
      <van-search
        v-model="searchKey"
        show-action
        placeholder="请输入物流订单号"
        background="#fff"
        @search="onSearch"
      >
        <div slot="action" @click="onSearch">查询</div>
      </van-search>
    </div>
    <template v-if="detailData.logisticsOrderNo">
      <!--详情信息区-->
      <div class="detail">
        <van-cell-group>
          <van-cell
            :title="`物流订单号: ${detailData.logisticsOrderNo}`"
            :label="`运输方式: ${detailData.transportType}`"
          >
            <template>
              <div>{{detailData.status}}</div>
              <div>
                <van-button size="small" @click="toOrderPath">实时路径</van-button>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <!--起终点信息-->
      <div class="address">
        <van-cell-group>
          <div class="address__title">发货信息</div>
          <van-cell
            :value="detailData.shipperTel"
          >
            <template slot="title">
              <div>{{detailData.shipperName}}</div>
              <div class="van-cell__label">{{detailData.shipperAddr}}</div>
            </template>
          </van-cell>
          <div class="address__title">收货信息</div>
          <van-cell
            :value="detailData.consigneeTel"
          >
            <template slot="title">
              <div>{{detailData.consigneeName}}</div>
              <div class="van-cell__label">{{detailData.consigneeAddr}}</div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <!--运单列表-->
      <div class="list">
        <div class="list__text">
          <span>运单信息</span>
        </div>
        <template v-for="item in detailData.waybills">
          <van-cell-group :key="item.waybillNo">
            <van-cell
              :title="`运单号: ${item.waybillNo}`"
              :value="item.waybillStatus"
              is-link
              @click="clickWaybill(item)"
            ></van-cell>
          </van-cell-group>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  created () {
    this.taskId = this.$utils.url.getQueryString('orderNo')
    document.title = '物流详情'
  },
  mounted () {
  },

  data () {
    return {
      searchKey: '', // 查询单号
      detailData: {}, // 物流详情信息
    }
  },
  methods: {
    onSearch () {
      this.getLogisticsOrder()
    },
    // 获取物流订单信息
    getLogisticsOrder () {
      const url = this.$API.businessPages.logisticsInfo.getLogisticsOrder
      const param = {
        logisticsOrderNo: this.searchKey,
      }
      // this.$https.post(url, param)
      //   .then(data => {
      //     if (data.succeed) {
      //       this.detailData = data.data
      //     } else {
      //       this.$toast(data.errorMsg)
      //     }
      //   })
      if (this.searchKey === 'LO201901090001') {
        this.detailData = {
          'logisticsOrderNo': 'LO201901090001',
          'transportType': '公路运输',
          'status': '执行中',
          'shipperName': '张三',
          'shipperTel': '13000000000',
          'shipperAddr': '广东省深圳市福田区文化创意园A座',
          'consigneeName': '李四',
          'consigneeTel': '13112345678',
          'consigneeAddr': '河北省石家庄市第四十五中学三年二班',
          'waybills': [
            {
              'waybillNo': 'SH201901090001001',
              'waybillStatus': '已提货',
            },
            {
              'waybillNo': 'SH201901090001002',
              'waybillStatus': '运输中',
            },
            {
              'waybillNo': 'SH201901090001003',
              'waybillStatus': '待发车',
            },
            {
              'waybillNo': 'SH201901090001004',
              'waybillStatus': '未装车',
            },
          ]
        }
      } else { this.detailData = {} }
    },
    // 前往订单路径地图
    toOrderPath () {
      this.$router.push({
        name: 'orderPath',
        params: {
          type: 'LOGISTICS',
          orderNo: this.detailData.logisticsOrderNo
        }
      })
    },
    // 点击运单行
    clickWaybill (obj) {
      // step1: 获取运单详情
      const url = this.$API.businessPages.logisticsInfo.getLogisticsDetail
      const param = {
        waybillNo: obj.waybillNo
      }
      // this.$https.post(url, param)
      //   .then(data => {
      //     if (data.succeed) {
      //       // step2: 跳转至运单详情页面
      //       this.$router.push({
      //         name: 'logisticsPath',
      //         params: {
      //           detailData: data.data
      //         }
      //       })
      //     } else {
      //       this.$toast(data.errorMsg)
      //     }
      //   })
      this.$router.push({
        name: 'logisticsPath',
        params: {
          detailData: {
            'waybillNo': 'SH201801090001002',
            'transportType': '公路运输',
            'status': '已提货',
            'fmLocationName': '深圳中农网有限公司',
            'toLocationName': '石家庄第四十五中学采购部',
            'waybillStatusList': [
              {
                'waybillStatus': '签收确认 (由 "李四" 签收)',
                'statusTime': '2019-01-09 16:48:23'
              },
              {
                'waybillStatus': '抵达石家庄集散中心',
                'statusTime': '2019-01-09 14:24:05'
              },
              {
                'waybillStatus': '经由西安中转站',
                'statusTime': '2019-01-09 09:38:50'
              },
              {
                'waybillStatus': '已发货',
                'statusTime': '2019-01-08 20:22:39'
              },
            ],
          }
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
  .logistics-detail {
    background: #eee;
    > div {
      margin-bottom: 0.5rem;
    }
    .list {
      &__text {
        position: relative;
        margin-bottom: 0.5rem;
        color: #969799;
        font-size: 0.8rem;
        text-align: center;

        > span {
          position: relative;
          padding: 0 0.5rem;
          background: #eee;
        }

        /*文字两边的线条*/
        &::before {
          content: ' ';
          position: absolute;
          pointer-events: none;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
          border-top: 1px solid #969799;
          top: 20%;
          left: -50%;
          right: -50%;
          bottom: -50%;
          z-index: 0;
          margin: 0 1rem;
        }
      }
    }
    .address {
      &__title {
        padding: 10px 15px 0;
        font-size: 0.8rem;
      }
    }
  }
  /deep/
  .van-cell {
    &__title {
      flex: 2.5;
    }
  }
</style>
