<template>
  <view
    class="address-item ss-flex ss-row-between ss-col-center"
    :class="[{ 'border-bottom': props.hasBorderBottom }]"
  >
    <view class="item-left" v-if="!isEmpty(props.item)">
      <view class="person-text"><text class="name">{{ props.item.consignee }}</text> <text class="phone">{{ props.item.mobile }} </text><text v-if="props.item.is_default" class="default-address">默认</text></view>
      <view class="area-text ss-flex ss-col-center">
        <!-- <uni-tag
          class="ss-m-r-10"
          size="small"
          custom-style="background-color: var(--ui-BG-Main); border-color: var(--ui-BG-Main); color: #fff;"
          v-if="props.item.is_default"
          text="默认"
        ></uni-tag> -->
        {{ props.item.province_name }}{{ props.item.city_name }}{{ props.item.district_name }}{{ props.item.address }}
      </view>
    </view>
    <view v-else><view class="address-text ss-m-b-10">请选择收货地址</view></view>
    <slot>
      <button class="ss-reset-button edit-btn" @tap.stop="onEdit">
        <view class="edit-icon ss-flex ss-row-center ss-col-center">
          <image src="/static/edit-address.png" />
        </view>
      </button>
    </slot>
  </view>
</template>

<script setup>
  /**
   * 基础组件 - 地址卡片
   *
   * @param {String}  icon = _icon-edit    - icon
   *
   * @event {Function()} click			 - 点击
   * @event {Function()} actionClick		 - 点击工具栏
   *
   * @slot 								 - 默认插槽
   */
  import sheep from '@/sheep';
  import { isEmpty } from 'lodash';
  const props = defineProps({
    item: {
      type: Object,
      default() {},
    },
    hasBorderBottom: {
      type: Boolean,
      defult: true,
    },
  });

  const onEdit = () => {
    sheep.$router.go('/pages/user/address/edit', {
      id: props.item.id,
    });
  };
</script>

<style lang="scss" scoped>
  .address-item {
    padding: 24rpx 30rpx;

    .item-left {
      width: 600rpx;
    }

    .area-text {
      font-weight: 400;
      color: $dark-9;
      font-size: 24rpx;
      color: #000000;
      margin-top: 10rpx;
    }

    .address-text {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
      line-height: 48rpx;
    }

    .person-text {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #000000;
      .name {
        font-weight: 500;
      }
      .phone {
        font-weight: 400;
        display: inline-block;
        margin-left: 15rpx;
        margin-right: 10rpx;
      }
      .default-address {
        display: inline-block;
        padding: 3rpx 20rpx;
        text-align: center;
        background: var(--ui-BG-Main);
        border-radius: 14rpx 14rpx 14rpx 14rpx;
        font-weight: 400;
        font-size: 18rpx;
        color: #FFFFFF;
      }
    }
  }

  .edit-btn {
    width: 46rpx;
    height: 46rpx;
    .edit-icon {
      width: 46rpx;
      height: 46rpx;
    }
  }
  image {
    width: 100%;
    height: 100%;
  }
</style>
