<template>
  <div>
    <cr-popup v-model="show" class="popup-head" closeable position="bottom">
      <div v-if="type === 'address'">
        <div 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 === selectedAddress.addrReceiverId
            }"
            @click="changeAddress(item)"
          >
            <span class="iconfont icon-location-line" />
            <span class="secondText">{{ item.addrFullName }}</span>
          </div>
        </div>
        <span v-else class="goods-area-none">暂未添加地址哦～</span>
        <!-- <div class="goods-area-button" @click="addAddress">
          <button class="goods-bottom-buy btn-absolute">添加新地址</button>
        </div> -->
      </div>
      <div v-if="type === 'promotion'">
        <selectedSku :info="selectedSku" />
        <div class="body">
          <p class="body-title">修改促销:</p>
          <cr-radio-group v-model="activityId" direction="vertical">
            <cr-radio
              v-for="item in goodInfo.canSelectPromotions"
              :key="item.activityTemplateId"
              :name="item.activityTemplateId"
              >{{ item.title }}</cr-radio
            >
          </cr-radio-group>
        </div>
      </div>
      <div class="bottom">
        <cr-button shape="circle" @click="btnClick">{{
          type === 'address' ? '添加新地址' : '确定'
        }}</cr-button>
      </div>
    </cr-popup>
  </div>
</template>
<script>
// import goods from '@/api/goods.api.js';
import selectedSku from '../../product/components/selectedSku.vue';
import { changeActivity } from '@/api/shopCart.api';
import { mapActions } from '../shopCartModules';
export default {
  inject: ['cart'],
  components: {
    selectedSku
  },
  props: {
    selectedAddress: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      show: false,
      addressList: [],
      funcs: {
        promotion: 'changePromotion',
        address: 'addAddress'
      },
      activityId: '',
      type: '',
      goodInfo: {}
    };
  },
  computed: {
    selectedSku: function() {
      const selectPriceObj = this.goodInfo.canSelectPrices?.find(i => i.selected) || {};
      return this.goodInfo
        ? {
            imageUrl: this.goodInfo.skuImg,
            salePrice: selectPriceObj.price || this.goodInfo.salePrice,
            spec: this.goodInfo.skuAttr || ''
          }
        : {};
    }
  },
  mounted() {
    this.getAddressList();
  },
  methods: {
    ...mapActions({
      updateCartList: 'update_cart_list'
    }),
    async getAddressList() {
      // const [addressInfo] = await goods.addrList();
      // this.addressList = (addressInfo && addressInfo.addrReceiverList) || [];
    },
    showPopup({ type, goodInfo }) {
      this.type = type;
      this.goodInfo = goodInfo;
      if (this.type === 'promotion') {
        const selectedActivity = this.goodInfo.canSelectPromotions?.find(i => i.selected) || {};
        this.activityId = this.goodInfo ? selectedActivity.activityTemplateId || '' : '';
      }
      this.show = true;
    },
    btnClick() {
      this.funcs[this.type] && this[this.funcs[this.type]]();
    },
    async changePromotion() {
      const item = this.goodInfo.canSelectPromotions?.find(
        i => i.activityTemplateId === this.activityId
      );
      const params = {
        skuNo: this.goodInfo.skuId,
        activityTemplateId: this.activityId,
        activityTemplateDetailId: item.activityTemplateDetailId || ''
      };
      const [res] = await changeActivity(params);
      if (res) {
        this.cart.queryList({ pageNo: 1, pageSize: 1000 });
      }
      this.show = false;
    },
    changeAddress() {},
    addAddress() {}
  }
};
</script>
<style lang="less" scoped>
.popup-head {
  border-radius: 20px 20px 0 0;
  height: 598px;
}
.body {
  padding: 0 21px;
  font-size: 14px;
  color: #333333;
  &-title {
    margin-bottom: 18px;
  }
}
.bottom {
  position: absolute;
  bottom: 40px;
  margin-left: 18px;
}
::v-deep .cr-button--normal {
  background: linear-gradient(45deg, #ff1900, #ff5d00);
  width: 339px;
  height: 34px;
  color: #ffffff;
}
::v-deep .cr-radio {
  margin-bottom: 12px;
}
</style>
