<template>
  <div>
    <Row class="mt-50">
      <Col
        v-for="item in listApp"
        :key="item.id"
        :span="item.col"
        class="mb-15"
      >
        <Card class="mr-5 ml-5">
          <div
            class="text-center hand-hover"
            @click="openExternalUrl(item.url)"
          >
            <img
              :src="item.logo"
              style="height: 50px"
            >
            <h3>{{ item.name }}</h3>
            <p>{{ item.description }}</p>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import { fetchListEcosystem } from '@/api/autoshopee/cms';

export default {
  name: 'App',
  data() {
    return {
      listApp: [],
    };
  },
  async created() {
    this.listApp = await fetchListEcosystem();
  },
};
</script>

<style lang="scss" scoped></style>
