var node = document.getElementById('box');

function change_radius() {
    var img_radius_value = document.getElementById("range_radius").value.toString() + "px";
    var image_raius_left =document.getElementById("range_radius").value/50*100;
    document.getElementById("img").style.borderRadius = img_radius_value;
    // document.getElementById("img_radius_tip").textContent = "圆角："+ img_radius_value;
    document.getElementById("range_radius").style.background = "linear-gradient(90deg, #BB86FC 0%, #BB86FC " + image_raius_left.toFixed(2) + "%, #2D2D2E " + image_raius_left.toFixed(2) + "%, #2D2D2E 100%)";/*设置左边颜色为#61bd12，右边颜色为#ddd*/;
}

function change_border() {
  var img_border_value = document.getElementById("range_border").value/5;
  var img_border_left =document.getElementById("range_border").value/50*100;
  document.getElementById("img").style.border = "#212121 " + img_border_value + "px " + "solid";
  document.getElementById("img").style.marginTop = 47-img_border_value + "px";
  document.getElementById("img").style.marginLeft = 66-img_border_value + "px";
  document.getElementById("img").style.marginBottom = 47-img_border_value + "px";
  document.getElementById("img").style.marginRight = 66-img_border_value + "px";
  document.getElementById("range_border").style.background = "linear-gradient(90deg, #BB86FC 0%, #BB86FC " + img_border_left.toFixed(2) + "%, #2D2D2E " + img_border_left.toFixed(2) + "%, #2D2D2E 100%)";/*设置左边颜色为#61bd12，右边颜色为#ddd*/;
}

function change_shadow() {
  var img_shadow_value = document.getElementById("range_shadow").value;
  var img_shadow_left =document.getElementById("range_shadow").value/100*100;
  document.getElementById("img").style.boxShadow = "0px 8px 20px 0px " + "rgb(0 0 0 /" + (img_shadow_value/100).toString() + ")";
  document.getElementById("range_shadow").style.background = "linear-gradient(90deg, #BB86FC 0%, #BB86FC " + img_shadow_left.toFixed(2) + "%, #2D2D2E " + img_shadow_left.toFixed(2) + "%, #2D2D2E 100%)";/*设置左边颜色为#61bd12，右边颜色为#ddd*/;
}

function change_bg_radius() {
    // var value = document.getElementById("range_bg_radius").value.toString() + "px";
    // document.getElementById("box").style.borderRadius = value;

    var bg_radius_value = document.getElementById("range_bg_radius").value.toString() + "px";
    var bg_raius_left =document.getElementById("range_bg_radius").value/50*100;
    document.getElementById("box").style.borderRadius = bg_radius_value;
    document.getElementById("range_bg_radius").style.background = "linear-gradient(90deg, #BB86FC 0%, #BB86FC " + bg_raius_left.toFixed(2) + "%, #2D2D2E " + bg_raius_left.toFixed(2) + "%, #2D2D2E 100%)";/*设置左边颜色为#61bd12，右边颜色为#ddd*/;
}


function change_bg_color(obj) {
    var a = $(obj).attr("style").toString().substring(12); 
    document.getElementById('box').style.background=a;
}

function change_bg_image(obj) {
  var a = $(obj).attr("style").toString().substring(26);
  console.log(a);
  document.getElementById('box').style.backgroundImage='url(img/bg'+ a;
}

function show_name() {
    document.getElementById('name').style.dispaly = none;
}

function swich_mark_show(obj){
    var b = $(obj).attr("value").toString();
    console.log(b);
    if (b=="close")
    {
        document.getElementById("name").style.display = "none";
        document.getElementById("swich_show").value = "open";

    }
    else
    {
        document.getElementById("name").style.display = "block";
        document.getElementById("swich_show").value = "close";
    
}}

function change_watermark(){
    document.getElementById("name").textContent = document.getElementById("watermark_name").value;
}


// 保存到本地
function download_image() {
  html2canvas(document.querySelector(".box")).then(function (canvas) {
    document.body.appendChild(canvas);
    const link = document.createElement('a');
    let timetext = new_time();
    link.download = "iproduct"+ timetext + '.png';
    link.href = canvas.toDataURL('image/png');
    link.click();
  });
}

// 复制到剪切板
// function close_box() {
//   html2canvas(document.querySelector(".box")).then(function (canvas) {
//     document.body.appendChild(canvas);
//     const link = document.createElement('a');
//     link.download = 'my-image.png';
//     link.href = canvas.toDataURL('image/png');
//     // 创建新的 img 元素并设置属性
//     const img = document.createElement('img');
//     img.src = canvas.toDataURL('image/png');
//     img.id = 'image_add'; // 添加唯一标识符

//     // 将 img 元素插入到页面中指定的容器元素中
//     const container = document.querySelector('body');
//     container.appendChild(img);
//   });
// }



function new_time(){
  // 获取当前日期和时间
  let now = new Date();

  // 获取年、月、日、小时、分钟和秒
  let year = now.getFullYear();
  let month = now.getMonth() + 1;
  let day = now.getDate();
  let hour = now.getHours();
  let minute = now.getMinutes();
  let second = now.getSeconds();

  // 格式化输出
  let timetext = `${year}-${month}-${day} ${hour}.${minute}.${second}`;
  return timetext;
}


document.addEventListener('keydown', (event) => {
  if (event.ctrlKey && event.key === 'c') {
    const myButton = document.getElementById('copy_close')
    myButton.click()
  }
});

document.addEventListener('keydown', (event) => {
  if (event.ctrlKey && event.key === 'd') {
    const myButton = document.getElementById('downloadButton')
    myButton.click()
  }
});

document.addEventListener("DOMContentLoaded", function() {
  change_radius();
  change_bg_radius();
  change_border();
  change_shadow();
  document.getElementById("box").style.height=document.getElementById("box").offsetHeight+'px';
  document.getElementById("box").style.width=document.getElementById("box").offsetWidth+'px';
  setTimeout(() => {
    const element = document.getElementById('box');
    element.style.marginTop = `${Math.round(parseFloat(getComputedStyle(element).marginTop))}px`;
  }, 500);
});
