<template>
  <view class="card" @click="bundleClick">
    <view class="card__left">
      <view>
        <view class="info">
          <text v-if="item.addrDefault" class="tag">默认</text>
          <text class="name">{{ item.receiverName }}</text>
          <text class="phone">{{ item.receiverPhoneNo }}</text>
        </view>

        <view class="detail">{{ item.addrFullName }}</view>
      </view>
    </view>

    <view v-if="edit" class="card__right">
      <button plain="true" @click.stop="toEdit">编辑</button>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    item: Object,
    edit: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    bundleClick() {
      this.$emit("bundleClick", this.item);
    },
    toEdit() {
      this.$store.commit("editAddress", this.item);
      // eslint-disable-next-line no-undef
      uni.navigateTo({
        url: "/subPackages/common/address/addressManage?type=edit"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/var.scss";
.card {
  background-color: $white;
  border-radius: $border-radius-sm;
  padding: $padding-sm 0 $padding-sm $padding-xs + 2;
  margin-bottom: $uni-spacing-col-md;
  display: flex;

  .divider {
    display: inline-block;
  }

  .card__left {
    flex: 1;

    .info {
      display: flex;
      align-items: center;
      margin-bottom: $padding-unit + 4;
    }

    .tag,
    .name {
      margin-right: $uni-spacing-row-sm;
    }

    .tag {
      @include primary-bg;
      color: $white;
      border-radius: $border-width-base * 6;
      font-size: $uni-font-size-tiny;
      letter-spacing: -0.27px;
      padding: 0 14rpx;
      /* #ifdef MP-ALIPAY */
      padding-top: 5rpx;
      /* #endif */
    }

    .name,
    .phone {
      color: $black;
      @include text-size(26);
    }

    .detail {
      display: inline-block;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      color: $gray-5;
      @include text-size(24);
    }
  }

  .card__right {
    flex: none;
    border-left: 1rpx solid rgba(216, 216, 216, 0.3);
    display: flex;
    align-items: center;
    margin-left: 24rpx;
    button {
      border: none;
      font-size: 26rpx;
      color: $black;
      padding: 0 $padding-xs + 4 0 $padding-xs + 2;
    }
  }
}
</style>
