// ==UserScript==
// @name         1688图片下载助手
// @namespace    https://detail.1688.com
// @version	1.0
// @description	 1688图片下载
// @author       Venlon
// @homepage     https://detail.1688.com/*
// @match        https://detail.1688.com/*
// @grant        GM_log
// @grant        GM_setClipboard
// @grant        GM_notification
// @grant        GM_download
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_deleteValue
// @grant			   GM_addStyle
// @license MIT
// @downloadURL none
// ==/UserScript==
// 
// setTimeout(()=> {
//   downloadFlow()
// },3000)
window.onload = async () => {
	await downloadFlow()
}

// 下载流程函数
 function downloadFlow() {
  const props = getData()
	if (!props) {
		return
	}
	const downoadList =  getLists(props) // 获得视频和图片
  // console.log('downoadList',downoadList)
   setDownBtn(downoadList, props) // 添加下载按钮
  // await downLoadFn(downoadList, props) // 下载函数
 }


// 添加下载按钮
function setDownBtn(downoadList, props) {
  const btn = document.createElement("button"); //创建一个input对象（提示框按钮）
	btn.textContent = "下载图片/视频";
  // btn.className = 'prop-item-inner-wrapper active'
	// btn.style.width = "60px";
	// btn.style.height = "20px";
	btn.style.align = "center";
  btn.style.border = '1px solid #f60';
  btn.style.color = '#ff6444';
  btn.style.padding = '6px'
  btn.style.background = '#fff';
  btn.style.borderRadius = '6px';
  btn.style.margin = '10px';
  btn.style.cursor = 'pointer';

  btn.onclick = function (){
		downLoadFn(downoadList, props)
	}

  const wrapper = document.getElementsByClassName('gallery-fix-wrapper')[0]
  GM_log(wrapper)
  wrapper.appendChild(btn)
}
// 获取数据方法
function getData() {
	// 全部变量
	const props = {}
	// const params = location.pathname.substr(7,12)
  props.id = location.pathname.substr(7,12)
  return props
}

function getLists(props) {
  console.log('id: ', props)
   // 视频
  let videoSrc = document.getElementsByTagName('video')[0]?.getAttribute('src') || ''
  // if(videoSrc) GM_download(videoSrc, props.id + '.mp4')
  // 图片
  let [...picUlList] = document.querySelectorAll(('.detail-gallery-turn-outter-wrapper img')) // 获取图片列表
  if(videoSrc) picUlList.splice(0, 2) // 去掉含视频的图片
  return {
    videoSrc,
    picUlList
  }
  
}

function downLoadFn(downoadList, props) {
  const {videoSrc, picUlList} = downoadList
  // console.log(videoSrc,picUlList)
  if(videoSrc) GM_download(videoSrc, props.id + '.mp4') // 下载视频
  console.log(picUlList);
  picUlList.forEach((item, index)=>{
    // 图片名规则
    let srcUrl = item.src
    // let srcUrl = item.src.replace(/.jpg.+$/, '.jpg_720x720q50.jpg')
    GM_download(srcUrl, props.id + '-' + index + '.jpg')

    // console.log(item.src)
    // GM_download(item.src + '_720x720q50.jpg', props.id + '-' + index + '.jpg')
  })
}