<template>
  <view class="details-back-url-card" @click="goToLogistic">
    <view class="order-list-yi-bot-xiangxi custom_top" v-if="![5].includes(detail.status)">
      <view class="order-list-yi-bot-xiangxier custom_center">
        <view class="dot-line"></view>
      </view>
      <view class="order-list-yi-bot-xadasrfe" >
        <view class="order-list-yi-bot-xadasrfe-top"> {{!detail.delivery_id?"待发货":logisticText}} </view>
		<view class="order-list-yi-bot-xadasrfe-bot custom-txt" v-if="detail.delivery_id">
		  <view class=""> {{detail.delivery_name}} </view>
		  <view class="" style="margin-left: 32rpx">
		  {{detail.delivery_id}}
		  </view>
		</view>
      </view>
	  <uni-icons type="right" size="20" color="#333333" class="arrow_right_log" v-show="this.detail.delivery_id"></uni-icons>
    </view>
    <view class="order-list-yi-bot-xiangxi">
      <view class="order-list-yi-bot-xiangxier">
        <image
          src="https://cdn.bjtdba.com/vod/image/2022-08-13/20220813164638215.png"
          mode="widthFix"
        >
        </image>
      </view>
      <view class="order-list-yi-bot-xadasrfe">
        <view class="order-list-yi-bot-xadasrfe-top">
          {{detail.user_address}}
        </view>
        <view class="order-list-yi-bot-xadasrfe-bot">
          <view class=""> {{detail.real_name}} </view>
          <view class="" style="margin-left: 32rpx">
            {{ phone_user }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
//订单详情物流简洁卡片user_phone
import { MaskRules } from "@/utils/index.js";
export default {
  props:{
    detail:{
      type:Object,
      default:()=>{}
    },
    logisticText:{
      type:String,
      default:""
    }
  },
  data() {
    return {
      
    };
  },
  methods:{
	  goToLogistic(){
      if(!this.detail.delivery_id)return;
		  this.$emit("goToLogistic")
	  }
  },
  computed: {
    phone_user() {
      const user_phone = this.detail.user_phone || ""
      return MaskRules.mobile(user_phone);
    }
  }
};
</script>

<style lang="scss" scoped>
.details-back-url-card {
  width: calc(100% - 110rpx);
  padding: 22rpx 26rpx 0rpx;
  min-height: 176rpx;
  background: #ffffff;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .order-list-yi-bot-xiangxi {
	position: relative;
    display: flex;
    align-items: flex-start;
	&.custom_top{
		padding-bottom:15rpx;
	}
    .arrow_right_log{
		position: absolute;
		width: 28rpx;
		height: 28rpx;
		right:0;
		top:20rpx;
	}
    &::before {
		content: "";
		position: absolute;
		width: 2rpx;
		height: 73%;
		background: #1f7cff;
		left: 19rpx;
		top: 30rpx;
		z-index: 1;
	}
    &:last-child {
      padding-bottom: 0rpx;
      &::before {
        display: none;
      }
    }
    .order-list-yi-bot-xiangxier {
      width: 38rpx;
      height: 38rpx;
      &.custom_center {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      image {
        width: 100%;
        height: 100%;
		z-index: 2;
      }
      .dot-line {
        width: 21rpx;
        height: 21rpx;
        border: 2rpx solid #1f7cff;
        border-radius: 50%;
		z-index: 2;
      }
    }

    .order-list-yi-bot-xadasrfe {
      width: 544rpx;
      height: 100%;
      margin-left: 16rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
	 &:last-child{
		  padding-bottom:20rpx;
	 }

      .order-list-yi-bot-xadasrfe-top {
        width: 100%;
        font-size: 26rpx;
        font-weight: 600;
        color: #333333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        padding-bottom: 5rpx;
      }

      .order-list-yi-bot-xadasrfe-bot {
        font-size: 28rpx;
        font-weight: 400;
        color: #999999;
        display: flex;
		word-break: break-all;
		&.custom-txt{
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}
      }
    }
  }
}
</style>
