<template>
  <block>
    <u-tag v-if="isCurrent" class="gg-current-location-tag u-m-l-20" mode="dark" size="mini" text="当前提货点"
           type="error"/>

    <view :class="{ selected }" class="gg-current-location u-p-20" @click="changePickUpLocation(location.id)">
      <u-image :src="location.storePath" border-radius="10rpx" class="gg-current-location-img" height="150rpx"
               width="150rpx"></u-image>
      <view class="gg-current-location-msg u-m-l-20 u-m-r-20">
        <view class="gg-current-location-msg-title u-m-b-5">{{ location.takeName }}</view>
        <view class="gg-current-location-msg-distance-address u-m-t-5">
          <text v-if="location.distance" class="gg-current-location-msg-distance u-font-xs u-m-r-20">
            距离最近*距离{{ location.distance }}km
          </text>
          <text class="gg-current-location-msg-address u-font-xs">{{ location.detailAddress }}</text>
        </view>
      </view>
      <block v-if="showRadio">
        <view v-if="isCurrent" class="gg-current-location-btn">
          <u-icon color="#fa3534" name="checkmark-circle-fill" size="40"/>
        </view>
        <view v-else class="gg-current-location-btn">
          <u-icon name="checkmark-circle-fill" size="40"/>
        </view>
      </block>
    </view>
  </block>
</template>

<script>
export default {
  name: 'PickUpLocationItem',
  props: {
    selected: {
      type: Boolean,
      default: false
    },
    isCurrent: {
      type: Boolean,
      default: true
    },
    showRadio: {
      type: Boolean,
      default: true
    },
    location: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
    changePickUpLocation(id) {
      this.$emit('selectPickUpLocation', id);
    }
  }
};
</script>

<style lang="scss" scoped>
.selected {
  background-color: $u-type-info !important;
}

.gg-current-location {
  display: flex;
  background-color: $u-type-info-light;
  border-radius: 20rpx;

  &-tag {
    position: absolute;
    z-index: 9999;
  }

  &-msg {
    flex: 1;

    &-title {
      font-weight: bold;
    }

    &-distance {
      color: $u-type-error;
    }

    &-address {
      color: $u-type-info;
    }
  }

  &-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>
