// ==UserScript==
// @name         Keylol Chinaplay Table
// @namespace    https://greasyfork.org/users/34380
// @version      20231112
// @description  在购买心得 Chinaplay 板块的帖子一楼开始位置添加折扣表格，折后价和史低可排序。
// @supportURL   https://keylol.com/t920709-1-1
// @match        https://keylol.com/t*
// @match        https://keylol.com/forum.php?mod=viewthread&tid=*
// @grant        none
// @downloadURL none
// ==/UserScript==

(function () {
    'use strict';

    if (document.querySelector('.subforum_left_title_left_up').innerText.match(/Chinaplay/)) {
        document.querySelector('head').insertAdjacentHTML('beforeend', `<style> .td-wide-80 { width:80px; } .td-wide-50 { width:50px; } .hidden1,.hidden2,.hidden3 { display:none; }</style>`);

        const html_table = `<br><div class="sff_collapse"><div class="sff_collapse_b" onclick="var s = this.parentNode; while (!s.classList.contains('sff_collapse')) {s = s.parentNode;} if (s.classList.contains('sff_collapsed')) {s.classList.remove('sff_collapsed');} else {s.classList.add('sff_collapsed');}"><span class="sff_collapse_t">&gt;</span> 折扣表格</div><div class="sff_collapse_d">
            <span id="checkbox-rows"><label><input id="cb-tr-higher" type="checkbox" value="tr-higher"></input>高于史低</label><label><input id="cb-tr-not-wish" type="checkbox" value="tr-not-wish"></input>非愿望单</label><label><input id="cb-tr-own" type="checkbox" value="tr-own"></input>已拥有</label></span>
            <table id="table-chinaplay" class="t_table"><thead><tr><td data-col="index" data-reverse="1">游戏名</td><td class="td-wide-80" data-col="coupon" data-reverse="-1">折后价</td><td class="td-wide-80" data-col="hist" data-reverse="-1">史低</td><td>区域</td><td class="td-wide-50">截止</td><td>折扣码</td><td class="td-wide-50">加购</td></tr></thead><tbody></tbody></table>
            <div><a href="javascript:;" onclick="var s = this.parentNode; while (!s.classList.contains('sff_collapse')) {s = s.parentNode;} s.scrollIntoView(true); if (s.classList.contains('sff_collapsed')) {s.classList.remove('sff_collapsed');} else {s.classList.add('sff_collapsed');}">点击隐藏</a></div></div></div>`;

        const floor1 = document.querySelector('.t_f');
        const anchor = floor1.querySelector('.t_f .pstatus') || floor1.querySelector('.original_text_style1');
        if (anchor) {
            anchor.insertAdjacentHTML('afterend', '' + html_table);
        } else {
            floor1.insertAdjacentHTML('afterbegin', html_table);
        }
        const cb_rows = floor1.querySelector('#checkbox-rows');
        const cb_row_checkeds = ['cb-tr-higher', 'cb-tr-not-wish', 'cb-tr-own'];
        cb_row_checkeds.forEach((v) => {
            cb_rows.querySelector("#" + v).checked = true;
        });

        const tbody = document.querySelector('#table-chinaplay > tbody');

        // table col > game discount hist region date code cart link
        let game;
        let discount = 0;
        let hist = 0;
        let region;
        let date;
        let code = '';
        let link;

        let trs = [];
        let i_start = 0;
        let i_end = 0;
        const nodes = floor1.childNodes;
        nodes.forEach((node) => {
            node.childNodes.forEach((_node) => {
                getContent(_node);
            });
        });
        newTable();

        setTimeout(() => {
            tbody.querySelectorAll('tr > td:nth-child(1) > a').forEach((node) => {
                if (!node.classList.contains('steam-info-wish')) {
                    if (node.classList.contains('steam-info-own')) {
                        node.parentNode.parentNode.classList.add('tr-own','tr-not-wish');
                    } else {
                        node.parentNode.parentNode.classList.add('tr-not-wish');
                    }
                }
            });
        },5000);

        function newTable() {
            let html = '';
            trs.forEach((tds, i) => {
                const is_lower = tds[1] <= tds[2];
                html = html + `<tr class="${is_lower ? '' : 'tr-higher'}"><td data-index="${i}"><a href="${tds[7]}" target="_blank">${tds[0]}</a></td><td data-coupon="${parseFloat(tds[1])}">${is_lower ? '<span style="background-color:Wheat">' + tds[1] + '</span>' : tds[1]}</td><td data-hist="${parseFloat(tds[2])}">${tds[2]}</td><td>${tds[3]}</td><td>${tds[4]}</td><td>${tds[5]}</td><td><a href="${tds[6]}" target="_blank">加购</a></td></tr>`;
            });
            tbody.innerHTML = html;
        }

        function getContent(node) {
            if (node.nodeName == 'SPAN' || node.nodeName == 'STRONG') {
                node.childNodes.forEach((_node) => {
                    getContent(_node);
                });
            } else if (node.nodeName == 'H1') {
                const matched = node.innerText.match(/(\d+(\.\d+)?)(.*)（(.*)）/);
                if (matched) {
                    date = matched[1];
                    region = matched[4];
                    i_end = trs.length;
                    for (; i_start < i_end; i_start++) {
                        trs[i_start][5] = code;
                    }
                    const matched2 = matched[3].match(/.*《(.*)》/);
                    if (matched2) {
                        game = matched2[1];
                    }
                }
            } else if (node.nodeName == 'A') {
                if (node.href.match(/https:\/\/store\.steampowered\.com\/app\/\d+\//) || node.href.match(/https:\/\/store\.steampowered\.com\/sub\/\d+\//)) {
                    game = node.innerText;
                    link = node.href.match(/(.*\d+\/)/)[1];
                } else if (node.href.match(/https:\/\/chinaplay\.store\/detail\/\S+\//)) {
                    const cart = node.href.match(/https:\/\/chinaplay\.store\/detail\/\S+\//)[0];
                    trs.push([game, discount, hist, region, date, code, cart, link]);
                    hist = 0;
                }
            } else if (node.nodeName == '#text') {
                const content = node.textContent;
                if (content.match(/史低：?(\d+(\.\d+)?)/)) {
                    hist = content.match(/史低：?(\d+(\.\d+)?)/)[1];
                } else if (content.match(/(\d+(\.\d+)?)元/)) {
                    discount = content.match(/(\d+(\.\d+)?)元/)[1];
                } else if (content.match(/折扣码：/)) {
                    code = node.parentNode.innerText.match(/折扣码：(\S+)/)[1];
                }
            }
        }

        cb_rows.addEventListener('click', (event) => {
            if (event.target.nodeName == 'INPUT') {
                const hidden = {
                    'tr-higher': 'hidden1',
                    'tr-not-wish': 'hidden2',
                    'tr-own': 'hidden3'
                }
                const value = event.target.value;
                tbody.querySelectorAll('.' + value).forEach((node) => { node.classList.toggle(hidden[value]); });
            }
        });

        floor1.querySelector('#table-chinaplay > thead > tr').addEventListener('click', function (event) {
            const target = event.target;
            if (target.nodeName == 'TD' && target.hasAttribute('data-reverse')) {
                const col = target.getAttribute('data-col');
                let reverse = target.getAttribute('data-reverse');
                let sorted;
                if (reverse == 0) {
                    sorted = Array.from(tbody.querySelectorAll('tr')).sort((a, b) => {
                        return b.querySelector('td[data-' + col + ']').getAttribute('data-' + col) - a.querySelector('td[data-' + col + ']').getAttribute('data-' + col);
                    });
                    const siblings = this.querySelectorAll('[data-reverse="1"]');
                    target.setAttribute('data-reverse', '1');
                    siblings.forEach((node) => { node.setAttribute('data-reverse', '0'); });
                } else {
                    sorted = Array.from(tbody.querySelectorAll('tr')).sort((a, b) => { return a.querySelector('td[data-' + col + ']').getAttribute('data-' + col) - b.querySelector('td[data-' + col + ']').getAttribute('data-' + col); });
                    const siblings = this.querySelectorAll('[data-reverse="0"]');
                    target.setAttribute('data-reverse', '0');
                    siblings.forEach((node) => { node.setAttribute('data-reverse', '1'); });
                }
                sorted.forEach((node) => {
                    tbody.insertAdjacentElement('beforeend', node);
                });
            }
        });
    }
})();