<template>
  <cr-popup v-model="popupShow" class="popup-head" closeable position="bottom">
    <div class="popup-title">配送至</div>
    <div class="goods-area">
      <template v-if="addressList && addressList.length">
        <div
          v-for="(item, index) in addressList"
          :key="index"
          class="goods-area-item "
          :class="{
            'goods-area-item_selected': item.addrReceiverId === selectedAddressId
          }"
          @click="changeAddress(item)"
        >
          <span class="iconfont icon-location-line" />
          <span class="secondText">{{ item.addrFullName }}</span>
        </div>
      </template>
      <span v-else class="goods-area-none">暂未添加地址哦～</span>
      <div class="goods-area-button" @click="addAddress">
        <cr-button block type="primary" shape="circle">添加新地址</cr-button>
      </div>
    </div>
  </cr-popup>
</template>

<script>
import goods from '@/api/goods.api.js';
import localStorage from '@/service/localStorage.service';

const EVENT_ADDRESS_SELECT = 'address-select';
const EVENT_ADDRESS_SHOW = 'input';

export default {
  name: 'AddressListPopup',
  props: {
    value: Boolean,
    selectedAddressId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      popupShow: this.value,
      addressList: [],
      hasLogin: false
    };
  },
  watch: {
    popupShow(val) {
      this.$emit(EVENT_ADDRESS_SHOW, val);
    },
    value(val) {
      this.popupShow = val;
    }
  },
  created() {
    this.hasLogin = !!localStorage.get('vccToken');
    this.getAddr();
  },
  methods: {
    changeAddress(item) {
      this.$emit(EVENT_ADDRESS_SELECT, item);
      this.$emit(EVENT_ADDRESS_SHOW, false);
    },
    addAddress() {
      if (!this.hasLogin) {
        this.$router.push({ name: 'Login' });
        return;
      }
      this.$router.push({ name: 'addressManage' });
    },
    async getAddr() {
      if (!this.hasLogin) {
        return;
      }
      const [addressInfo] = await goods.addrList();
      if (addressInfo) {
        this.addressList = (addressInfo && addressInfo.addrReceiverList) || [];
        const selectedAddr = this.selectedAddressId
          ? this.addressList.find(item => item.addrReceiverId === this.selectedAddressId)
          : this.addressList.find(item => item.addrDefault === 1);
        this.$emit(EVENT_ADDRESS_SELECT, selectedAddr);
      }
    }
  }
};
</script>

<style lang="less" scoped>
// 弹出框头部
.popup-head {
  border-radius: 20px 20px 0 0;
  .popup-title {
    .text-size(16);
    font-weight: @font-weight-bold;
    color: @black;
    text-align: center;
    padding: 10px 0;
  }
}
.goods-area {
  height: 65vh;
  overflow: scroll;
  padding: @padding-md;
  position: relative;
  &-item {
    display: flex;
    align-items: center;
    margin-bottom: @padding-lg;
    span {
      .text-size(13);
      color: @gray-4;
      &:first-child {
        width: 20px;
        height: 20px;
        line-height: 20px;
        .text-size(16);
      }
      &:second-child {
        flex: 1;
      }
    }
    &_selected {
      span {
        &:first-child {
          color: @red;
        }
        &.secondText {
          color: @black;
          font-weight: @font-weight-bold;
        }
      }
    }
  }
  &-none {
    display: inline-block;
    width: 100%;
    line-height: 65vh;
    .text-size(13);
    color: @gray-5;
    text-align: center;
  }
  &-button {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: calc(100% - @padding-md * 2);
    margin: 0 auto;
  }
}
.goods-bottom-buy {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 335px;
  height: 40px;
  .text-size(14);
  font-weight: bold;
  border-radius: @padding-lg;
  color: @white;
  background-image: @gradient-red;
  &.disabled {
    opacity: 0.7;
  }
}
</style>
