<template>
  <div class="confirm-header" :class="radius" @click="onToAddress">
    <div class="confirm-header__left">
      <cr-image
        :src="'https://img.lkbang.net/xcx/addr-icon.png' | imageMogr4Operation(40, 40)"
        width="40px"
        height="40px"
        fit="contain"
      />
    </div>
    <div v-if="addrReceiverInfo" class="confirm-header__middle">
      <span class="addr-name">{{ addrReceiverInfo.addrFullName || '' }}</span>
      <span class="addr-info">
        {{ addrReceiverInfo.receiverName || '' }}
        {{ addrReceiverInfo.receiverPhoneNo || '' }}
      </span>
    </div>
    <div v-else class="confirm-header__middle">
      <span class="no-addr">请添加收货地址信息</span>
    </div>
    <span class="confirm-header__right iconfont icon-arrow" />
  </div>
</template>

<script>
export default {
  props: {
    addrReceiverInfo: {
      type: Object,
      default: () => null
    },
    radius: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 跳转地址列表页面
    onToAddress() {
      let _params = {
        name: 'addressManage',
        query: { from: 'order' }
      };
      if (this.addrReceiverInfo) {
        _params = {
          name: 'address',
          query: { source: 1 }
        };
      }
      this.$router.push(_params);
    }
  }
};
</script>

<style lang="less" scoped>
.confirm-header {
  display: flex;
  align-items: center;
  margin-bottom: @padding-sm;
  padding: @padding-xs + 4 @padding-xs + 2;
  width: 100%;
  min-height: 80px;
  background: @white;
  border-radius: @border-radius-md;
  box-sizing: border-box;
  &.not-radius {
    border-radius: 0 0 @border-radius-md @border-radius-md;
  }
  &__left {
    width: 40px;
    height: 40px;
    img {
      width: inherit;
      height: inherit;
    }
  }
  &__middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 @padding-xs + 2;
    span {
      .text-size(13);
      color: @black;
      &:first-child {
        font-weight: @font-weight-bold;
        margin-bottom: @padding-unit + 2;
        word-break: break-all;
        text-overflow: ellipsis;
        .mx_multline_overwrite(2);
      }
      &.no-addr {
        .text-size(16);
        color: #333333;
        line-height: 22px;
        font-weight: 400;
        margin-bottom: 0;
      }
    }
  }
  &__right {
    .text-size(13);
    color: @gray-3;
  }
}
</style>
