// ==UserScript==
// @name         掘金沸点过滤器
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  过滤掉那些看起来很睿智的沸点和伙计
// @author       睿智的河水
// @match        *://juejin.im/pins*
// @match        *://juejin.im/topic/*
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
  'use strict'

  const iStyle = `
    .jj-block-dialog {
      position: fixed;
      z-index: 9999;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.25)
    }
    .jj-block-dialog-box {
      position: relative;
      width: 520px;
      background: #fff;
      padding: 20px;
      margin: 8% auto 0
    }
    .jj-block-dialog-box .close {
      position: absolute;
      right: -15px;
      top: -15px;
      width: 26px;
      height: 26px;
      font-size: 26px;
      text-align: center;
      line-height: 26px;
      color: #666;
      background: #fff;
      border-radius: 50%;
      border: 1px solid #ccc;
      transform: rotateZ(45deg);
      cursor: pointer;
      user-select: none;
    }
    .jj-block-dialog-box label {
      font-size: 16px;
    }
    .jj-block-dialog-box textarea {
      height: 70px;
      margin: 10px 0;
      padding: 5px;
    }
    .jj-block-action >>> .block-panel {
      display: none
    }
  `

  /**
   * 拿到vue
   */
  const JJ = document.querySelector('#juejin').__vue__

  /**
   * 清除空值
   */
  const cleanArray = arr => {
    return arr.filter(v => v && v.trim())
  }

  /**
   * 获取缓存数据
   */
  const getLocal = key => {
    return cleanArray(JSON.parse(localStorage.getItem(key)))
  }

  /**
   * 设置缓存数据
   */
  const setLocal = (key, val) => {
    return localStorage.setItem(key, JSON.stringify(val))
  }

  /**
   * 过滤列表数据
   */
  const filterList = () => {
    const pinItem = document.querySelectorAll('.pin')
    let blockList = getLocal('BLOCK_LIST') || []
    let blockUser = getLocal('BLOCK_USER') || []

    for (const v of Array.from(pinItem)) {
      const vInfo = v.__vue__.pin
      if (
        blockList.includes(vInfo.id) ||
        blockUser.includes(vInfo.user.user_id)
      ) {
        v.classList.add('hidden')
        continue
      }

      v.classList.remove('hidden')

      const action = v.querySelector('.action-box')
      if (action && !action.classList.contains('is-append')) {
        const blockEl = document.createElement('div')
        const bKey = Object.keys(action.firstElementChild.dataset)[0]
        blockEl.dataset[bKey] = ''
        blockEl.classList = 'share-action action'
        action.appendChild(blockEl)

        const blockTitle = document.createElement('div')
        blockTitle.textContent = '屏蔽'
        blockTitle.dataset[bKey] = ''
        blockTitle.classList = 'action-title-box'
        blockTitle.style = 'flex:1;height:100%;font-size:13px;color:#8a93a0'
        blockEl.appendChild(blockTitle)

        const blockPanel = document.createElement('div')
        blockPanel.dataset[bKey] = ''
        blockPanel.classList = 'share-panel shadow hidden'
        blockEl.appendChild(blockPanel)

        blockTitle.onclick = () => {
          blockPanel.classList.toggle('hidden')
        }

        const addElement = (label, cb) => {
          const el = document.createElement('div')
          el.textContent = label
          el.dataset[bKey] = ''
          el.classList = 'share-item'
          el.style = 'font-size:13px;color:#8a93a0;text-align:center'
          el.onclick = cb
          blockPanel.appendChild(el)
        }

        addElement('屏蔽此条', () => {
          blockList.push(vInfo.id)
          setLocal('BLOCK_LIST', blockList)
          v.classList.add('hidden')
        })
        addElement('屏蔽此人', () => {
          blockUser.push(vInfo.user.user_id)
          setLocal('BLOCK_USER', blockUser)
          v.classList.add('hidden')
          filterList()
        })
        addElement('查看已屏蔽', () => {
          blockList = getLocal('BLOCK_LIST') || []
          blockUser = getLocal('BLOCK_USER') || []
          let dialog = document.querySelector('.jj-block-dialog')
          if (dialog) {
            document.body.removeChild(dialog)
          }
          dialog = document.createElement('div')
          dialog.classList = 'jj-block-dialog'
          dialog.innerHTML = `
            <div class="jj-block-dialog-box">
              <span id="jj-block-close" class="close">+</span>
              <label>已屏蔽的沸点</label>
              <textarea id="jj-block-list">${blockList.join(',')}</textarea>
              <label>已屏蔽的用户</label>
              <textarea id="jj-block-user">${blockUser.join(',')}</textarea>
              <button id="jj-block-update">更新</button>
              <span>多条数据用逗号(,)隔开，留空则不屏蔽任何沸点和用户</span>
            </div>
          `
          const style = document.createElement('style')
          style.textContent = iStyle
          document.head.append(style)
          document.body.append(dialog)
          const _ = el => document.querySelector(el) || null
          _('#jj-block-close').onclick = () => {
            document.body.removeChild(dialog)
          }
          _('#jj-block-update').onclick = () => {
            const blockList = _('#jj-block-list').value.split(',')
            const blockUser = _('#jj-block-user').value.split(',')
            setLocal('BLOCK_LIST', blockList)
            setLocal('BLOCK_USER', blockUser)
            document.body.removeChild(dialog)
            filterList()
            JJ.$alertMsg('屏蔽列表已更新')
          }
        })
        action.classList.add('is-append')
      }
    }
  }

  /**
   * 监听并过滤
   */
  const watchPin = () => {
    const target = document.querySelector('.pin-list-view, .pin-content')
    const config = { childList: true, subtree: true }
    const observer = new MutationObserver(() => {
      filterList()
    })

    observer.observe(target, config)
  }

  JJ.$router.afterEach(() => watchPin())
  watchPin()
})()