let root = document.querySelector(".p-root");
let imgs = document.querySelectorAll(".p-imgs");
let video = root.children[0];
let canvas = root.children[1];
let img = root.children[2];
let btnTack = root.children[3];
let btns = root.children[4];
let btnConfirm = btns.children[0];
let btnCancel = btns.children[1];

/**
 * 处理点击选择模板图片
 */
imgs[0].addEventListener("click", (e) => {
    if (e.target instanceof HTMLImageElement) {
        img.src = e.target.src;
    }
});

/**
 * 生成模板图片
 */
for (let i = 1; i <= 24; i++) {
    let img = new Image();
    img.onerror = () => {
        img.src = "imgs/01.png";
    }
    img.src = "imgs/" + i.toString().padStart(2, "0") + ".png";
    imgs[0].appendChild(img);
}

/**
 * 处理图片的左右移动
 */
imgs.forEach(item => {
    let x = 0;
    let x1 = -1;
    console.info(item.scrollWidth, item.clientWidth);
    item.addEventListener("touchmove", (e) => {//绑定触摸移动事件
        if (x1 > -1) {
            x += e.changedTouches[0].screenX - x1;
        }
        x1 = e.changedTouches[0].screenX;
        item.style.left = x + "px";
    });
    item.addEventListener("touchend", (e) => {//绑定触摸移动事件结束
        x1 = -1;
    });
});

/**
 * 获取视频流
 */
btns.hidden = true;//确定,取消不可见
navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
        facingMode: "environment",//前置:user,后置:environment
        width: { min: 800, ideal: 1080, max: 2000 },
        height: { min: 800, ideal: 1080, max: 2000 }
    }
    // width:800,
    // height:800


    // }).catch(e=>{
    //     console.error(e);
    //     return navigator.mediaDevices.getUserMedia({                  
    //         audio:false,
    //         video:{ 
    //                 facingMode: "environment",//前置:user,后置:environment
    //                 // width: {min:100,ideal: 200,max:2000},
    //                 // height: {min:100,ideal: 200,max:2000 }

    //             }
    //     });
}).then((stream) => {
    console.info(stream);
    console.info(stream.getTracks()[0]);
    console.info(stream.getTracks()[0].getConstraints());
    console.info(stream.getTracks()[0].getSettings());
    console.info(stream.getTracks()[0].getCapabilities());
    console.info(stream.getTracks()[0].applyConstraints());
    console.info(stream.getVideoTracks());
    // video.onloadedmetadata = function (e) {
    //     console.info(e);
    // };
    video.srcObject = stream;
}).catch(e => {
    console.error(e);
    alert("摄像设备不可用");
});

/**
 * 处理拍照
 */
btnTack.addEventListener("click", () => {
    canvas.getContext('2d').drawImage(video, 0, 0, 1200, 1200);
    btnTack.hidden = true;
    btns.hidden = false;
});

/**
 * 处理取消
 */
btnCancel.addEventListener("click", () => {
    canvas.getContext('2d').clearRect(0, 0, 1200, 1200);
    btnTack.hidden = false;
    btns.hidden = true;
});
/**
 * 处理确定
 */
btnConfirm.addEventListener("click", () => {
    canvas.getContext('2d').drawImage(img, 0, 0, 1200, 1200);
    let item = new Image();
    item.src = canvas.toDataURL("image/png");
    imgs[1].appendChild(item);
    canvas.getContext('2d').clearRect(0, 0, 1200, 1200);
    btnTack.hidden = false;
    btns.hidden = true;
});

/**
 * 处理点击照片事件
 */
imgs[1].addEventListener("click", (e) => {
    if (e.target instanceof HTMLImageElement) {
        let a = document.createElement("a");
        a.href = e.target.src;
        a.download = "大头贴-" + new Date().getTime() + ".png";
        a.click();
    }
});