class info {
    constructor () {
        this.getInfo();
    }

    async getInfo() {
        let res = await indexServe.info({
            url: query("url")
        });


        $(".header img").src = res.backImg
        $(".info_main h2").innerText = res.title
        $(".info_main .posttime").innerText = res.posttime;

        res.Statistics.forEach(v => {
            $(".yyinfos").innerHTML += `
               <li>
                    <span>${v.title}</span>
                    <div class="jdw">
                        <div class="jd" style="${v.proportion}"></div>
                    </div>
                </li>
            `
        });

        res.stepInfo.arr.forEach(v => {
            $(".cpargsw").innerHTML += `
              <li>
                    <div class="i" style="background-position: 0px ${v.position}px;"></div>
                    <span>${v.title}</span>
                </li>
            `
        })
        $(".show_more .text").innerText = res.stepInfo.message;

        $(".more").onclick = () => {
            if ($(".more span").innerText == "展开") {
                $(".more span").innerText = "收起"
                $(".more img").style = `transform: rotate(180deg);`
                $(".show_more").style.height = "auto";
            } else {
                $(".more span").innerText = "展开"
                $(".more img").style = `transform: rotate(0deg);`
                $(".show_more").style.height = "42px";
            }
        }

        res.material.main.forEach(v => {
            $(".zhuliao ul").innerHTML+=`
              <li>
                <div class="list_title">${v.title}</div>
                <div class="list_nums">${v.nums}</div>
              </li>
            `
        })

        res.material.accessories.forEach(v => {
            $(".fuliao ul").innerHTML+=`
              <li>
                <div class="list_title">${v.title}</div>
                <div class="list_nums">${v.nums}</div>
              </li>
            `
        })

        res.DetailedSteps.forEach(v => {
            $(".info_list").innerHTML+=`
                ${
                  Array.isArray(v.step_img)
                  ? `<li>
                        <div class="info_top cpimg">
                            <img src="${v.step_img[0]}" alt="">
                            <div class="setp">成品图</div>
                        </div>
                        <div class="change_list">
                            ${
                                v.step_img.map((item,index) => {
                                    return `<img src="${item}" alt="" style="opacity: ${index == 0 ? 1:0.4}">`
                                }).toString().replaceAll(",", "")
                            }
                        </div>
                    </li>`
                  : v.step_img == null
                    ? `<li class="step">
                           <div class="step_title">烹饪技巧</div>
                           <div class="stepdes">${v.step_text}</div>
                        </li>`
                    : `<li>
                            <div class="info_top">
                                <img src="${v.step_img}" alt="">
                                <div class="setp">${v.step_title}</div>
                            </div>
                            <p>${v.step_text}</p>
                        </li>`
                 }`
        })

        _(".change_list img").forEach(v => {
            v.onclick = () => {
                _(".change_list img").forEach( item => item.style.opacity = 0.4)
                $(".cpimg img").src = v.src
                v.style.opacity = 1
            }
        })


        console.log(res)
    }
}

new info()