<template>
  <div class="row card-con">
    <div
      class="cursor-pointer q-pa-xs"
      :class="itemClass"
      :key="index"
      v-for="(item,index) in queryData.items"
    >
      <q-card
        flat
        bordered
        :class="item.$selected?'selected':''"
        class="fit"
        @click="$emit('itemClick', item)"
      >
        <q-item>
          <slot name="item" v-bind="{item, index}">
            <q-item-section top avatar>
              <slot name="item-avatar" v-bind="{item, index}">
                <q-avatar
                  :color="mdata.itemMap['canUse']&&!item.canUse?'grey-6': item.avatarColor || avatarColor || 'primary'"
                  text-color="white"
                >{{avatarField&&item[avatarField]||item.title||item.name|nameAvatar}}</q-avatar>
              </slot>
            </q-item-section>
            <q-item-section>
              <slot name="item-body" v-bind="{item, index}">
                <q-item-label class="ellipsis">{{item.title||item.name}}</q-item-label>
                <q-item-label caption lines="2">{{item.desc||item.name}}</q-item-label>
              </slot>
            </q-item-section>

            <slot name="item-append" v-bind="{item, index}">
            </slot>

            <q-item-section side top>
              <slot name="item-menu" v-bind="{item, index}">
                <q-btn
                  v-if="itemsMenuList[index].length > 0"
                  :icon="itemsMenuList[index].length > 1 ? 'menu' : itemsMenuList[index][0].icon"
                  flat
                  dense
                  @click.stop="itemsMenuList[index].length === 1 && itemsMenuList[index][0].click && itemsMenuList[index][0].click(item, itemsMenuList[index][0], index)"
                >
                  <q-menu
                    transition-show="scale"
                    transition-hide="scale"
                    v-if="itemsMenuList[index].length > 1"
                  >
                    <q-list style="min-width: 100px">
                      <template v-for="(menu, index2) in itemsMenuList[index]">
                        <q-item
                          v-close-popup
                          :key="index2"
                          clickable
                          @click="menu.click&&menu.click(item, menu, index)"
                        >
                          <q-item-section avatar>
                            <q-icon :name="menu.icon" :color="menu.color" />
                          </q-item-section>
                          <q-item-section>{{menu.title||$t(menu.name)}}</q-item-section>
                        </q-item>
                      </template>
                    </q-list>
                  </q-menu>
                </q-btn>
                <q-toggle v-if="mdata.itemMap['canUse']" v-model="item.canUse" />
                <!-- <q-item-label caption>5 min ago</q-item-label> -->
                <!-- <q-icon name="star" color="yellow" /> -->
              </slot>
            </q-item-section>
          </slot>
        </q-item>
      </q-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'kyb-table-card-list',
  props: {
    mdata: {
      type: Object,
      default: () => {
        return { itemMap: {} }
      }
    },
    queryData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    avatarField: [String, Object],
    avatarColor: String,
    itemClass: {
      type: String,
      default: 'col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-1'
    },
    itemMenuList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    itemsMenuList() {
      return this.queryData.items.map(item => {
        return this.itemMenuList.filter(menu => {
          return (
            menu.enable === undefined ||
            (typeof menu.enable === 'function'
              ? menu.enable(item)
              : menu.enable)
          )
        })
      })
    }
  },
  mounted() {}
}
</script>
