// ==UserScript==
// @name         掘金沸点过滤器
// @namespace    http://tampermonkey.net/
// @version      0.1.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;
    }
  `

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

  /**
   * 获取缓存数据
   */
  const getLocal = key => {
    return 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.uid)
      ) {
        v.classList.add('hidden')
        continue
      }
      v.classList.remove('hidden')
      const menu = v.querySelector('.dropdown-menu')
      if (menu && !menu.classList.contains('is-append')) {
        const bKey = Object.keys(menu.firstElementChild.dataset)[0]
        const addElement = (label, cb) => {
          const el = document.createElement('li')
          el.textContent = label
          el.dataset[bKey] = ''
          el.onclick = cb
          menu.appendChild(el)
        }
        addElement('屏蔽此条', () => {
          blockList.push(vInfo.id)
          setLocal('BLOCK_LIST', blockList)
          v.classList.add('hidden')
        })
        addElement('屏蔽此人', () => {
          blockUser.push(vInfo.uid)
          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.$alert('屏蔽列表已更新')
          }
        })
        menu.classList.add('is-append')
      }
    }
  }

  /**
   * 监听数据变化
   */
  const watchList = [
    '$store.state.view.activityIndex.activityList',
    '$store.state.view.activityIndex.topicPinList.list',
    '$store.state.view.activityIndex.hotList.list',
    '$store.state.view.topic.pinlist.list'
  ]
  watchList.forEach(v => {
    JJ.$watch(
      v,
      () => {
        JJ.$nextTick(()=> {
          filterList()
        })
      }
    )
  })
})()