#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""把 3 张底图候选放进真实 CTA 版式对比（同尺寸、同罩色、同文字）"""
import base64
import io
import os
from PIL import Image
from playwright.sync_api import sync_playwright

DIR = '/Users/liuxinyuan/Desktop/Hermes输出-工作类/对外物料/科研朋友圈_20261009'
QR = os.path.join(DIR, 'images', 'p2_i3_x31.png')


def durl(p, w=1500):
    im = Image.open(p).convert('RGB')
    im.thumbnail((w, w), Image.LANCZOS)
    f = '/tmp/_c_%s.jpg' % os.path.basename(p)[:-4]
    im.save(f, quality=86)
    return 'data:image/jpeg;base64,' + base64.b64encode(io.open(f, 'rb').read()).decode()


BGS = [('bg_热带植物', 'bg_热带植物.png'), ('bg_山湖晨光', 'bg_山湖晨光.png'), ('bg_抽象叶脉', 'bg_抽象叶脉.png')]
SCHEMES = [('偏重', '.82', '.56', '.16'), ('偏轻', '.62', '.36', '.08')]

CSS = """
*{box-sizing:border-box;margin:0;padding:0}
body{background:#EEF2F8;font-family:"PingFang SC","Hiragino Sans GB",sans-serif}
.row{padding:16px 22px}
.lab{font-size:22px;color:#33455F;font-weight:800;margin-bottom:8px}
.cta{width:996px;border-radius:28px;padding:32px;display:flex;gap:28px;align-items:center;color:#fff;
  background-size:cover;background-position:center;box-shadow:0 10px 26px rgba(16,24,40,.16)}
.cta h3{font-size:34px;font-weight:900;line-height:1.25;position:relative;z-index:2;text-shadow:0 2px 12px rgba(4,18,44,.55)}
.cta .cs{font-size:22px;opacity:.96;margin-top:10px;line-height:1.55;position:relative;z-index:2;text-shadow:0 1px 10px rgba(4,18,44,.55)}
.qr{width:196px;height:196px;border-radius:20px;border:7px solid #fff;background:#fff;display:block;position:relative;z-index:2}
"""

rows = []
for bname, bfile in BGS:
    u = durl(os.path.join(DIR, 'bg', bfile))
    for sname, a1, a2, a3 in SCHEMES:
        rows.append(
            '<div class="row"><div class="lab">%s ／ 罩色%s（%s/%s/%s）</div>'
            '<div class="cta" style="background-image:linear-gradient(100deg,rgba(5,26,62,%s) 0%%,'
            'rgba(5,26,62,%s) 46%%,rgba(5,26,62,%s) 100%%),url(%s)">'
            '<div style="flex:1"><h3>扫码申请试用装</h3>'
            '<div class="cs">BR1D303 ｜ BR1E102 ｜ BR1C103 三款均开放试用</div></div>'
            '<img class="qr" src="%s"></div></div>'
            % (bname, sname, a1, a2, a3, a1, a2, a3, u, durl(QR, 400)))

html = '<!DOCTYPE html><html><head><meta charset="utf-8"><style>%s</style></head><body>%s</body></html>' % (CSS, ''.join(rows))
io.open('/tmp/_cta_cmp.html', 'w', encoding='utf-8').write(html)

with sync_playwright() as pw:
    br = pw.chromium.launch(channel='chrome', headless=True)
    pg = br.new_page(viewport={'width': 1040, 'height': 900}, device_scale_factor=1)
    pg.goto('file:///tmp/_cta_cmp.html', wait_until='load')
    pg.wait_for_timeout(500)
    pg.screenshot(path='/tmp/cta_compare.png', full_page=True)
    br.close()
im = Image.open('/tmp/cta_compare.png')
print('/tmp/cta_compare.png  %dx%d' % im.size)