<template>
  <view class="express">
    <view class="status-box">
      <view class="item">
        <view class="name">快递公司：</view>
        <view class="val">{{ express }}</view>
      </view>
      <view class="item">
        <view class="name">运单号：</view>
        <view class="val">{{ express_no }}</view>
      </view>
      <!-- <view class="item">
        <view class="name">运送状态：</view>
        <view class="val" :style="{ color: mainColor }">{{
          d.status_text
        }}</view>
      </view> -->
    </view>

    <view
      style="
        margin-top: 40rpx;
        background: #fff;
        padding: 40rpx;
        border-radius: 20rpx;
      "
    >
      <u-time-line>
        <u-time-line-item nodeTop="2">
          <template v-slot:node>
            <view
              class="u-node meudim"
              :style="{ background: mainColor, color: '#FFF' }"
              >收</view
            >
          </template>
          <template v-slot:content>
            <view>
              <view
                class="u-order-desc"
                style="
                  padding-bottom: 60rpx;
                  margin-top: 5rpx;
                  font-size: 26rpx;
                "
                >收货地址：{{address}}</view
              >
            </view>
          </template>
        </u-time-line-item>
      <!--  <u-time-line-item nodeTop="2" v-if="d.status == 3">
          <template v-slot:node>
            <view class="u-node" :style="{ background: mainColor }">
              <u-icon name="success" color="#fff" :size="32"></u-icon>
            </view>
          </template>
          <template v-slot:content>
            <view style="padding-bottom: 30rpx;color:#000 !important;">
              <view class="u-order-title">已签收</view>
              <view class="u-order-desc">{{ last.desc }}</view>
              <view class="u-order-time">{{ last.datetime }}</view>
            </view>
          </template>
        </u-time-line-item> -->
        <u-time-line-item v-for="(x, i) in d" :key="i">
          <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
          <template v-slot:content>
            <view style="padding-bottom: 30rpx;" :style="{color:(i==0)?'#000 !important':'gray'}">
              <view class="u-order-desc">{{ x.AcceptStation!=null? x.AcceptStation:'' }}</view>
			  <view class="u-order-desc">{{ x.Remark !=null? x.Remark:''}}</view>
              <view class="u-order-time">{{ x.AcceptTime !=null? x.AcceptTime:''}}</view>
			  
            </view>
          </template>
        </u-time-line-item>
      </u-time-line>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mainColor: "",
      d: [],
      loading: false,
      last: {},
	  express:'',
	  express_no:'',
	  address:'',
    };
  },
  onLoad(option) {
    uni.setNavigationBarTitle({
      title: "物流信息",
    });
    this.mainColor = this.$uiConfig.mainColor;
	
    this.express = option.express || "圆通速递";
    this.express_no = option.no || "YT2042624009816";
    this.address = option.address || "四川成都市高新西区万景峰二期";
	this.id = option.id || 0;
    this.init(this.id,this.express_no);
  },
  methods: {
    init(id,express_no) {
      // let h = this.apiheader();
      // this.request(
      //   {
      //     url: "",
      //     header: h,
      //     data: {
      //       r: "api/order/express-detail",
      //       express: this.express,
      //       express_no: this.express_no,
      //       customer_name: "",
      //     },
      //   },
      //   (res) => {
      //     this.loading = false;
      //     this.d = res.data.express;
      //     this.d.list = this.d.list.reverse();
      //     if (this.d.status == 3) {
      //       this.last = this.d.list[0];
      //       this.d.list.splice(0, 1);
      //     }
      //   }
      // );
	  this.request2(
	    {
	      url: "/api/AppletOrder/GetOrderExpressInfo",
	      data: {
	        ExpressId: id,
			ExpressNumber: express_no,
	      },
	    },
	    (res) => {
	  	  
	      this.d = res.data;
	    }
	  );
    },
  },
};
</script>

<style>
.express {
  min-height: 100vh;
  background: #f5f5f5;
  font-family: "aaa";
}
.express .status-box {
  background: #fff;
  padding: 60rpx 40rpx;
  padding-bottom: 0;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
}
.express .status-box .item {
  display: flex;
  align-items: center;
  padding-bottom: 40rpx;
}
.express .status-box .item .name {
  font-size: 24rpx;
  color: #888;
  width: 120rpx;
  margin-right: 40rpx;
}
.express .status-box .item .val {
  font-family: "aaa";
  font-size: 28rpx;
  color: #000;
  font-weight: 600;
  width: 1rpx;
  flex: 1;
}
.u-node {
  width: 44rpx;
  height: 44rpx;
  border-radius: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d0d0d0;
}
.u-node.meudim {
  width: 40rpx;
  height: 40rpx;
  font-size: 24rpx;
}

.u-order-title {
  color: #333333;
  font-weight: bold;
  font-size: 32rpx;
  margin-bottom: 20rpx;
}

.u-order-desc {
  /* color: rgb(150, 150, 150); */
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.u-order-time {
  /* color: rgb(200, 200, 200); */
  font-size: 26rpx;
}
</style>
