<script setup lang="ts">
import { Heart, PersonAddOutline } from '@vicons/ionicons5'

import {
CircleUser,
Download,
EllipsisVertical, Play,
SquarePlus
} from 'lucide-vue-next'
import { NConfigProvider, NMessageProvider } from 'naive-ui'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const message = useMessage()

const router = useRouter()
// 用于版本tabs当前选中的选项卡
definePageMeta({
  layout: 'default',
})
// const userStore = useUserStore()
const route = useRoute()
const { id } = route.params as { id: string }
const activeTab = ref(null)
const commentHeight = ref(800)
const detailsInfo = ref({})
const currentUserInfo = ref<any>({})

// 先获取用户信息 再获取版本信息
const versionByWorkInfo = ref([])
async function getInfo() {
  try {
    const res = await request.get(`/model/selectModelById?id=${id}`)
    if (res.code === 200) {
      detailsInfo.value = res.data
      // detailsInfo.value.styleList =JSON.parse(res.data.styleList)
      // // 1翻译
      try {
        const res1 = await request.get(`/ModelVersion/finbyid?id=${res.data.id}`)// 获取版本
        if (res1.code === 200 && res1.data.length > 0) {
          versionByWorkInfo.value = res1.data
          versionByWorkInfo.value.forEach((item) => {
            item.sampleImagePaths = item.sampleImagePaths.split(',')
          })
          nextTick(() => {
            activeTab.value = versionByWorkInfo.value[0].id
          })
        // const commentRes = await request.get(`/WorkFlowComment/comment/${res.data.id}`)
        }
      }
      catch (error) {
        console.log(error)
      }

      // // 获取当前作品的用户信息
      try {
        const res = await request.get(`/system/user/selectUserById?id=${detailsInfo.value.userId}`)
        if (res.code === 200) {
          currentUserInfo.value = res.data
        }
      }
      catch (error) {
        console.log(error)
      }
      getAttention()
    }
  }
  catch (error) {
    console.log(error)
  }
}
getInfo()

// 获取用户点赞/粉丝/关注数量
interface SelectUserInfo {
  attention: number
  bean: number
  imageLikeNum:number
  modelDownLoadNum:number
  modelLikeNum:number
  modelRunNum:number
}
const selectUserInfo = ref<SelectUserInfo>({
  attention: 0,
  bean: 0,
  imageLikeNum:0,
  modelDownLoadNum:0,
  modelLikeNum:0,
  modelRunNum:0,
})

// 获取点赞粉丝等的数量
async function getAttention() {
  try {
    const res = await request.get(`/attention/selectUserInfo?userId=${detailsInfo.value.userId}`)
    if (res.code === 200) {
      selectUserInfo.value = res.data
    }
  }
  catch (err) {
    console.log(err)
  }
}

// 举报/编辑/删除
const isDelete = ref(false)
async function handleSelect(event: Event, type: string) {
  event.stopPropagation() // 阻止事件冒泡
  if (type === 'report') {
    await request.get(`/WorkFlow/report?id=${id}`) // 举报
  }
  else if (type === 'edit') {
    router.push({
      path: `/publish-model`,
      query: {
        type: 'edit',
        id: detailsInfo.value.id,
      },
    })
  }
  else {
    isDelete.value = true
  }
}

// 删除
async function onDelete() {
  try {
    const res = await request.get(`/model/delete?id=${detailsInfo.value.id}`)
    if (res.code === 200) {
      message.success('删除成功')
      isDelete.value = false
      router.push('/personal-center')
    }
  }
  catch (err) {
    console.log(err)
  }
}

// 关注用户/取消关注
async function onChangeAttention() {
  try {
    const res = await request.get(`/attention/addAttention?userId=${detailsInfo.value.userId}`)
    if (res.code === 200) {
      if (res.data) {
        detailsInfo.value.isAttention = 1
        message.success('关注成功')
      }
      else {
        detailsInfo.value.isAttention = 0
        message.success('取消关注成功')
      }
    }
  }
  catch (err) {
    console.log(err)
  }
}

// 点赞
async function onLike() {
  try {
    const res = await request.get(`/ModelComment/modelLike?modelId=${detailsInfo.value.id}`)
    if (res.code === 200) {
      detailsInfo.value.isLike === 0 ? detailsInfo.value.isLike = 1 : detailsInfo.value.isLike = 0
      if (detailsInfo.value.isLike === 0) {
        message.success('取消点赞成功')
      }
      else {
        message.success('点赞成功')
      }
    }
  }
  catch (err) {
    console.log(err)
  }
}
</script>

<template>
  <div class="flex justify-center">
    <div class="w-[1125px] p-4">
      <div class="flex items-center">
        <div class="text-[26px] font-bold mr-4">
          {{ detailsInfo.modelName }}
        </div>

        <n-tooltip trigger="hover">
          <template #trigger>
            <div class="flex items-center bg-[#f4f5f9] px-2 rounded-full">
              <component :is="Play" class="h-[14px] w-[14px] text-black menu-icon m-1" />
              <span> {{ detailsInfo.reals || 0 }} </span>
            </div>
          </template>
          在线生成数
        </n-tooltip>

        <n-tooltip trigger="hover">
          <template #trigger>
            <div class="flex items-center bg-[#f4f5f9] px-2 rounded-full mx-4">
              <component
                :is="Download"
                class="h-[14px] w-[14px] text-black menu-icon m-1"
              />
              <span> {{ detailsInfo.numbers || 0 }} </span>
            </div>
          </template>
          下载数
        </n-tooltip>

        <n-tooltip trigger="hover">
          <template #trigger>
            <div class="flex items-center bg-[#f4f5f9] px-2 rounded-full">
              <img src="@/assets/img/heart.png" class="w-[14px] h-[14px] mr-1" alt="">
              <span>{{ detailsInfo.likeNum || 0}} </span> 
            </div>
          </template>
          点赞数
        </n-tooltip>
      </div>

      <div class="flex items-center mt-3 mb-5">
        <div
          v-for="(item, index) in detailsInfo.styleList"
          :key="index"
          class="text-[12px] bg-[#ebf2fe] p-1 px-2 text-[#557abf] mr-4 rounded-md"
        >
          {{ item }}
        </div>
      </div>
      <div class="flex w-full gap-1">
        <div class="w-2/3">
          <div class="w-full">
            <n-tabs v-model:value="activeTab" type="line" animated>
              <n-tab-pane
                v-for="(item, index) in versionByWorkInfo"
                :key="index"
                :name="item.id"
                :tab="item.versionName"
              >
                <!-- 显示最后一步上传图片的图片 -->
                <div class="grid grid-cols-2 gap-2.5 box-border">
                  <img
                    v-for="(subItem, subIndex) in item.sampleImagePaths"
                    :key="subIndex"
                    :src="subItem"
                    class="w-full h-[300px]"
                    alt=""
                  >
                </div>

                <div v-if="detailsInfo.original === 1" class="font-bold text-[20px] my-6">
                  转载自作者: {{ detailsInfo.authorName }}
                </div>
                <!-- 富文本中输入的文字 图片 -->
                <div class="w-full mt-2">
                  <div v-html="item.versionDescription" />
                </div>
              </n-tab-pane>
            </n-tabs>
          </div>
          <div class="mt-4">
            <div style="padding: 20px">
              <NConfigProvider>
                <NMessageProvider>
                  <BaseComment v-if="detailsInfo.id" type="model" :height="commentHeight" :details-info="detailsInfo" />
                </NMessageProvider>
              </NConfigProvider>
            </div>
          </div>
        </div>
        <div class="w-1/3 mt-3">
          <div
            class="flex justify-between text-[#a3a1a1] text-[12px] items-center -ml-60"
          >
            <div class="flex justify-end">
              <div v-if="detailsInfo.createTime" class="mr-2">
                首发时间{{ detailsInfo.createTime }}
              </div>
              <div v-if="detailsInfo.updateTime">
                更新时间：{{ detailsInfo.updateTime }}
              </div>
            </div>

            <div class="flex items-center relative">
              <n-icon size="20" :color="detailsInfo.isLike === 0 ? '#ccc' : '#ff0000'" @click="onLike">
                <Heart class="cursor-pointer" />
              </n-icon>
              <div class="group relative">
                <component
                  :is="EllipsisVertical"
                  class="h-[18px] w-[48px] text-[#557abf] cursor-pointer"
                />
                <div
                  class="absolute right-0 top-[10px] 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 class="menu-item hover:bg-gray-100 py-2 cursor-pointer rounded-lg" @click="(event) => handleSelect(event, 'report')">
                    举报
                  </div>
                  <div
                    class="menu-item hover:bg-gray-100 py-2 cursor-pointer rounded-lg"
                    @click="(event) => handleSelect(event, 'edit')"
                  >
                    编辑
                  </div>
                  <div class="menu-item hover:bg-gray-100 py-2 cursor-pointer rounded-lg" @click="(event) => handleSelect(event, 'delete')">
                    删除
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="flex items-center mt-10 p-2 bg-[#f3f5f9] w-full rounded-md h-[80px] box-border"
          >
            <div class="w-[70px] h-[70px] rounded-full overflow-hidden mr-4">
              <client-only>
                <NAvatar
                  class="w-full h-full mr-2 block"
                  round
                  size="small"
                  :src="currentUserInfo.avatar"
                />
              </client-only>
            </div>
            <div class="flex-1">
              <div class="flex items-center justify-between">
                <div class="flex-1">
                  <client-only>
                    <div class="text[20px] font-bold">
                      {{ currentUserInfo.nickName }}
                    </div>
                  </client-only>
                  <!-- 0代表原创 1代表转载 -->
                  <div v-if="detailsInfo.original === 0" class="text-[14px]">
                    原创作者
                  </div>
                </div>
                <div class="flex-1 flex justify-end">
                  <div class="flex items-center font-bold px-1 justify-center w-24 h-10 rounded-full text-[#426af7] border-2 border-[#426af7] border-solid cursor-pointer" @click="onChangeAttention">
                    <n-icon v-if="detailsInfo.isAttention === 0" size="20" class="mr-2">
                      <PersonAddOutline />
                    </n-icon>
                    {{ detailsInfo.isAttention === 1 ? '已关注' : '关注' }}
                  </div>
                </div>
              </div>

              <div class="flex items-center text-[#969798]">
                <component
                  :is="CircleUser"
                  class="h-[12px] w-[12px] text-black menu-icon m-1 text-[#969798] m-0"
                />
                <span class="mr-2"> {{ selectUserInfo.bean }} </span>
                <!-- <component
                  :is="HardDriveUpload"
                  class="h-[12px] w-[14px] text-black menu-icon m-1 text-[#969798]"
                />
                <span class="mr-2"> 2 </span> -->
                <component
                  :is="Play"
                  class="h-[12px] w-[12px] text-black menu-icon m-1 text-[#969798]"
                />
                <span class="mr-2"> {{ selectUserInfo.modelRunNum }} </span>
                <component
                  :is="Download"
                  class="h-[12px] w-[12px] text-black menu-icon m-1 text-[#969798]"
                />
                <span class="mr-2"> {{ selectUserInfo.modelDownloadNum }} </span>
              </div>
            </div>
          </div>
          <!-- 不支持的bg #b1b2b2 -->
          <div
            class="flex items-center justify-center mt-4 w-full text-white bg-[#3c7af6] w-full rounded-md h-[50px] cursor-pointer"
          >
            <component
              :is="Play"
              class="h-[20px] w-[20px] text-white menu-icon m-1 text-[#969798]"
            />
            <span class="mr-1"> 立即生图</span>
          </div>
          <div class="flex gap-y-2">
            <div class="flex flex-1 items-center justify-center bg-[#eceef4] h-[50px] mt-4 mr-1 rounded-md">
              <component
                :is="SquarePlus"
                class="h-[20px] w-[20px] text-black menu-icon m-1 text-[#969798]"
              />
              <span class="mr-1">加入模型课</span>
            </div>
            
            <div
              class="flex flex-1 items-center bg-gradient-to-r from-[#ffe9c8] to-[#ffd264] justify-center ml-1 mt-4 text-black bg-[#eceef4] w-full rounded-md h-[50px] cursor-pointer"
            >
              <component
                :is="Download"
                class="h-[20px] w-[20px] text-black menu-icon m-1 text-[#969798]"
              />
              <span class="mr-1"> 下载 (122.22MB) </span>
            </div>
          </div>
          

          <!-- <div style="background: linear-gradient(135deg,#3cc9ff, #8fa6ff, 41%, #d8b4ff 74%,#326bff)" class="flex items-center justify-center mt-4 w-full h-14 text-black bg-[#fff] w-full rounded-md h-[80px] cursor-pointer hover:bg-[#f1f2f7]">
            <component :is="Download" class="h-[20px] w-[20px] text-black menu-icon m-1 text-[#969798]" />
            <span class="mr-1">
              下载客户端
            </span>
          </div> -->
          <n-modal
            v-model:show="isDelete"
            :mask-closable="false"
            preset="dialog"
            title="提示！"
            content="确定要将模型删除? 模型删除后无法找回"
            negative-text="取消"
            positive-text="确认"
            @negative-click="onDelete"
            @positive-click="onDelete"
          />
          <div />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.header-num {
  @apply flex items-center bg-[#f4f5f9] px-2 rounded-full;
}
.header-tag {
  @apply flex items-center bg-[#f4f5f9] px-2 rounded-full;
  display: flex;
  align-self: flex-start;
  justify-content: space-between;
}
.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab,
.n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab {
  color: #949494;
}
.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active,
.n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab--active {
  color: #000;
  font-weight: 700;
  font-size: 24px;
}

.n-tabs .n-tabs-bar {
  position: absolute;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, #173eff 0%, #1b7dff 100%);
  border-radius: 2px;
  transition:
    left 0.2s var(--n-bezier),
    max-width 0.2s var(--n-bezier),
    opacity 0.3s var(--n-bezier),
    background-color 0.3s var(--n-bezier);
}
</style>
