<template>
  <div class="goods-area">
    <div v-if="addressList && addressList.length" class="goods-area-list">
      <div
        v-for="(item, index) in addressList"
        :key="index"
        class="goods-area-item"
        :class="{
          'goods-area-item_selected': item.addrReceiverId === receiverInfo.id
        }"
        @click="setAddressInfo(item)"
      >
        <cr-icon
          type="location"
          size="0.48rem"
          :color="item.addrReceiverId === receiverInfo.id ? '#EC1500' : '#333333'"
        />
        <div class="goods-area-item-txt">
          <p>
            {{ item.addrFullName }}
          </p>
          <p>{{ item.provinceName }}{{ item.cityName }}{{ item.countyName }}</p>
        </div>
      </div>
    </div>
    <div v-else class="goods-area-none">暂未添加地址哦～</div>
    <div class="goods-area-button">
      <cr-button shape="circle" type="primary" block @click="addAddress">添加新地址</cr-button>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from '../store';

export default {
  name: 'AddressSelect',
  computed: {
    ...mapGetters(['addressList', 'receiverInfo'])
  },
  methods: {
    ...mapActions(['setAddressInfo']),
    addAddress() {
      this.$router.push({ name: 'addressManage' });
    }
  }
};
</script>
<style lang="less" scoped>
.goods-area {
  position: relative;
  height: 65vh;
  &-list {
    height: 55vh;
    position: relative;
    overflow: scroll;
    padding: @padding-xl @padding-lg @padding-md;
  }

  &-item {
    display: flex;
    margin-bottom: @padding-unit * 7;
    .cr-icon {
      margin: 2px @padding-xs 0 0;
    }
    &-txt {
      color: @black;
      p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        &:first-child {
          .text-size(14px);
          font-weight: 600;
        }
        &:last-child {
          .text-size(12px);
        }
      }
    }
    &_selected {
      p {
        &:first-child {
          color: @red;
        }
      }
    }
  }
  &-none {
    display: inline-block;
    width: 100%;
    line-height: 65vh;
    .text-size(13);
    color: @gray-5;
    text-align: center;
  }
  &-button {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    padding: @padding-md;
  }
}
</style>
