<template>
  <div :class="['manage', { right: manageCartState }]">
    <div class="address" @click="openAddressPopup">
      <span class="iconfont icon-location" size="14" style="margin:0 6px;" />
      <p class="addressPrefix">配送至：</p>
      <span class="userAddress">{{ selectedAddress.addrFullName || '暂无收货地址' }}</span>
    </div>
    <span v-show="!manageCartState" class="manageText" @click="openManage">
      管理
    </span>
    <span v-show="manageCartState" class="manageText" @click="closeManageCartState">完成</span>
  </div>
</template>
<script>
import { mapState, mapActions, mapGetters } from '../shopCartModules.js';
export default {
  computed: {
    ...mapState(['manageCartState']),
    ...mapState({
      selectedAddress: state => state.selectedAddress,
      cartList: state => state.cartList
    }),
    ...mapGetters(['cartTotal'])
  },
  methods: {
    ...mapActions({
      openManageCartState: 'open_manage_cart_state',
      closeManageCartState: 'close_manage_cart_state'
    }),
    openManage() {
      if (!this.cartList.length) {
        this.$toast('请先添加商品到购物车');
        return;
      }
      this.openManageCartState();
    },
    openAddressPopup() {
      // this.$emit('openPopup', { type: 'address' });
    }
  }
};
</script>
<style lang="less" scoped>
.manage {
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 14px;
  padding: 0 6px;
  color: #333;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  background-color: @gray-6;
}
.address {
  width: 306px;
  height: 25px;
  display: flex;
  align-items: center;
  padding: auto 49px auto 6px;
  border-radius: 13px;
  background: rgba(216, 216, 216, 0.35);
  color: #333333;
}
.addressPrefix {
  font-size: 12px;
  color: #333333;
  font-weight: 600;
}
.userAddress {
  width: 180px;
  color: #999999;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  margin-left: 5px;
}
.manageText {
  width: 30px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #333333;
  font-weight: 400;
}
</style>
