<!--<template>-->
<!--  <div class=" w-full px-[0.15rem] flex flex-wrap">-->
<!--    <div v-for="item in list" @click="toDetail(item.id)" :key="item.id" class=" cursor-pointer mb-[0.3rem] w-[2.4rem] md:w-[2.51rem] xl:w-[2.616rem] px-[0.15rem]">-->
<!--      <img class=" w-[2.1rem] h-[2.1rem] md:w-[2.21rem] md:h-[2.21rem] xl:w-[2.316rem] xl:h-[2.316rem]" :src="item.img_url" onerror="onerror=null;src='http://120.79.165.149:8002/wp-content/themes/food/food-app/img/img-fail.png'"/>-->
<!--      <div class=" mt-[0.2rem] h-[0.66rem] w-full overflow-ellipsis-2 text-333 text-[0.25rem] leading-[0.33rem]">-->
<!--        {{item.product_name}}-->
<!--      </div>-->
<!--      <div class=" mt-[0.1rem] w-[0.94rem] flex justify-center px-[0.1rem] py-[0.04rem] bg-main rounded-[0.02rem] text-white text-[0.18rem] leading-[0.25rem]">-->
<!--        {{item.cate_single}}-->
<!--      </div>-->
<!--      <div class=" mt-[0.2rem] text-[0.37rem] leading-[0.33rem] font-f-din text-F70500">-->
<!--        ${{item.regular_price}}-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class=" mt-[0.3rem] w-full flex justify-center">-->
<!--      <a href="/food-search" class=" cursor-pointer font-f-arial px-[0.17rem] py-[0.1rem] rounded-full border-[0.02rem] border-solid border-333 text-[0.2rem] leading-[0.2rem] text-333">-->
<!--        更多>>-->
<!--      </a>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--module.exports = {-->
<!--  props: {-->
<!--    list: {-->
<!--      type: Array,-->
<!--      default: []-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    toDetail(id) {-->
<!--      window.open('/food-detail?id='+id, '_blank');-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<template>
  <a-dropdown>
    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
      Hover me <a-icon type="down" />
    </a>
    <a-menu slot="overlay">
      <a-menu-item>
        <a href="javascript:;">1st menu item</a>
      </a-menu-item>
      <a-menu-item>
        <a href="javascript:;">2nd menu item</a>
      </a-menu-item>
      <a-menu-item>
        <a href="javascript:;">3rd menu item</a>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>
<script>
module.exports = {
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
      openKeys: ['sub1'],
    };
  },
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
  },
}

// export default {
//   data() {
//     return {
//       rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
//       openKeys: ['sub1'],
//     };
//   },
//   methods: {
//     onOpenChange(openKeys) {
//       const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
//       if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
//         this.openKeys = openKeys;
//       } else {
//         this.openKeys = latestOpenKey ? [latestOpenKey] : [];
//       }
//     },
//   },
// };
</script>