<script>
export default {
  data() {
    return {
      totalCounties: 250,
      first: 0,
      last: 20,
      totalInPerPage: 20,
      countries: [],
      country: [],
      historyCountries: [],
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      fetch("https://restcountries.eu/rest/v2/all")
        .then((res) => res.json())
        .then((data) => (this.countries = data.slice(this.first, this.last)))
        .catch((err) => console.log(err.message));
    },
    previous() {
      this.last = this.first;
      this.first = this.first - this.totalInPerPage;
      if (this.first >= 0) {
        this.fetchData();
      } else {
        this.first = 0;
        this.last = this.totalInPerPage;
        this.fetchData();
      }
    },
    next() {
      this.first = this.last;
      this.last = this.last + this.totalInPerPage;
      if (this.last <= this.totalCounties) {
        this.fetchData();
      } else {
        this.first = this.totalCounties - this.totalInPerPage;
        this.last = this.totalCounties;
        this.fetchData();
      }
    },
    handleClick(country) {
      console.log("Clicked on: " + country.name);
    },
  },
};
</script>