import time
from playwright.sync_api import Playwright, sync_playwright

def run(playwright: Playwright) -> None:
    # 启动浏览器，禁用无头模式
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()

    try:
        # 打开登录页面
        print("打开登录页面...")
        page.goto("https://ww1.colorlightcloud.com/login", wait_until="domcontentloaded")  # 等待 DOM 加载完成

        # 输入用户名
        print("输入用户名...")
        username_input = page.locator("#mat-input-0")  # 通过 id 定位用户名输入框
        username_input.fill("Ylt5786")

        # 输入密码
        print("输入密码...")
        password_input = page.locator("input[type='password']")  # 根据实际元素定位密码输入框
        password_input.fill("DJCtjy064")

        # 点击登录按钮
        print("点击登录按钮...")
        login_button = page.locator("button.color-login-btn")  # 通过 class 定位登录按钮
        login_button.click()

        # 等待登录成功
        print("等待登录成功...")
        page.wait_for_url("https://ww1.colorlightcloud.com/home", timeout=60000)  # 等待跳转到 home 页面

        # 点击“媒体库”
        print("点击媒体库...")
        media_library = page.get_by_text("媒体库")  # 通过 text 定位媒体库
        media_library.click()

        # 先删除历史文件，防止垃圾太多
        # 点击 "播报充电情况"
        print("点击播报充电情况...")
        playback_charge_status = page.get_by_text("播报充电情况")
        playback_charge_status.dblclick()
        time.sleep(2)
        # 检查 <span> 元素是否存在
        print("检查 <span> 元素是否存在...")
        if page.locator("span.media-group-name").count() > 0:
            # 鼠标移动到第一个 <span> 元素
            print("鼠标移动到第一个 <span> 元素...")
            first_span = page.locator("span.media-group-name").nth(0)  # 定位第一个 <span> 元素
            first_span.hover()  # 鼠标移动到该元素

            # 定位并点击外层的 <span> 元素
            print("定位并点击外层的 <span> 元素...")
            checkbox_span = page.locator("span.mat-checkbox-inner-container").nth(0)  # 定位 <span> 元素
            if checkbox_span.is_visible():
                checkbox_span.click(force=True)  # 强制点击该元素
                # 定位并点击 <mat-icon> 元素
                print("定位并点击删除按钮...")
                delete_icon = page.locator("mat-icon:has-text('delete')").nth(0)
                if delete_icon.is_visible():
                    delete_icon.click()  # 点击该元素
                    # 定位并点击 <button> 元素
                    print("定位并点击确定按钮...")
                    confirm_button = page.locator("button:has-text('确定')")
                    if confirm_button.is_visible():
                        confirm_button.click()  # 点击该元素
            else:
                print("<span> 元素未找到")
        else:
            print("未找到 <span> 元素，可能页面未加载或元素不存在")

        # 点击“编辑节目” 点一下编辑节目是为了切换一下页面
        print("点击编辑节目...")
        jiemu_library = page.get_by_text("编辑节目")  # 通过 text 定位编辑节目
        jiemu_library.click()

        # 点击“媒体库”
        print("点击媒体库...")
        media_library = page.get_by_text("媒体库")  # 通过 text 定位媒体库
        media_library.click()

        # 点击 "播报充电情况"
        print("点击播报充电情况...")
        playback_charge_status = page.get_by_text("播报充电情况").nth(0)
        playback_charge_status.dblclick()

        # 点击“上传”按钮
        print("点击上传按钮...")
        upload_button = page.get_by_text("上传")  # 通过 text 定位上传按钮
        upload_button.click()

        print("触发文件选择对话框...")
        with page.expect_file_chooser() as fc_info:
            page.locator("img").click()  # 触发文件选择对话框
        file_chooser = fc_info.value
        file_chooser.set_files(r"d:\1.mp4")  # 设置文件路径
        # 检查上传成功状态
        print("检查上传成功状态...")
        while True:
            success_message = page.locator("span:has-text('上传素材成功')")  # 定位成功消息
            if success_message.is_visible():  # 如果成功消息可见，表示上传成功
                print("上传成功！")
                break
            print("上传进行中...")
            time.sleep(0.5)  # 每隔 0.5 秒检查一次


        print("点击编辑节目...")
        jiemu_library = page.get_by_text("编辑节目")  # 通过 text 定位编辑节目
        jiemu_library.click()
        time.sleep(2)

        # 点击 "播报充电情况"
        print("点击播报充电情况...")
        playback_charge_status = page.locator("span:has-text('播报充电情况')").nth(0)  # 定位 <span> 元素
        if playback_charge_status.is_visible():
            playback_charge_status.click()  # 点击该元素
            # 点击 <img> 元素
            print("点击 <img> 元素...")
            img_element = page.locator("img.grid-img").nth(0)  # 定位 <img> 元素
            if img_element.is_visible():
                # 定位目标 <canvas> 元素
                print("定位目标 <canvas> 元素...")
                canvas_element = page.locator("canvas#proCanvas")  # 定位 <canvas> 元素

                # 执行拖动操作
                print("执行拖动操作...")
                img_element.drag_to(canvas_element)  # 将图片拖动到 <canvas> 中

                # 定位并输入文本
                print("定位并输入文本...")
                input_element = page.locator("input[formcontrolname='contentDisplayName']")  # 定位 <input> 元素
                if input_element.is_visible():
                    input_element.fill("Test1")  # 输入文本
                else:
                    print("<input> 元素未找到")
                # 定位并输入数值
                print("定位并输入数值...")
                input_element = page.locator("input[formcontrolname='width']").nth(0)  # 定位 <input> 元素
                if input_element.is_visible():
                    input_element.fill("1280")  # 输入数值
                else:
                    print("<input> 元素未找到")
                # 定位并输入数值
                print("定位并输入数值...")
                input_element = page.locator("input[formcontrolname='height']").nth(0)  # 定位 <input> 元素
                if input_element.is_visible():
                    input_element.fill("720")  # 输入数值
                else:
                    print("<input> 元素未找到")
                # 定位并点击“发布”按钮
                print("定位并点击“发布”按钮...")
                publish_button = page.locator("div.btn.publish")  # 定位 <div> 元素
                if publish_button.is_visible():
                    publish_button.click()  # 点击该元素
                    # # 定位并点击 <mat-tree-node> 元素
                    # print("定位并点击 <mat-tree-node> 元素...")
                    # tree_node = page.locator(
                    #     "mat-tree-node.node-custom-style:has-text('充电站')")  # 定位 <mat-tree-node> 元素
                    # if tree_node.is_visible():
                    #     tree_node.click()  # 点击该元素
                    # else:
                    #     print("<mat-tree-node> 元素未找到")
                else:
                    print("<div> 元素未找到")
            else:
                print("<img> 元素未找到")
        else:
            print("<span> 元素未找到")
        time.sleep(60)

    except Exception as e:
        print(f"操作过程中发生错误: {e}")
    finally:
        # 关闭浏览器
        print("操作完成，关闭浏览器...")
        context.close()
        browser.close()


# 初始化 Playwright
playwright = sync_playwright().start()

# 运行测试
run(playwright)

# 结束 Playwright
playwright.stop()