<template>
  <div v-if="!props.flag && props.loading === true">
    <div class="empty-tips">数据加载中...</div>
  </div>
  <div class="card_list">
    <template v-if="props.list.length > 0">
      <div v-for="(item, i) in props.list" :key="'card' + i" class="item">
        <ability-card
          ref="itemRefs"
          :item="item"
          @change-selected-list="changeSelectedList"
          :flag="props.flag"
          @deleteItem="deleteItem"
          @move="move" />
      </div>
    </template>
    <div class="item" v-if="props.flag">
      <div v-if="props.list.length < 9" class="empty_card" @click="open">
        <span>+</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import abilityCard from "./ability-card.vue";
const itemRefs = ref([]);
const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
  flag: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["changeSelectedList", "openBox", "deleteItem", "move"]);
const changeSelectedList = (item, checked) => {
  emit("changeSelectedList", item, checked);
};
const open = () => {
  emit("openBox");
};
const deleteItem = (item) => {
  emit("deleteItem", item);
};
const move = (temp) => {
  emit("move", temp);
};

// const setRef = (el, index) => {
//   itemRefs.value.push(el)
// }

onMounted(() => {
  console.log(itemRefs);
})

defineExpose({
  list: props.list,
  itemRefs
});
</script>

<style lang="scss" scoped>
.card_list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  // transform: translateX(-16px);
  // justify-content: space-between;
  .item {
    // width: calc((100% - 32px) / 3);
    margin-left: 16px;
  }
  .empty_card {
    cursor: pointer;
    width: 384px;
    height: 242px;
    border: 1px dashed #dadee7;
    border-radius: 4px;
    margin-bottom: 24px;
    color: #dadee7;
    text-align: center;
    line-height: 242px;
    font-size: 48px;
    font-weight: 100;
  }

  .empty-tips {
    text-align: center;
  }
}
</style>
