<template>
  <div>
    {{ location }}
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Location",
  head() {
    return {
      titleTemplate: `%s - ${this.location.name}`
    };
  },
  validate({ params }) {
    const uuid = new RegExp(
      /^[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-4[0-9A-Za-z]{3}-[89ABab][0-9A-Za-z]{3}-[0-9A-Za-z]{12}$/
    );
    return uuid.test(params.id);
  },
  async asyncData({ params, store }) {
    if (!store.state.locations.location.id !== params.id)
      await store.dispatch("locations/getLocation", params.id);
  },
  computed: {
    ...mapGetters({
      location: "locations/location"
    })
  }
};
</script>

<style></style>
