import { mapActions, mapGetters } from 'vuex';

export default {
  props: {
    visible: { type: Boolean, default: false },
    customerId: Number,
    customerPhone: String,
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.fetchUserBaseInfo({
          customerId: this.customerId,
        });
      }
    },
    customerId(newId) {
      if (newId && this.visible) {
        this.fetchUserBaseInfo({
          customerId: this.customerId,
        });
      }
    },
    customerPhone(newPhone) {
      if (!this.customerId && newPhone && this.visible) {
        this.fetchUserBaseInfoByPhone({
          customerPhone: this.customerPhone,
        });
      }
    },
  },
  created() {
    if (this.visible && this.customerId) {
      this.fetchUserBaseInfo({
        customerId: this.customerId,
      });
    }
    if (this.visible && !this.customerId && this.customerPhone) {
      this.fetchUserBaseInfoByPhone({
        customerPhone: this.customerPhone,
      });
    }
  },
  computed: {
    ...mapGetters(['customerBaseInfo']),
  },
  methods: {
    ...mapActions(['fetchUserBaseInfo', 'fetchUserBaseInfoByPhone']),
  },
};