<template>
  <div class="organization_list" ref="container">
    <organization-card
      v-for="(item, index) in data"
      :key="'organization_card_' + index"
      :data="item"
      @delete-action="deleteAction"
      :details-url="detailsUrl"
      :style="{ width: 'calc(100% / ' + rowNum + ' - 36px)' }"
    ></organization-card>
  </div>
</template>

<script>
import organizationCard from "./organization-card";

export default {
  components: {
    organizationCard,
  },
  props: {
    data: {
      type: Array,
      default: [],
    },
    detailsUrl: {
      type: String,
      default: 0,
    },
  },
  data: () => ({
    rowNum: 5,
  }),
  methods: {
    deleteAction(item) {
      this.$emit("delete-action", item);
    },
    pageResize() {
      let listWidth = this.$refs.container.clientWidth;
      this.rowNum = Math.floor(listWidth / 310);
    },
  },
  mounted() {
    this.pageResize();
    window.addEventListener("resize", this.pageResize);
  },
  destroyed() {
    window.removeEventListener("resize", this.pageResize);
  },
};
</script>

<style scoped>
.organization_list {
  margin: 0 -20px;
  padding: 30px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}
</style>
