<template>
  <navigator :url="navUrl" hover-class="none" @click="eventTrack">
    <view :class="['confirm-header', className]">
      <view class="confirm-header__left">
        <image src="https://img.lkbang.net/xcx/addr-icon.png" />
      </view>
      <view v-if="orderInfo.addrReceiverInfo.addrFullName" class="confirm-header__middle">
        <text>{{ orderInfo.addrReceiverInfo.addrFullName || "" }}</text>
        <text>
          <!-- eslint-disable-next-line prettier/prettier -->
          {{ orderInfo.addrReceiverInfo.receiverName || "" }}
          {{ orderInfo.addrReceiverInfo.receiverPhoneNo || "" }}
        </text>
      </view>
      <view v-else class="confirm-header__middle">
        <text class="no-addr">请添加收货地址信息</text>
      </view>
      <text class="confirm-header__right iconfont icon-arrow" />
    </view>
  </navigator>
</template>
<script>
import { saTrackEvent } from "@/utils/sa.js";
export default {
  props: {
    className: {
      type: String,
      default: ""
    },
    orderInfo: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    navUrl() {
      return this.orderInfo?.addrReceiverInfo?.addrFullName
        ? "/subPackages/common/address/address?source=1"
        : "/subPackages/common/address/addressManage?from=order";
    }
  },
  methods: {
    // ====================================================
    eventTrack() {
      saTrackEvent("PD_YXMMAEC_UserClickOrderConfirmPageAddressBarBtn");
    }
  }
};
</script>
<style scoped lang="scss">
@import "@/style/var.scss";
.confirm-header {
  display: flex;
  align-items: center;
  margin-bottom: $padding-sm;
  padding: $padding-xs + 4 $padding-xs + 2;
  width: 100%;
  min-height: 160rpx;
  background: $white;
  border-radius: $border-radius-md;
  &.not-radius {
    border-radius: 0 0 $border-radius-md $border-radius-md;
  }
  &__left {
    width: 80rpx;
    height: 80rpx;
    image {
      width: 80rpx;
      height: 80rpx;
    }
  }
  &__middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 $padding-xs + 4;
    text {
      @include text-size(26);
      color: $black;
      &:first-child {
        font-weight: $font-weight-bold;
        margin-bottom: $padding-unit + 4;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      &.no-addr {
        font-size: 32rpx;
        color: #333333;
        line-height: 44rpx;
        font-weight: 400;
        margin-bottom: 0;
      }
    }
  }
  &__right {
    @include text-size(26);
    color: $gray-3;
  }
}
</style>
