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

<script>
import appCard from "./app-card";

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

<style scoped>
.app_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>
