
<template>
  <div class="flex space-x-12">
   <div>
     <a-menu
         id="dddddd"
         v-model:openKeys="openKeys"
         v-model:selectedKeys="selectedKeys"
         :items="items"
         mode="inline"
         style="width: 256px"
         @click="handleClick"
     ></a-menu>
   </div>
    <div class="flex flex-col space-y-8">
      <div class="flex">
        <div class="mt-4 flex space-x-5">
          <div class="inline-flex rounded-md shadow-sm">
            <a aria-current="page" class="w-16 flex justify-center items-center text-sm font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-500 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700" href="#">
              全部
            </a>
            <a class="w-16 flex justify-center items-center text-sm font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-500 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 " href="#">
              未读
            </a>
          </div>
          <a-input class="h-8 w-56 border-gray-300 rounded-md"  placeholder="请输入要查询的消息关键字" />
        </div>
      </div>
      <div class="w-[1000px]">
        <table class="w-full text-sm text-left rtl:text-right text-gray-500">
          <tbody>
          <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
            <th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white" scope="row">
             小明老师
            </th>
            <td class="px-6 py-4">
              时间
            </td>
            <td class="px-6 py-4">
              <a-button class="flex justify-center items-center" type="link"><DeleteOutlined />删除</a-button>
            </td>
          </tr>
          <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
            <th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white" scope="row">
              小明老师
            </th>
            <td class="px-6 py-4">
              时间
            </td>
            <td class="px-6 py-4">
              <a-button class="flex justify-center items-center" type="link"><DeleteOutlined />删除</a-button>
            </td>
          </tr>
          <tr class=" bg-white border-b dark:bg-gray-800 dark:border-gray-700">
            <th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white" scope="row">
              小明老师
            </th>
            <td class="px-6 py-4">
              时间
            </td>
            <td class="px-6 py-4 flex">
              <a-button class="flex justify-center items-center" type="link"><DeleteOutlined />删除</a-button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

    </div>


  </div>

</template>
<script setup>
import {reactive, ref, watch} from 'vue';
import {DeleteOutlined} from '@ant-design/icons-vue';

const selectedKeys = ref(['1']);
const openKeys = ref(['sub1']);
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}
const items = reactive([
    getItem('消息盒子', '1'),
    getItem('保存的消息', '2'),
    getItem('项目消息', '3'),
    getItem('系统消息', '4'),
]);
const handleClick = e => {
  console.log('click', e);
};
watch(openKeys, val => {
  console.log('openKeys', val);
});
</script>