<template>
  <div class="contant">
    <div class="title">物流信息</div>
    <div class="logisticsLogo">
      <div class="logoAndName">
        <div class="left">
          <img
            class="logo"
            :src="userInfo.logo||noImages"
          />
        </div>
        <div class="right">
          <div class="logisticsName">承运公司：{{userInfo.expName||noMsg}}</div>
          <div class="logisticsTel">官方电话：{{userInfo.expPhone||noMsg}}</div>
        </div>
      </div>
      <div class="bottom">
          <div style="margin-top:10px">发货单号:{{userInfo.courierNumber||noMsg}}</div>
          <div style="margin-top:10px">收件人:{{userInfo.consignee||noMsg}}</div>
          <div style="margin-top:10px">电话号码:{{userInfo.phone||noMsg}}</div>
      </div>
      <!-- <div class="bottom">收件人:{{userInfo.consignee}}</div> -->
      <!-- <div class="bottom">电话号码:{{userInfo.phone}}</div> -->
    </div>
    <div class="logisticsInfo">
      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.time"
        >
          {{ activity.status }}
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="footer">
        <el-button @click="returnList" type='primary' class="returnList">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        reverse: false,
        activities: [{
          status: '等待揽件',
          time: '2018-04-11'
        }],
         orderID:'',
         userInfo:{},  //用户信息
         noMsg:'暂无信息',
         noImages:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605612211722&di=5f948e802d364a1c2ccca868bcbe7b82&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F51%2F05%2F455745757e09bb3.jpg',
      };
    },
    created () {
        // 接受传参
        this.orderID=this.$route.query.orderID;
        this.getInfo();
    },
    mounted () {
    },
    methods: {
        // returnList ==> 返回
        returnList(){
            this.$router.go(-1);
        },
        // 获取初始数据
        getInfo(){
            console.log(this.orderID);
            const params={
                type:'getLogisticsInfo',
                data:{
                    orderID:this.orderID
                }
            };
            this.$http.post(this.$api.getLogisticsInfo,params).then(res=>{
                console.log(res);
                this.userInfo.address=res.address;
                this.userInfo.consignee=res.consignee;
                this.userInfo.courierNumber=res.courierNumber;
                this.userInfo.expName=res.expName;
                this.userInfo.expPhone=res.expPhone;
                this.userInfo.logo=res.logo;
                this.userInfo.phone=res.phone;
                this.activities=res.list;
            })
        },
    }
};
</script>

<style lang='scss' scope>
.contant {
  width: 100%;
  height: 100%;

  .title {
    height: 40px;
    background: #f2f2f2;
    font-size: 20px;
    line-height: 40px;
    border-radius: 8px;
    padding-left: 30px;
  }

  .logisticsLogo {
    // display: flex;
    .logoAndName {
      display: flex;
      margin-left: 40px;
      margin-top: 40px;
      .left {
        .logo {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }
      .right {
        margin-left: 20px;
        margin-top: 5px;
        .logisticsTel {
          margin-top: 10px;
        }
      }
    }
    .bottom {
      margin-top: 20px;
      margin-left: 40px;
    }
  }
  .logisticsInfo{
      margin-top: 40px;
    //   margin-left: 40px;
  }
  .returnList{
      margin-left: 40px;
      border-radius: 8px;
  }
}
</style>