<template>
  <div class="container">
    <header>
      <h1>无影云手机Web SDK 演示</h1>
      <p class="subtitle">云手机连接与管理平台</p>
    </header>

    <!-- 选择使用方式 -->
    <div class="checkbox-group">
      <h2 class="card-title">选择使用云手机方式：</h2>
      <input type="checkbox" id="use_login" />
      <label for="use_login">便携账号使用</label>
      <input type="checkbox" id="use_input"/>
      <label for="use_input">直连使用</label>
    </div>

    <!-- 登录区域 -->
    <div class="card" id="loginCard">
      <h2 class="card-title">便携账号登录</h2>
      <div id="loginParams">
        <div class="form-group">
          <label for="loginId">组织ID</label>
          <input
            type="text"
            id="loginId"
            name="loginId"
            placeholder="请输入组织ID"
          />
        </div>
        <div class="form-group">
          <label for="username">用户名</label>
          <input
            type="text"
            id="username"
            name="username"
            placeholder="请输入用户名"
          />
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input
            type="password"
            id="password"
            name="password"
            placeholder="请输入密码"
          />
        </div>
        <button class="btn btn-block" id="login-button">登录</button>
      </div>

      <div id="logout" :style="{ display: 'none' }">
        <p>当前用户: <span id="login-user"></span></p>
        <button class="btn btn-block btn-error" id="logout-button" @click="handleLogout">退出登录</button>
      </div>
    </div>

    <!-- 手动连接参数 -->
    <div class="card" id="inputCard" :style="{ display: 'none' }">
      <h2 class="card-title">手动输入参数直连</h2>
      <div class="checkbox-group">
        <input type="checkbox" id="manualParameter" />
        <label for="manualParameter">
          手动输入登录信息及实例信息（备注：Token、AuthCode和Ticket填其一即可）
        </label>
      </div>

      <div id="login-session-info" :style="{ display: 'none' }">
        <!-- Ticket 直连 -->
        <div class="form-group">
          <div class="checkbox-group">
            <input type="checkbox" id="useTicketConn" />
            <label for="useTicketConn">使用Ticket直连【推荐】</label>
          </div>
          <div id="use-ticket-conn-info" :style="{ display: 'none' }">
            <div class="form-group">
              <label for="appInstanceId_manual">实例物理会话ID</label>
              <input
                type="text"
                id="appInstanceId_manual"
                name="appInstanceId"
                placeholder="必填，值以ai-开头"
              />
            </div>
            <div class="form-group">
              <label for="ticket">Ticket</label>
              <input
                type="text"
                id="ticket"
                name="Ticket"
                placeholder="请输入ticket"
              />
            </div>
            <div class="checkbox-group">
              <input type="checkbox" id="groupcontrol"/>
              <label for="groupcontrol">开启群控</label>
            </div>
            <div class="form-group">
              <label>上传BatchGetAcpConnectionTicket的Response JSON文件来创建缩略图</label>
              <div class="file-input">
                <input
                  type="file"
                  id="fileInput"
                  ref="fileInputRef"
                  webkitdirectory
                  multiple
                  style="display: none"
                  @change="handleFileSelect"
                />
                <label for="fileInput" class="file-input-label">选择JSON文件</label>
              </div>
            </div>
            <button class="btn" id="thumbnailBtn" @click="addThumbnailStream">添加缩略图流</button>
            <div id="thumbnail-info"></div>
          </div>
        </div>

        <!-- 其他连接方式 -->
        <div class="form-group">
          <div class="checkbox-group">
            <input type="checkbox" id="useOtherConn" />
            <label for="useOtherConn">使用Token或AuthCode直连</label>
          </div>
          <div id="use-other-conn-info" :style="{ display: 'none' }">
            <div class="form-group">
              <label for="loginToken">Token直连</label>
              <div class="form-group" style="margin-left: 20px; margin-top: 10px">
                <label for="loginToken">LoginToken/stsToken</label>
                <input
                  type="text"
                  id="loginToken"
                  name="loginToken"
                  placeholder="通过loginToken或stsToken直连"
                />
              </div>
              <div class="form-group" style="margin-left: 20px; margin-top: 10px">
                <label for="sessionId">sessionId</label>
                <input
                  type="text"
                  id="sessionId"
                  name="sessionId"
                  placeholder="使用LoginToken/stsToken则必填"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="authCode">AuthCode直连</label>
              <input
                type="text"
                id="authCode"
                name="authCode"
                placeholder="请输入免授权登录下的authCode"
              />
            </div>
            <div class="form-group">
              <label for="resourceId_manual">resourceId</label>
              <input
                type="text"
                id="resourceId_manual"
                name="resourceId"
                placeholder="必填，实例持久会话ID，以p-开头"
              />
            </div>
            <div class="form-group">
              <label for="appId_manual">appID</label>
              <input
                type="text"
                id="appId_manual"
                name="appId"
                placeholder="必填"
              />
            </div>
            <div class="form-group">
              <label for="productType_manual">productType</label>
              <input
                type="text"
                id="productType_manual"
                name="productType"
                placeholder="必填"
              />
            </div>
            <div class="form-group">
              <label for="appVersion_manual">appVersion</label>
              <input
                type="text"
                id="appVersion_manual"
                name="appVersion"
                placeholder="选填，实例版本信息"
              />
            </div>
          </div>
        </div>

        <div class="btn-group">
          <button class="btn" id="connect-button" @click="handleConnect">连接</button>
          <button class="btn btn-secondary" id="clear-button" @click="clearManualParams">清空</button>
        </div>
      </div>
    </div>

    <!-- 启动参数 -->
    <div class="card">
      <h2 class="card-title">启动参数</h2>
      <div class="form-group">
        <div class="radio-group">
          <label><input type="radio" name="openType" value="inline" checked /> 内嵌</label>
          <label><input type="radio" name="openType" value="inline-multi" /> 内嵌-多屏</label>
          <label><input type="radio" name="openType" value="newTab" /> 新页面</label>
          <label><input type="radio" name="openType" value="urlScheme" /> 客户端打开</label>
        </div>
      </div>

      <div class="form-group">
        <div class="radio-group">
          <label><input type="radio" name="resourceType" value="local" checked disabled /> 本地资源页面</label>
        </div>
      </div>

      <div class="form-group">
        <div class="radio-group">
          <label><input type="radio" name="quality" value="low" /> 低清</label>
          <label><input type="radio" name="quality" value="normal" /> 标准</label>
          <label><input type="radio" name="quality" value="high" /> 高清</label>
          <label><input type="radio" name="quality" value="super" /> 超清</label>
        </div>
        <div class="checkbox-group">
          <input type="checkbox" id="hideProgressDialog" />
          <label for="hideProgressDialog">隐藏上传下载进度</label>
        </div>
        <div class="checkbox-group">
          <input type="checkbox" id="setCloudPhoneLoading" />
          <label for="setCloudPhoneLoading">设置云手机加载动画</label>
        </div>
      </div>

      <div class="form-group">
        <label>连接配置 (JSON格式)</label>
        <textarea
          id="connConfig"
          name="connConfig"
          rows="3"
          placeholder='{"disableCamera": true, "decodeType": 2}'
        ></textarea>
      </div>

      <div class="btn-group">
        <button class="btn btn-error" id="disconnect-button" @click="disconnect">断开连接</button>
        <button class="btn" id="hide-ball-button" @click="toggleBall">显隐悬浮球</button>
        <button class="btn" id="network-data-button" @click="getNetworkData">获取性能参数</button>
        <button class="btn" id="resolution-button" @click="changeResolution">
          修改分辨率<br /><span class="sub-text">针对实例版</span>
        </button>
        <button class="btn" id="screenshot-button" @click="takeScreenshot">获取截图</button>
        <button class="btn" id="download-button" @click="downloadFile">下载云手机文件到本地</button>
      </div>

      <div class="form-group" style="margin-top: 16px">
        <label>上传本地文件到云手机</label>
        <div class="file-input">
          <input
            type="file"
            id="uploadFile"
            ref="uploadFileRef"
            multiple
            style="display: none"
            @change="handleUploadFile"
          />
          <label for="uploadFile" class="file-input-label">选择要上传的文件</label>
        </div>
      </div>

      <div class="btn-group" style="margin-top: 16px">
        <button class="btn" id="transfer-info-button" @click="showTransferInfo">文件传输信息</button>
        <button class="btn" id="graphic-low-button" @click="setGraphicLow">设置低清</button>
        <button class="btn" id="graphic-super-button" @click="setGraphicSuper">设置超清</button>
        <button class="btn" id="disable-touch-button" @click="disableTouch">关闭Touch输入</button>
      </div>

      <div class="btn-group" style="margin-top: 16px">
        <button class="btn" id="vol-down-button" @click="volumeDown">音量减小</button>
        <button class="btn" id="vol-up-button" @click="volumeUp">音量增大</button>
        <button class="btn" id="mute-button" @click="mute">静音</button>
        <button class="btn" id="back-button" @click="back">返回</button>
        <button class="btn" id="home-button" @click="home">主页</button>
        <button class="btn" id="app-switch-button" @click="appSwitch">近期任务</button>
        <button class="btn" id="hide-nav-button" @click="hideNav">隐藏导航栏</button>
        <button class="btn" id="show-nav-button" @click="showNav">显示导航栏</button>
        <button class="btn" id="clipboard-send-button" @click="sendClipboard">发送数据到云机剪贴板</button>
        <button class="btn" id="clipboard-modal-button" @click="openClipboardModal">剪贴板</button>
      </div>
    </div>

    <!-- 云手机列表 -->
    <div class="card" id="appsInfos" :style="{ display: 'none' }">
      <h2 class="card-title">云手机列表</h2>
      <div class="btn-group">
        <button class="btn" id="get-app-list" @click="fetchAppList">获取云手机列表</button>
        <button class="btn btn-secondary" id="clear-app-list" @click="clearAppList">清空云手机列表</button>
      </div>
      <div id="applist" class="app-list">
      </div>
    </div>

    <!-- 云手机画面 -->
    <div class="card">
      <h2 class="card-title">云手机画面</h2>
      <div class="desktop-container">
        <iframe id="sessionIframe" ref="sessionIframeRef"></iframe>
      </div>
    </div>

    <!-- 缩略图区域 -->
    <div class="card">
      <h2 class="card-title">缩略图预览</h2>
      <div id="thumbnail-container" class="thumbnail-container"></div>
    </div>
  </div>

  <!-- 通知区域 -->
  <div id="notification" class="notification"></div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import './WuyingWebSDK.js';
import axios from 'axios';
import './cloud-phone.js';
import '../assets/cloud-phone.css';

onMounted(() => {
  // 确保 SDK 可用
  if (!window.WuyingWebSDK) {
    console.warn('WuyingWebSDK 未加载，请检查 public/index.html')
  }
})
</script>
