<template>
  <div
    @click="handleClick()"
    class="is-clickable"
  >
    <template v-if="count > 0">
      <span class="dot-primary">
        {{ count }}
      </span>
    </template>
    <template v-else>
      <span class="dot-primary"> + </span>
    </template>
  </div>
</template>

<script>
export default {
  props: ["row", "countField", "modalConfig"],

  computed: {
    count() {
      return this.row[this.countField] || 0;
    },
  },

  methods: {
    handleClick() {
      if (!this.modalConfig) return;

      let config = this.$copy(this.modalConfig);

      this.$emit("open", {
        name: "dataevent",
        data: {
          modal: config,
        },
      });
    },
  },
};
</script>
