<script setup lang="ts">
import AttentionMsg from '@/components/message/AttentionMsg.vue'
import LikeMsg from '@/components/message/LikeMsg.vue'
import OfficialMsg from '@/components/message/OfficialMsg.vue'
import ReplyMsg from '@/components/message/ReplyMsg.vue'
import { Check, ChevronDown, Heart, MessageSquareMore, UserPlus, Volume2 } from 'lucide-vue-next'

const currentMsgType = ref('reply')
const MsgTypeList = ref([
  // {
  //   label:'官方通知',
  //   value:'official'
  // icon:'Volume2'
  // },
  {
    label: '回复我的',
    value: 'reply',
    icon: 'MessageSquareMore',
  },
  {
    label: '收到的赞',
    value: 'like',
    icon: 'Heart',
  },
  {
    label: '关注我的',
    value: 'attention',
    icon: 'UserPlus',
  },
])

const iconMap: any = {
  official: Volume2,
  reply: MessageSquareMore,
  like: Heart,
  attention: UserPlus,
}

MsgTypeList.value = MsgTypeList.value.map(item => ({
  ...item,
  LucideIcon: iconMap[item.value], // 添加 Lucide 图标组件
}))

const urlList = ref({
  official: '',
  reply: '/advice/getCommentMsg',
  like: '/advice/getLikeMsg',
  attention: '/advice/getAttentionMsg',
})
const allList = ref({
  reply: [],
  like: [],
  attention: [],
})
// const officialList = ref([])
// const replyList = ref([])
// const likeList = ref([])
// const attentionList = ref([])

// const officialParamsType = ref('')
// const officialParamsTypeList = ref([
//   {
//     label:'全部通知',
//     value:'4'
//   }
// ])
const replyParamsType = ref('3')
const replyParamsTypeList = ref([
  {
    label: '全部通知',
    value: '3',
  },
  {
    label: '模型评论',
    value: '0',
  },
  {
    label: '图片评论',
    value: '2',
  },
  {
    label: '工作流评论',
    value: '1',
  },
])

const likeParamsType = ref('4')
const likeParamsTypeList = ref([
  {
    label: '全部通知',
    value: '4',
  },
  {
    label: '模型点赞',
    value: '0',
  },
  {
    label: '图片点赞',
    value: '2',
  },
  {
    label: '工作流点赞',
    value: '1',
  },
  {
    label: '评论点赞',
    value: '3',
  },
])

async function getList() {
  const url = urlList.value[currentMsgType.value]
  let productType = ''
  if (currentMsgType.value === 'reply') {
    productType = replyParamsType.value
  }
  else if (currentMsgType.value === 'like') {
    productType = likeParamsType.value
  }
  else {
    productType = ''
  }
  const res = await request.get(url, { productType })
  if (res.code === 200) {
    allList.value[currentMsgType.value] = res.data
  }
}
getList()

function changeType(item: any) {
  currentMsgType.value = item.value
  likeParamsType.value = '4'
  replyParamsType.value = '3'
  getList()
}
function handleSelect(item: any, type: string) {
  if (type === 'like') {
    likeParamsType.value = item.value
  }
  else {
    replyParamsType.value = item.value
  }
  getList()
}
// 一键已读
async function onAllRead() {
  try {
    const res = await request.get('/advice/readAll')
    if (res.code === 200) {
      getList()
    }
  }
  catch (err) {
    console.log(err)
  }
}
definePageMeta({
  layout: 'default',
})
</script>

<template>
  <div
    class="bg-[#f0f1f5] w-full flex items-center justify-center"
    :style="{ height: `calc(100vh - 48px)` }"
  >
    <div
      class="card w-[1036px] min-h-[500px] m-auto rounded-lg flex border border-solid border-gray-200"
      :style="{ height: `calc(100vh - 100px)` }"
    >
      <div
        class="w-[287px] bg-white p-3 box-content rounded-l-lg text-gray-600 flex flex-col justify-between"
      >
        <div>
          <div class="p-3 text-xl">
            通知
          </div>

          <div
            v-for="(item, index) in MsgTypeList"
            :key="index"
            class="msg-item"
            :style="{ background: item.value === currentMsgType ? '#f5f6fa' : '' }"
            @click="changeType(item)"
          >
            <!-- <Volume2 size="18" /> -->
            <!-- <MessageSquareMore size="18" /> -->
            <!-- <Heart size="18" /> -->
            <!-- <UserPlus
              size="18"
              :style="{ color: item.value === currentMsgType ? '#3541ec' : '' }"
              class="mr-2"
            /> -->

            <component
              :is="item.LucideIcon"
              size="18"
              :style="{ color: item.value === currentMsgType ? '#3541ec' : '' }"
              class="mr-2"
            />
            {{ item.label }}
          </div>
        </div>
        <div class="w-full flex py-2 cursor-pointer justify-center">
          <div class="flex justify-center items-center cursor-pointer" @click="onAllRead">
            <Check size="14" class="mr-1" />
            一键已读
          </div>
        </div>
      </div>
      <div class="box-content p-3 flex-1">
        <div class="w-full h-10 flex justify-end items-center cursor-pointer relative">
          <div class="group py-2">
            <template v-if="currentMsgType === 'reply' || currentMsgType === 'like'">
              全部通知
              <n-icon size="14" class="ml-1">
                <ChevronDown />
              </n-icon>
            </template>

            <div
              v-if="currentMsgType === 'reply'"
              class="absolute right-0 top-[30px] hidden group-hover:block text-[#000000] text-[12px] bg-white rounded-lg text-center px-2 py-2 w-20 mt-2 shadow-lg z-10"
            >
              <div
                v-for="(item, index) in replyParamsTypeList"
                :key="index"
                :style="{
                  color: item.value === replyParamsType ? '#3a75f6' : '',
                }"
                class="hover:bg-gray-100 py-2 cursor-pointer rounded-lg"
                @click="(event) => handleSelect(item, 'reply')"
              >
                {{ item.label }}
              </div>
            </div>
            <div
              v-if="currentMsgType === 'like'"
              class="absolute right-0 top-[30px] hidden group-hover:block text-[#000000] text-[12px] bg-white rounded-lg text-center px-2 py-2 w-20 mt-2 shadow-lg z-10"
            >
              <div
                v-for="(item, index) in likeParamsTypeList"
                :key="index"
                :style="{
                  color: item.value === likeParamsType ? '#3a75f6' : '',
                }"
                class="hover:bg-gray-100 py-2 cursor-pointer rounded-lg"
                @click="(event) => handleSelect(item, 'like')"
              >
                {{ item.label }}
              </div>
            </div>
          </div>
        </div>
        <div class="p-2 overflow-y-auto" :style="{ height: `calc(100% - 48px)` }">
          <OfficialMsg v-if="currentMsgType === 'official'" />
          <ReplyMsg v-if="currentMsgType === 'reply'" :data-list="allList.reply" />
          <LikeMsg v-if="currentMsgType === 'like'" :data-list="allList.like" />
          <AttentionMsg
            v-if="currentMsgType === 'attention'"
            :data-list="allList.attention"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.msg-item {
  @apply h-14 flex items-center mb-2 py-3 pl-6 rounded-lg cursor-pointer;
  @apply hover:bg-[#f5f6fa];
}
.card {
  @apply rounded-lg overflow-hidden transition-all duration-300;
  @apply [box-shadow:0_0_20px_0_rgba(0,0,0,0.05)];
  @apply hover:bg-[#f5f6fa] hover:[box-shadow:0_0_20px_0_rgba(0,0,0,0.1)];
}
</style>
