<!--消息下拉框-->
<template>
  <a-menu class="notice-dropdown">
    <a-tabs v-model:activeKey="activeKey" @change="tabChange">
      <a-tab-pane key="1" tab="通知">
       <template v-if='announceInfoList.length>0'>
                  <a-collapse v-model:activeKey="collapseActiveKey" expand-icon-position="end">
                    <a-collapse-panel :header='`${message.createName}-${message.updateTime}`'
                      v-for=" message in announceInfoList" :key="message.id">
                      <p> {{message.content}} </p>
                      <template #extra v-if="message.state">
                        <check-circle-two-tone two-tone-color="#52c41a" :style="{fontSize: '30px', color: '#08c'}"
                          @click="handleClick" />
                      </template>
                      <template #extra v-else>
                        已读
                      </template>
                    </a-collapse-panel>
                  </a-collapse>
                </template>
                <template v-else>
        <a-empty description="暂无通知" />
       </template>
      </a-tab-pane>
      <a-tab-pane key="2" tab="公告">
        <a-empty description="暂无公告" />
      </a-tab-pane>
      <a-tab-pane key="3" tab="私信">
        <template v-if='inboxInfoList.length>0'>
          <!-- <div  v-for=" message in inboxInfoList" :key= "message.id">
             {{message.content}}___ {{message.createTime}}
header="(message)=>{return message.createUsername +message.createTime;}"
          </div> -->
          <a-collapse v-model:activeKey="collapseActiveKey" expand-icon-position="end">
            <a-collapse-panel :header='`${message.createName}-${message.createTime}`'
              v-for=" message in inboxInfoList" :key="message.id">
              <p> {{message.content}} </p>
              <template #extra v-if="message.isRead">
                <check-circle-two-tone two-tone-color="#52c41a" :style="{fontSize: '30px', color: '#08c'}"
                  @click="handleClick" />
              </template>
              <template #extra v-else>
                已读
              </template>
            </a-collapse-panel>
          </a-collapse>
        </template>
        <template v-else>
          <a-empty description="暂无私信" />
        </template>
      </a-tab-pane>
      <a-tab-pane key="4" tab="任务">
        <a-collapse v-model:activeKey="collapseActiveKey" expand-icon-position="end">
          <a-collapse-panel key="1" header="This is panel header 1">
            <p> {{text}} </p>
            <!-- <template #extra><setting-outlined @click="handleClick" /></template> -->

            <template #extra><check-circle-two-tone two-tone-color="#52c41a" :style="{fontSize: '30px', color: '#08c'}"
                @click="handleClick" /></template>

          </a-collapse-panel>
          <a-collapse-panel key="2" header="This is panel header 2">
            <p>{{ text }}</p>
          </a-collapse-panel>
          <a-collapse-panel key="3" header="This is panel header 3" collapsible="disabled">
            <p>{{ text }}</p>
          </a-collapse-panel>
        </a-collapse>

        <!-- <a-empty description="暂无任务" /> -->
      </a-tab-pane>
    </a-tabs>
  </a-menu>
</template>


<script>
  import {
    onMounted,
    ref,
    watch,
    reactive,
    onUnmounted,
    computed
  } from "vue";
  import {
    useStore
  } from 'vuex';
  import {
    page,
    getAnnounceByUserId
  } from "@/api/module/announce";
  import {
    getInboxByUserId,
  } from "@/api/module/inbox";
  import {
    async
  } from "regenerator-runtime";

  export default {
    components: {

    },
    setup() {
      //const { getters, commit, dispatch } = useStore();
      const {
        getters
      } = useStore();
      //当前打开的tab
      const activeKey = ref('1');
      //获取用户信息
      const getCurrentUserId = () => {
        var userInfo = getters.userInfo.id
        console.log("获取用户信息", userInfo)
        userId.value = getters.userInfo.id
      };

      //折叠面板
      const collapseActiveKey = ref(['1']);
      const text = `it can be found as a welcome guest in many households across the world.`;
      const handleClick = event => {
        // If you don't want click extra trigger collapse, you can prevent this:
        //event.stopPropagation();
        console.log("collapseActiveKey handleClick", event);
      };
      watch(collapseActiveKey, val => {
        console.log("collapseActiveKey", val);
      });

      const userId = ref();
      const announceInfoList = ref([]);
      //获取指定用户的通知·
      const queryAnnounceInfo = async (userId) => {
        console.log("获取指定用户的通知", queryAnnounceInfo)
        var response = await getAnnounceByUserId({
          "userId": userId
        })
         console.log("queryAnnounceInfo", response.data)
        announceInfoList.value = response.data
        return announceInfoList.value;
      };

      //获取指定用户的公告

      const inboxInfoList = ref([]);
      //获取指定用户的私信
      const queryInboxInfo = async (userId) => {
        console.log("获取指定用户的私信", queryInboxInfo)
        var response = await getInboxByUserId({
          "userId": userId
        })
        console.log("queryInboxInfo", response.data)
        inboxInfoList.value = response.data
        return inboxInfoList.value;
      };



      const tabChange = async (activtKey) => {
        console.log(" tabChange activtKey ", activtKey)
        switch (activtKey) {
          case '1':
          var aa = queryAnnounceInfo(userId.value);
            console.log(" 通知 ", activtKey)
            break;
          case '2':
            console.log(" 公告 ", activtKey)
            break;
          case '3':
            console.log(" 私信 ", activtKey)
            var a = queryInboxInfo(userId.value);
            break;
          case '4':
            console.log("任务", activtKey)
            break;
          default:
            console.log("default", activtKey)
            break;
        }
      };

      //获取指定用户的任务
      onMounted(() => {
        //查询所有的仓库节点信息
        getCurrentUserId();
      });

      return {
        userId,
        queryAnnounceInfo,
        queryInboxInfo,
        activeKey, //当前活动的页签
        tabChange,
        inboxInfoList, //当前用户的私信
        announceInfoList,
        collapseActiveKey,
        text
      }
    }

  };
</Script>

<style scoped>
  .icons-list :deep(.anticon) {
    margin-right: 6px;
    font-size: 40px;
  }
</style>
