// ==UserScript==
// @name         desty Shopee Collection Plugin
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @license      MIT
// @description  Only applicable for collecting similar data https://shopee.co.id/product/shop_id/item_id The address
// @author       Gao yongshun
// @match        *://shopee.co.id/*
// @icon         https://deo.shopeemobile.com/shopee/shopee-pcmall-live-sg/assets/icon_favicon_1_32.0Wecxv.png
// @grant        none
// @require      http://code.jquery.com/jquery-3.6.0.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js
// @run-at       document-body
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    // 代码1 - 创建弹窗的 HTML 结构
    const modalHTML = `
        <div id="customModal" style="display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4);">
            <div style="background-color: #fefefe; margin: 20px auto 0; padding: 20px; border: 1px solid #888; width: 200px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between;">
                <span class="content" style="font-weight: bold;">Custom Content</span>
                <span class="close" style="color: rgba(249, 78, 47); float: right; font-size: 28px; font-weight: bold; cursor: pointer;">&times;</span>
            </div>
        </div>
    `;

    // 将弹窗 HTML 结构插入到页面中
    document.body.insertAdjacentHTML('beforeend', modalHTML);

    // 获取弹窗元素
    const modal = $('#customModal');
    const closeBtn = $('#customModal .close');
    const contentDom = $('#customModal .content')

    // 显示弹窗
    function showModal(content) {
        contentDom.text(content)
        modal.show();
        // 设置定时器，3秒后自动关闭弹窗
         setTimeout(() => {
            modal.hide();
        }, 3000);
    }

    // 绑定关闭按钮的点击事件
    closeBtn.on('click', () => {
        modal.hide();
    });

    // 代码2 - 创建功能区域的 dom 元素
    // 后续增加功能按钮请在此处维护
    const buttons = [
        { id: 'colectButton', content: 'collect'}
    ];

    const floatingButtonsContainer = document.createElement('div');
    floatingButtonsContainer.id = 'floating-buttons-container';
    document.body.appendChild(floatingButtonsContainer);

    buttons.forEach(button => {
        const buttonElement = document.createElement('a');
        buttonElement.id = button.id;
        buttonElement.className = 'floating-button';
        buttonElement.innerHTML = button.content;
        floatingButtonsContainer.appendChild(buttonElement);
    });

    const customStyle = document.createElement('style');
    customStyle.innerHTML = `
        #floating-buttons-container {
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 50%;
            right: 5px;
            transform: translateY(-50%);
            z-index: 9999;
        }

        .floating-button {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(249, 78, 47);
            color: #ffffff;
            width: 50px;
            height: 50px;
            border-radius: 5px;
            font-weight: bold;
            font-size: 14px;
            margin-top: 10px;
            text-align: center;
        }
    `;
    document.head.appendChild(customStyle);

    // 代码3 - 功能按钮绑定事件
    const requestPath = '/api/v4/pdp/get_pc'
    const filePath = 'https://down-id.img.susercontent.com/file/'
    // 绑定采集事件
    $('#colectButton').on('click', function(e) {
        e.preventDefault()
        const origin = window.location.origin
        const pathArr = window.location.pathname.split('/')
        axios.get(requestPath,{
            baseURL: origin,
            params: {
                shop_id: pathArr[2],
                item_id: pathArr[3]
            }
        }).then((res) => {
            if(res.data.error) {
                showModal('Collection failed')
                return
            }
            showModal('Collection successful')
            const data = res.data.data
            // 存储采集信息
            const form = {}
            form.title = data.item.title
            form.item_id = data.item.item_id
            form.price = data.item.price
            form.currency = data.item.currency
            form.imgs = data.product_images.images.map(img => filePath + img )
            console.log('Collected data',form)
            // 将数据上传到后台
        })
    })
})();