<template>

    <Head>
        <Title>{{ dataDetail.news_title }}-{{ tdk?.tdk_title }}</Title>
        <Meta :content=tdk?.tdk_keyword name="keywords" />
        <Meta :content=tdk?.tdk_description name="description" />
    </Head>

    <Header></Header>

    <div class="container details-pos-box">

        <div class="details-big-box row">

            <!-- 左边 -->
            <div class="details-left-box col-lg-8 col-md-6 col-sm-12">
                <div class="preview-box">
                    <Magnify :imgSrc='checkimg' :imgBigSrc='checkimg' :imgBigRect='imgBigRect' rate="200">
                    </Magnify>
                    <div class="exzoom">
                        <div class="exzoom_nav">
                            <p class="exzoom_nav_inner">
                                <span v-for="(item, i) in detail_list_img" :key="i" @mouseenter="changetype">
                                    <span :class="count - 1 == i ? 'exzoom_span current' : 'exzoom_span'">
                                        <img :src="item" width="60">
                                    </span>
                                </span>
                            </p>
                        </div>
                    </div>
                    <p class="exzoom_btn">
                        <a href="javascript:void(0);" class="exzoom_prev_btn" @click="exzoo_click(0)">
                            <el-icon>
                                <Back />
                            </el-icon>
                        </a>
                        <a href="javascript:void(0);" class="exzoom_next_btn" @click="exzoo_click(1)">
                            <el-icon>
                                <Right />
                            </el-icon>
                        </a>
                    </p>
                </div>

                <div clas="left-detail-pos-box">
                    <div class="left-detail-box">
                        <div class="left-detail-title">简介</div>
                        <div class="left-detail-content">{{ dataDetail.intro }}</div>
                    </div>
                    <div class="content-line"></div>
                    <div class="left-detail-box">
                        <div class="left-detail-title">描述</div>
                        <div class="left-detail-content" v-html="dataDetail.content"></div>
                    </div>
                </div>
            </div>

            <!-- 右边边 -->
            <div class="details-right-box col-lg-4 col-md-6 col-sm-12">
                <h1 class="details-title">Horse Animset Pro (Riding System)</h1>
                <div class="content-user-box">
                    <div class="content-user-img-box">
                        <el-avatar class="content-user-img" :size="30" :src=dataDetail.user_img />
                        <div class="content-user-name f1">{{ dataDetail.user_name }}</div>
                    </div>
                    <div class="content-user-content-box">
                        <div class="content-rate-icon-box">
                            <div class="content-category">{{ dataDetail.categoty_name }}</div>
                        </div>
                        <div class="content-rate-line">|</div>
                        <div class="content-rate-icon-box">
                            <el-icon class="content-rate-icon">
                                <StarFilled />
                            </el-icon>
                            <div class="content-rate-num">({{ dataDetail.collect_num }})</div>
                        </div>
                    </div>
                </div>
                <div class="content-price">{{ dataDetail.price ? 0 : "免费" }}</div>
                <div class="content-line"></div>
                <div class="content-rate-icon-box detail-icon-box">
                    <el-icon class="content-rate-icon detail-rate-icon">
                        <View />
                    </el-icon>
                    <div class="content-rate-num detail-rate-text">{{ dataDetail.view_num }} 浏览量</div>
                </div>

                <!-- <div class="play-btn-box">
                    <button class="play-btn">
                        <div class="btn-text">P L A Y</div>
                        <div id="clip">
                            <div id="leftTop" class="corner"></div>
                            <div id="rightBottom" class="corner"></div>
                            <div id="rightTop" class="corner"></div>
                            <div id="leftBottom" class="corner"></div>
                        </div>
                        <span id="rightArrow" class="arrow"></span>
                        <span id="leftArrow" class="arrow"></span>
                    </button>
                </div> -->

                <div class="btn-box">
                    <button class="btn" @click="redirectToAnotherProject(dataDetail.download_link)">下载工程</button>
                    <div class="btn-collect">
                        <img @click="handleCollect" :src=collectImg>
                    </div>
                </div>
                <div class="btn-box">
                    <button class="btn btn-child"
                        @click="redirectToAnotherProject(dataDetail.material_link)">下载资源</button>
                </div>
                <div class="btn-box">
                    <button class="btn btn-child" @click="redirectToAnotherProject(dataDetail.note_link)">查看笔记</button>
                </div>

                <div class="right-detail-intro-pos-box">
                    <div class="content-line"></div>
                    <div class="rightd-detail-intro-box">
                        <div class="rightd-detail-intro-title">文件大小</div>
                        <div class="rightd-detail-intro-content">{{ dataDetail.flie_size }}</div>
                    </div>
                    <div class="rightd-detail-intro-box">
                        <div class="rightd-detail-intro-title">发布日期</div>
                        <div class="rightd-detail-intro-content">{{ dataDetail.send_time }}</div>
                    </div>
                    <div class="rightd-detail-intro-box">
                        <div class="rightd-detail-intro-title">Unity 版本</div>
                        <div class="rightd-detail-intro-content">{{ dataDetail.unity_version }}</div>
                    </div>
                    <div class="rightd-detail-intro-box">
                        <div class="rightd-detail-intro-title">URP 支持</div>
                        <div class="rightd-detail-intro-content">{{ dataDetail.is_urp ? '支持' : '不支持' }}</div>
                    </div>
                    <div class="Instructions">仅供交流学习研究使用，版权归原作者所有，禁止商业使用。【如有侵权请联系删除】</div>
                </div>

                <!-- <div class="content-line"></div> -->

                <!-- 评论 -->
                <div class="right-comment-pos-box">
                    <div class="left-detail-title">评论</div>

                    <div class="right-comment-input-box">
                        <div class="content-comment-user-img-box">
                            <el-avatar class="content-comment-user-img" :size="50" :src=dataDetail.user_img />
                            <div class="content-user-name f1">{{ dataDetail.user_name }}</div>
                        </div>

                        <div class="comment-input-box">
                            <el-input v-model="commentContent" :rows="3" type="textarea" placeholder="欢迎您留下宝贵的见解！" />
                        </div>
                    </div>
                    <div class="comment-btn">
                        <el-button type="primary" @click="handleSendComment">发送评论</el-button>
                    </div>


                    <div v-for="item in dataDetail.comment_list">
                        <div class="custom-comment-big-box">
                            <div class="custom-comment-avatar">
                                <el-avatar class="content-comment-user-img" :size="45" :src=item.user_img />
                            </div>
                            <div class="custom-comment-content-box">
                                <div class="custom-comment-content-user-name">{{ item.user_name }}</div>
                                <div class="custom-comment-content-text">{{ item.comment_content }}</div>
                                <div class="custom-comment-content-time">{{ item.send_time }}</div>
                            </div>
                        </div>
                        <div class="content-line"></div>
                    </div>

                </div>

            </div>

        </div>

        <!-- <div class="details-pos-box">
            <div class="details-title-box">
                <div class="details-title"></div>
            </div>
        </div> -->

    </div>


    <Final></Final>
    <PopupMessageUs></PopupMessageUs>
</template>

<script setup>
import { View } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus'

// 预对接
let dataDetail = ref({
    id: 1,
    title: "Horse Animset Pro (Riding System)",
    user_id: 1,
    user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
    user_name: "西瓜西了西",
    collect_num: 3086,
    view_num: 506,
    categoty_name: "模型 > 动物",
    price: 0,
    download_link: "https://drive.aerwen.net/d/aerwen/unity%E6%BA%90%E7%A0%81/Class/%E9%A1%BA%E8%81%8C%E5%AD%A6%E4%B9%A0%E9%80%9A%E8%AF%BE%E7%A8%8B/%E7%BB%93%E8%AF%BE/9%E4%BB%BB%E5%8A%A1%EF%BC%9A%E5%88%86%E6%95%B0%E7%BB%9F%E8%AE%A1.unitypackage",
    material_link: "",
    note_link: "https://blog.csdn.net/weixin_60435181/article/details/139512841?spm=1001.2014.3001.5501",
    is_collect: false,
    is_urp: false,
    flie_size: "8.2MB",
    send_time: "2024-03-01",
    unity_version: "2019.4.23或更高",
    comment_list: [
        {
            user_id: 1,
            user_img: "https://thirdqq.qlogo.cn/ek_qqapp/AQIMauLMSKSQoxA7pKYDZXYRTtVrZrOjiarOroKgySzPZibMamTMEfys5XN3vCQwRQzCajRylXORhbmTSDZCTIV0djV5ybY2dOF0cqxYQzgicmQ7pXFLXs/100",
            user_name: "hqbb",
            send_time: "2024-03-03",
            comment_content: "大佬牛逼！",
        },
        {
            user_id: 1,
            user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
            user_name: "music键",
            send_time: "2024-03-03",
            comment_content: "6666",
        },
        {
            user_id: 1,
            user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
            user_name: "123",
            send_time: "2024-03-03",
            comment_content: "6666",
        },
        {
            user_id: 1,
            user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
            user_name: "测试",
            send_time: "2024-03-03",
            comment_content: "6666",
        },
        {
            user_id: 1,
            user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
            user_name: "music键",
            send_time: "2024-03-03",
            comment_content: "6666",
        },
        {
            user_id: 1,
            user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
            user_name: "music键",
            send_time: "2024-03-03",
            comment_content: "6666",
        },
        
    ],

    intro: "Riding System using the Animal Controller to make your character Ride any creature",
    content: "<p><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>✅✅升级至 4.2+ ✅✅<br></strong></span></p><p style=\"text-align: start;\">已移除大量脚本，所以为了顺利升级，请遵循以下步骤：</p><p style=\"text-align: start;\">1- 移除 [Malbers Animation\\Common] 文件夹</p><p style=\"text-align: start;\">2- 将 [Horse Animset Pro 4.2+] 再次导入项目<br><a href=\"https://malbersanimations.gitbook.io/animal-controller/quickstart/upgrading-to-ac-1.2-hap-4.2\" target=\"_blank\" style=\"text-align: start;\">升级过程中的常见问题 (AC)</a><br><br><br></p><p style=\"text-align: start;\">这就是你的终极骑行系统！<br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>高质量的动画<br></strong></span></p><p style=\"text-align: start;\">Horse AnimSet Pro(HAP) 是一套动画框架和骑行系统控制器，基于根运动，适合于任何人形角色。该资源开始时就像是一个简单的马模型和动画包，但经过不断发展，它已经成为一套强大而灵活的骑行控制器。它包括一个来自于标准资源的基础角色控制器，但可以与你创建的更高级的角色控制器搭配使用，也可以与商店中任何让人惊叹的角色控制器（TCP 或 FPC）搭配使用。</p><p style=\"text-align: start;\">该资源包在不断扩展，每次更新都推出了更多功能和动画效果！<br></p><p style=\"text-align: start;\"><a href=\"http://bit.ly/HAPIntegrations\" target=\"_blank\">集成</a> | <a href=\"http://bit.ly/2DuntpT\" target=\"_blank\">骑上任何生物</a> | <a href=\"http://bit.ly/HorseWebGL\" target=\"_blank\">网络演示</a> | <a href=\"http://goo.gl/BLTI4t\" target=\"_blank\">论坛</a> | <a href=\"http://bit.ly/MalbersHAPDoc\" target=\"_blank\">手册<br><br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>⚙ 功能 ⚙<br></strong></span></a></p><p style=\"text-align: start;\">马：</p><p style=\"text-align: start;\">- 80 个动画剪辑</p><p style=\"text-align: start;\">- 2 种马的风格（现实、多边形艺术）</p><p style=\"text-align: start;\">- 针对每种马的风格提供多种纹理集合</p><p style=\"text-align: start;\">- LOD</p><p style=\"text-align: start;\">- 盔甲、缰绳和马鞍</p><p style=\"text-align: start;\">- 针对缰绳和马鬃的 Unity 布料模拟不能用于 Unity 2019</p><p style=\"text-align: start;\">- 声音</p><p style=\"text-align: start;\">- 基础脚步系统（足迹声音和足迹粒子）</p><p style=\"text-align: start;\">- 用于管理所有 Malbers Animations 生物的动物控制器</p><p style=\"text-align: start;\">- 状态：游泳、摔倒、跳跃、攻击、死亡、行走、小跑、慢跑、疾驰、冲刺</p><p style=\"text-align: start;\">- 定向伤害系统</p><p style=\"text-align: start;\">- 扫射</p><p style=\"text-align: start;\">- 镜头基础输入</p><p style=\"text-align: start;\">- 地形校正</p><p style=\"text-align: start;\">- 支持 NavMesh Agent。基础 AI</p><p style=\"text-align: start;\">- 移动端友好</p><p style=\"text-align: start;\">骑行者：</p><p style=\"text-align: start;\">- 132 个动画剪辑（可用于人形角色设定，以获得更好的兼容性）</p><p style=\"text-align: start;\">- 附带 1 个纹理集合的牛仔模型</p><p style=\"text-align: start;\">- 骑行者系统（TCP 和 FPC）</p><p style=\"text-align: start;\">- 骑行者战斗系统：弓箭、手枪、混战（即将推出长矛、步枪、魔法物品、投掷物）</p><p style=\"text-align: start;\">- 非常非常基础的库存系统，用以演示骑行者 - 战斗系统与外部库存的兼容性。</p><p style=\"text-align: start;\">实用工具：</p><p style=\"text-align: start;\">- 材料更换器</p><p style=\"text-align: start;\">- 混合形状管理器</p><p style=\"text-align: start;\">- 网格更换器</p><p style=\"text-align: start;\">- 动画器消息行为</p><p style=\"text-align: start;\">- 动画器声音行为</p><p style=\"text-align: start;\">- 头部瞄准</p><p style=\"text-align: start;\">- 武器（模型、纹理和脚本）</p><p style=\"text-align: start;\">- 动物基础 AI</p><p style=\"text-align: start;\">- 带镜头状态的基础镜头设置系统。</p><p style=\"text-align: start;\">- 兼容所有 Malbers 动物<br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><em>- 兼容 Invector TCP、Ootii MC，即将推出更多集成！未来更新<br></em></span></p><p style=\"text-align: start;\">联系人：<a href=\"mailto:malbers.shark87@gmail.com\" target=\"_blank\">malbers.shark87@gmail.com</a></p><p style=\"text-align: start;\">查看日志以了解版本变化</p><p style=\"text-align: start;\"><br></p><p style=\"text-align: start;\"><br></p>"
})
let detail_list_img = ref([
    "https://assetstore-cdn-china-v1.unitychina.cn/key-image/b7ede01a-3ccc-4155-9383-33a6976056c1.webp",
    "https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/0f73facc-8e8c-4b94-8de3-67ca8386f5ac.webp",
    "https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/1cc96654-37ad-4b7f-ae1b-0dead9d9fd76.webp",
    "https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
    "https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
    "https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
    "https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
    "https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
])

// 参数
const { l, locale } = useI18n();
const route = useRoute()
const checkimg = ref('https://assetstore-cdn-china-v1.unitychina.cn/key-image/b7ede01a-3ccc-4155-9383-33a6976056c1.webp')
const imgBigRect = ref({ h: 50, w: 50, l: 51, t: 0 })
const count = ref(1)
const collectImg = ref("/img/details/heart_null.png")
const commentContent = ref("")

// 方法
const changetype = function () {
    let element = document.getElementsByClassName('exzoom_span')
    for (let i = 0; i < element.length; i++) {
        element[i].addEventListener('mouseenter', function () {
            for (let s = 0; s < element.length; s++) {
                element[s].classList.remove('current')

            }
            element[i].classList.add('current')
            count.value = i + 1;
            checkimg.value = detail_list_img.value[count.value - 1]
        });
    }
    console.log(checkimg.value);
}

const exzoo_click = function (val) {

    if (val == 1) {

        if (count.value == detail_list_img.value.length) {
            count.value = 1
            checkimg.value = detail_list_img.value[count.value - 1]
        } else {
            // console.log(checkimg.value);
            count.value++
            checkimg.value = detail_list_img.value[count.value - 1]
        }
    } else {

        if (count.value <= 1) {
            count.value = detail_list_img.value.length
            checkimg.value = detail_list_img.value[count.value - 1]
        } else {
            count.value--
            checkimg.value = detail_list_img.value[count.value - 1]
        }
    }
    console.log(checkimg.value);
}


// 点击收藏
const handleCollect = function () {
    if (dataDetail.value.is_collect == false) {
        collectImg.value = "/img/details/heart_full.png"
        dataDetail.value.is_collect = true
        ElMessage({
            message: '收藏成功！',
            type: 'success',
        })
    }
    else {
        collectImg.value = "/img/details/heart_null.png"
        dataDetail.value.is_collect = false
        ElMessage({
            message: '取消收藏',
            type: 'success',
        })
    }
}

// 初始化收藏状态
const setCollect = function () {
    if (dataDetail.value.is_collect == true) {
        collectImg.value = "/img/details/heart_full.png"
    }
    else {
        collectImg.value = "/img/details/heart_null.png"
    }
}

// 访问其他网站
const redirectToAnotherProject = function (url) {
    const returnUrl = window.location.href;
    //   window.open =  url + '?returnUrl=' + encodeURIComponent(returnUrl);//本页面打开
    window.open(url);//新标签打开
}

// 发送评论
const handleSendComment = function () {

}

onMounted(() => {
    fontSizeReactive({
        880: 1,
        480: 1,
    })

    setCollect()
})



// --- 接口对接 ---
// 获取新闻详情
// useFetch('/api/news/getinfoArticleInfo', { params: { news_id: route.params.id, locale: locale.value } }).then(res => {
//     dataDetail.value = JSON.parse(res.data.value).data
// })

// 获取Tdk
let tdk = ref({})
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
    tdk.value = JSON.parse(res.data.value).data
})
// 添加流量访问
useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })

</script>

<style scoped src="~/assets/css/business/list/list_details/index.scss"></style>
<style scoped src="~/assets/css/business/list/list_details/media.scss"></style>