<template>
  <div class="scene-step">
    <div class="title">场景步骤</div>
    <el-form :model="saveForm" :rules="rules" label-width="110px">
      <el-form-item prop="name" label="名称">
        <el-input v-model="saveForm.name" placeholder="请输入名称" maxlength="100" show-word-limit class="input" />
      </el-form-item>
      <el-form-item prop="stepType" label="步骤类型">
        <el-select v-model="saveForm.stepType" placeholder="请选择" class="select" @change="selectStepType">
          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <span style="margin-left: 20px; color: gray;">{{ typeTitle }}</span>
      </el-form-item>
      <!-- 判断样式 -->
      <!-- 浏览器操作 -->
      <div v-if="saveForm.operateType === '1'">
        <!-- 打开网页 -->
        <el-form-item prop="url" label="URL" v-show="saveForm.stepType === '1'">
          <el-input v-model="saveForm.url" placeholder="URL或路径" class="input" />
          <el-tooltip class="item" effect="dark" content="根据URL,打开指定的页面" placement="right">
            <i class="el-icon-info" style="margin-left: 20px;"></i>
          </el-tooltip>
        </el-form-item>
        <el-form-item v-show="saveForm.stepType === '1'">
          <el-checkbox 
            v-model="isAppendPageModel"
          >追加页面</el-checkbox>
          <el-tooltip class="item" effect="dark" content="追加页面，在新的页面打开url，不勾选覆盖当前url" placement="right">
            <i class="el-icon-info"></i>
          </el-tooltip>
        </el-form-item>
        <!-- 切换窗口 - 设置窗口大小 - 选择内嵌网页 -->
        <el-form-item label="操作" v-show="saveForm.stepType != '1' && saveForm.stepType != '2'">
          <el-select v-model="saveForm.operate" class="select">
            <el-option v-for="item in actionList" :key="Number(item.value)" :label="item.label"
              :value="Number(item.value)"></el-option>
          </el-select>
          <el-tooltip v-show="saveForm.stepType === '3' && saveForm.operate != null" class="item" effect="dark"
            content="如果是切换到指定窗口，需要传入句柄" placement="right">
            <i class="el-icon-info" style="margin-left: 10px;"></i>
          </el-tooltip>
          <el-tooltip v-show="saveForm.stepType === '4' && saveForm.operate === 2" class="item" effect="dark"
            content="指定尺寸，根据输入的宽度和高度，设置窗口的大小" placement="right">
            <i class="el-icon-info" style="margin-left: 10px;"></i>
          </el-tooltip>
          <el-tooltip v-show="saveForm.stepType === '5' && saveForm.operate != null" class="item" effect="dark"
            content="如果是切换 frame，需要传入索引或者元素定位后再切换" placement="right">
            <i class="el-icon-info" style="margin-left: 10px;"></i>
          </el-tooltip>
        </el-form-item>
        <!-- 切换窗口 -->
        <div v-show="saveForm.stepType === '3'">
          <!-- 根据句柄 ID 切换到指定窗口 -->
          <el-form-item prop="handleId" label="句柄ID" v-show="saveForm.operate === '1'">
            <el-input v-model="saveForm.handleId" placeholder="窗口句柄ID" class="input" />
          </el-form-item>
          <!-- 根据网页索引号切换到指定窗口 -->
          <el-form-item prop="pageIndex" label="网页索引号" v-show="saveForm.operate === '2'">
            <el-input-number v-model="saveForm.pageIndex" :min="1"></el-input-number>
            <el-tooltip class="item" effect="dark" content="选择打开过的第几个网页；例：比如索引值输入 3，那么效果会切换到已经打开过的第 3 个窗口(索引值从 1 开始计算)"
              placement="right">
              <i class="el-icon-info" style="margin-left: 10px;"></i>
            </el-tooltip>
          </el-form-item>
        </div>
        <!-- 设置窗口大小 -->
        <div v-show="saveForm.stepType === '4'">
          <el-form-item label="尺寸" v-show="saveForm.operate === 2">
            <el-input-number v-model="winSize.width" controls-position="right" :min="0"
              @change="changeWindSize"></el-input-number>
            <span style="margin: 0 5px;">X</span>
            <el-input-number v-model="winSize.height" controls-position="right" :min="0"
              @change="changeWindSize"></el-input-number>
            <el-tooltip class="item" effect="dark" content="以像素为单位" placement="right">
              <i class="el-icon-info" style="margin-left: 10px;"></i>
            </el-tooltip>
          </el-form-item>
        </div>
        <!-- 选择内嵌网页 -->
        <div v-show="saveForm.stepType === '5'">
          <el-form-item prop="frameIndex" label="frame索引号" v-show="saveForm.operate === 2">
            <el-input-number v-model="saveForm.frameIndex" :min="0"></el-input-number>
            <el-tooltip class="item" effect="dark"
              content="选择当前页面的第几个 frame；例：比如索引值输入 1，那么效果会切换到当前页面的第 2 个 frame(索引值从 0 开始计算)" placement="right">
              <i class="el-icon-info" style="margin-left: 20px;"></i>
            </el-tooltip>
          </el-form-item>
          <!-- 根据定位方式切换 frame -->
          <el-form-item prop="operateObject" label="操作对象" v-show="saveForm.operate === 3">
            <div class="operateObject-wrap">
              <el-select v-model="saveForm.operateObject" class="select" @change="handleOperateObjectChange">
                <el-option key="1" label="元素对象" value="1"></el-option>
                <el-option key="2" label="元素定位" value="2"></el-option>
              </el-select>
              <!-- 元素对象 -->
              <div v-show="saveForm.operateObject === '1'" class="operateObject-wrap">
                <el-select v-model="saveForm.operateGroupId" class="select" @change="handleOperateGroupChange" placeholder="请选择元素组">
                  <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select v-model="saveForm.operateElementId" class="select" placeholder="请选择元素">
                  <el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </div>
              <!-- 元素定位 -->
              <div v-show="saveForm.operateObject === '2'" class="operateObject-wrap">
                <el-select v-model="saveForm.operateLocType" class="select">
                  <el-option label="id" value="id"></el-option>
                  <el-option label="name" value="name"></el-option>
                  <el-option label="className" value="className"></el-option>
                  <el-option label="tagName" value="tagName"></el-option>
                  <el-option label="linkText" value="linkText"></el-option>
                  <el-option label="partialLinkText" value="partialLinkText"></el-option>
                  <el-option label="css" value="css"></el-option>
                  <el-option label="xpath" value="xpath"></el-option>
                  <el-option label="table" value="table"></el-option>
                  <el-option label="value" value="value"></el-option>
                  <el-option label="index" value="index"></el-option>
                </el-select>
                <el-input v-model="saveForm.operateLocValue" placeholder="请输入元素名称" class="select"></el-input>
              </div>
            </div>
          </el-form-item>
        </div>
      </div>
      <!-- 弹窗操作 -->
      <div v-if="saveForm.operateType === '2'">
        <el-form-item label="是否输入" prop="isEnter">
          <el-select v-model="saveForm.isEnter" class="select">
            <el-option key="1" label="否" value="1"></el-option>
            <el-option key="2" label="是" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作方式" prop="operateWay">
          <el-select v-model="saveForm.operateWay" class="select">
            <el-option key="1" label="确定" value="1"></el-option>
            <el-option key="2" label="取消" value="2"></el-option>
          </el-select>
          <el-tooltip class="item" effect="dark" content="点击弹窗确定按钮或取消按钮" placement="right" style="margin-left: 10px;">
            <i class="el-icon-info"></i>
          </el-tooltip>
        </el-form-item>
      </div>
      <!-- 元素操作 -->
      <div v-if="saveForm.operateType === '3'">
        <el-form-item label="操作" v-show="saveForm.stepType != '1'">
          <el-select v-model="saveForm.operate" class="select">
            <el-option v-for="item in actionList" :key="Number(item.value)" :label="item.label"
              :value="Number(item.value)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="operateObject" label="操作对象">
          <div class="operateObject-wrap">
            <el-select v-model="saveForm.operateObject" class="select">
              <el-option key="1" label="元素对象" value="1"></el-option>
              <el-option key="2" label="元素定位" value="2"></el-option>
            </el-select>
            <!-- 元素对象 -->
            <div v-show="saveForm.operateObject === '1'" class="operateObject-wrap">
              <el-select v-model="saveForm.operateGroupId" class="select" @change="handleOperateGroupChange" placeholder="请选择元素组">
                <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
              <el-select v-model="saveForm.operateElementId" class="select" placeholder="请选择元素">
                <el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
            <!-- 元素定位 -->
            <div v-show="saveForm.operateObject === '2'" class="operateObject-wrap">
              <el-select v-model="saveForm.operateLocType" class="select">
                <el-option label="id" value="id"></el-option>
                <el-option label="name" value="name"></el-option>
                <el-option label="className" value="className"></el-option>
                <el-option label="tagName" value="tagName"></el-option>
                <el-option label="linkText" value="linkText"></el-option>
                <el-option label="partialLinkText" value="partialLinkText"></el-option>
                <el-option label="css" value="css"></el-option>
                <el-option label="xpath" value="xpath"></el-option>
                <el-option label="table" value="table"></el-option>
                <el-option label="value" value="value"></el-option>
                <el-option label="index" value="index"></el-option>
              </el-select>
              <el-input v-model="saveForm.operateLocValue" placeholder="请输入元素名称" class="select"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="subOptions" label="子选项" v-show="saveForm.stepType === '2'">
          <el-select v-model="saveForm.subOptions" class="select">
            <el-option key="1" label="选项(Option)" value="1"></el-option>
            <el-option key="2" label="索引(Index)" value="2"></el-option>
            <el-option key="3" label="值(Value)" value="3"></el-option>
          </el-select>
          <el-input v-model="saveForm.subOptionsValue" placeholder="值" class="select"
            style="margin-left: 10px"></el-input>
        </el-form-item>
        <div v-show="saveForm.stepType === '4'">
          <!-- 等待文本 -->
          <el-form-item prop="awaitValue" label="等待文本" v-show="saveForm.operate === 1">
            <el-input v-model="saveForm.awaitValue" placeholder="等待文本" class="select"></el-input>
            <el-tooltip class="item" effect="dark" content="针对元素的Text属性，指页面展示出来的文本内容，等待超时时间为15000ms" placement="right">
              <i class="el-icon-info" style="margin-left: 20px;"></i>
            </el-tooltip>
          </el-form-item>
          <!-- 等待超时 -->
          <el-form-item label="等待超时" v-show="saveForm.operate != 1">
            <el-input-number v-model="saveForm.awaitValue" :min="1"></el-input-number>
            <span style="margin-left: 5px;">ms</span>
          </el-form-item>
        </div>
      </div>
      <!-- 鼠标操作 -->
      <div v-if="saveForm.operateType === '4'">
        <el-form-item label="点击方式" v-show="saveForm.stepType === '1'">
          <el-select v-model="saveForm.clickMethod" class="select">
            <el-option key="1" label="单击(左击)" value="1"></el-option>
            <el-option key="2" label="单击(右击)" value="2"></el-option>
            <el-option key="3" label="双击" value="3"></el-option>
            <el-option key="4" label="按下" value="4"></el-option>
            <el-option key="5" label="弹起" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="operateObject" label="元素位置" v-show="saveForm.stepType === '1'">
          <div class="operateObject-wrap">
            <el-select v-model="saveForm.operateObject" class="select">
              <el-option key="1" label="元素对象" value="1"></el-option>
              <el-option key="2" label="元素定位" value="2"></el-option>
            </el-select>
            <!-- 元素对象 -->
            <div v-show="saveForm.operateObject === '1'" class="operateObject-wrap">
              <el-select v-model="saveForm.operateGroupId" class="select" @change="handleOperateGroupChange" placeholder="请选择元素组">
                <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
              <el-select v-model="saveForm.operateElementId" class="select" placeholder="请选择元素">
                <el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
            <!-- 元素定位 -->
            <div v-show="saveForm.operateObject === '2'" class="operateObject-wrap">
              <el-select v-model="saveForm.operateLocType" class="select">
                <el-option label="id" value="id"></el-option>
                <el-option label="name" value="name"></el-option>
                <el-option label="className" value="className"></el-option>
                <el-option label="tagName" value="tagName"></el-option>
                <el-option label="linkText" value="linkText"></el-option>
                <el-option label="partialLinkText" value="partialLinkText"></el-option>
                <el-option label="css" value="css"></el-option>
                <el-option label="xpath" value="xpath"></el-option>
                <el-option label="table" value="table"></el-option>
                <el-option label="value" value="value"></el-option>
                <el-option label="index" value="index"></el-option>
              </el-select>
              <el-input v-model="saveForm.operateLocValue" placeholder="请输入元素名称" class="select"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="移动方式" v-show="saveForm.stepType === '2'">
          <el-select v-model="saveForm.clickMethod" class="select">
            <el-option key="1" label="鼠标移出元素" value="1"></el-option>
            <el-option key="2" label="鼠标移入元素" value="2"></el-option>
            <el-option key="3" label="鼠标从元素移到坐标位置" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="operateObject" label="鼠标位置" v-show="saveForm.stepType === '2'">
          <div class="operateObject-wrap">
            <el-select v-model="saveForm.operateObject" class="select">
              <el-option key="1" label="元素对象" value="1"></el-option>
              <el-option key="2" label="元素定位" value="2"></el-option>
            </el-select>
            <!-- 元素对象 -->
            <div v-show="saveForm.operateObject === '1'" class="operateObject-wrap">
              <el-select v-model="saveForm.operateGroupId" class="select" @change="handleOperateGroupChange" placeholder="请选择元素组">
                <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
              <el-select v-model="saveForm.operateElementId" class="select" placeholder="请选择元素">
                <el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
            <!-- 元素定位 -->
            <div v-show="saveForm.operateObject === '2'" class="operateObject-wrap">
              <el-select v-model="saveForm.operateLocType" class="select">
                <el-option label="id" value="id"></el-option>
                <el-option label="name" value="name"></el-option>
                <el-option label="className" value="className"></el-option>
                <el-option label="tagName" value="tagName"></el-option>
                <el-option label="linkText" value="linkText"></el-option>
                <el-option label="partialLinkText" value="partialLinkText"></el-option>
                <el-option label="css" value="css"></el-option>
                <el-option label="xpath" value="xpath"></el-option>
                <el-option label="table" value="table"></el-option>
                <el-option label="value" value="value"></el-option>
                <el-option label="index" value="index"></el-option>
              </el-select>
              <el-input v-model="saveForm.operateLocValue" placeholder="请输入元素名称" class="select"></el-input>
            </div>
          </div>
        </el-form-item>
      </div>
      <!-- 输入操作 -->
      <div v-if="saveForm.operateType === '5'">
        <el-form-item label="操作">
          <el-select v-model="saveForm.operate" class="select">
            <el-option v-for="item in actionList" :key="Number(item.value)" :label="item.label"
              :value="Number(item.value)"></el-option>
          </el-select>
          <el-tooltip class="item" effect="dark"
            content="可编辑段落的元素 contenteditable 属性必须为 true, 才可实现输入；例： contenteditable='true' 这是一段可编辑的段落。请试着编辑该文本。"
            placement="right">
            <i class="el-icon-info"></i>
          </el-tooltip>
        </el-form-item>
        <el-form-item prop="operateObject" label="操作对象">
          <div class="operateObject-wrap">
            <el-select v-model="saveForm.operateObject" class="select">
              <el-option key="1" label="元素对象" value="1"></el-option>
              <el-option key="2" label="元素定位" value="2"></el-option>
            </el-select>
            <!-- 元素对象 -->
            <div v-show="saveForm.operateObject === '1'" class="operateObject-wrap">
              <el-select v-model="saveForm.operateGroupId" class="select" @change="handleOperateGroupChange" placeholder="请选择元素组">
                <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
              <el-select v-model="saveForm.operateElementId" class="select" placeholder="请选择元素">
                <el-option v-for="item in elementList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
            <!-- 元素定位 -->
            <div v-show="saveForm.operateObject === '2'" class="operateObject-wrap">
              <el-select v-model="saveForm.operateLocType" class="select">
                <el-option label="id" value="id"></el-option>
                <el-option label="name" value="name"></el-option>
                <el-option label="className" value="className"></el-option>
                <el-option label="tagName" value="tagName"></el-option>
                <el-option label="linkText" value="linkText"></el-option>
                <el-option label="partialLinkText" value="partialLinkText"></el-option>
                <el-option label="css" value="css"></el-option>
                <el-option label="xpath" value="xpath"></el-option>
                <el-option label="table" value="table"></el-option>
                <el-option label="value" value="value"></el-option>
                <el-option label="index" value="index"></el-option>
              </el-select>
              <el-input v-model="saveForm.operateLocValue" placeholder="请输入元素名称" class="select"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="inputValue" label="输入内容">
          <el-input placeholder="请输入内容" v-model="saveForm.inputValue" type="textarea" :rows="4" class="input">
          </el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { listGroup } from "../../../api/test/group";
import { getElementList } from "../../../api/uiTest/elementLibrary";

export default {
  name: "SceneStep",
  props: {
    detail: {}, // 编辑的数据
  },
  data() {
    return {
      winSize: {
        height: 0,
        width: 0,
      },
      isAppendPageModel: false, // 追加页面的临时模型
      saveForm: {
        automationId: null, // 场景id
        name: null, // 名称
        operateType: null, // 操作类型
        stepType: null, // 步骤类型
        url: null, // url
        isAppendPage: 0, // 追加页面 - 使用0而不是false作为默认值
        operate: null, // 操作
        handleId: null, // 句柄ID
        pageIndex: 1, // 网页索引号
        windowSize: null, // 尺寸
        frameIndex: 0, // frame索引号
        operateObject: null, // 操作对象
        operateGroupId: null, // 元素对象
        operateElementId: null, // 元素对象
        operateLocType: null, // 元素定位
        operateLocValue: null, // 元素定位
        isEnter: null, // 是否输入
        operateWay: null, // 操作方式
        subOptions: null, // 子选项
        subOptionsValue: null, // 子选项值
        awaitValue: null, // 等待文本
        clickMethod: null, // 点击方式
        inputValue: null, // 输入内容
        beforeList: [], // 初始化前置操作列表
        afterList: [], // 初始化后置操作列表
        errorHandling: null, // 错误处理
        waitElementTime: null, // 等待元素时间
        screenshotConfiguration: null // 截图配置
      },
      rules: {
        name: [{ required: true, message: '请输入元素名称', trigger: 'blur' }],
        stepType: [{ required: true, message: '请选择步骤类型', trigger: 'blur' }],
        url: [{ required: true, message: '请输入URL或路径', trigger: 'blur' }],
        handleId: [{ required: true, message: '请输入句柄ID', trigger: 'blur' }],
        pageIndex: [{ required: true, message: '请选择网页索引号', trigger: 'blur' }],
        frameIndex: [{ required: true, message: '请选择frame索引号', trigger: 'blur' }],
        operateObject: [{ required: true, message: '请选择操作对象', trigger: 'blur' }],
        operateGroupId: [{ required: true, message: '请选择操作对象', trigger: 'blur' }],
        operateElementId: [{ required: true, message: '请选择操作对象', trigger: 'blur' }],
        operateLocType: [{ required: true, message: '请选择操作对象', trigger: 'blur' }],
        operateLocValue: [{ required: true, message: '请选择操作对象', trigger: 'blur' }],
        isEnter: [{ required: true, message: '请选择是否输入', trigger: 'blur' }],
        operateWay: [{ required: true, message: '请选择操作方式', trigger: 'blur' }],
        subOptions: [{ required: true, message: '请选择子选项', trigger: 'blur' }],
        subOptionsValue: [{ required: true, message: '请输入子选项值', trigger: 'blur' }],
        awaitValue: [{ required: true, message: '请输入等待文本', trigger: 'blur' }],
        clickMethod: [{ required: true, message: '请输入方式', trigger: 'blur' }],
        inputValue: [{ required: true, message: '请输入内容', trigger: 'blur' }],
      },
      typeList: [],// 步骤类型
      typeTitle: '', // 步骤类型
      typeName: '', // 步骤类型
      actionList: [], // 操作列表
      groupList: [], // 操作对象分组
      elementList: [], // 元素列表
    }
  },
  mounted() {
    // 确保在组件挂载时saveForm中有正确的初始值
    if (!this.detail || Object.keys(this.detail).length === 0) {
      this.$set(this.saveForm, 'isAppendPage', 0);
    }
    this.initData()
    this.getListGroupData()
  },
  methods: {
    // 初始化数据
    initData() {
      // 如果是编辑模式，会通过watch detail来设置saveForm
      if (!this.detail || Object.keys(this.detail).length === 0) {
        // 创建模式下，确保有初始值
        this.saveForm = {
          ...this.saveForm,
          isAppendPage: 0
        }
      }
    },
    // 步骤类型变换
    selectStepType() {
      // 置空操作
      // this.saveForm.operate = null
    },
    // 改变尺寸
    changeWindSize() {
      this.saveForm.windowSize = String(this.winSize.width) + '*' + String(this.winSize.height)
    },
    // 获取操作对象列表
    getListGroupData() {
      listGroup('element').then(res => {
        if (res.code === 200) {
          this.groupList = res.data
        }
      })
    },
    // 处理操作对象类型切换
    handleOperateObjectChange() {
      if (this.saveForm.operateObject === '2') {
        // 切换到元素定位时，清空元素对象相关的值
        this.saveForm.operateGroupId = null;
        this.saveForm.operateElementId = null;
        this.elementList = [];
      } else if (this.saveForm.operateObject === '1') {
        // 切换到元素对象时，如果之前有选择过分组，则重新获取元素列表
        if (this.saveForm.operateGroupId) {
          this.getElementListData(this.saveForm.operateGroupId);
        }
      }
    },
    // 获取元素列表
    getElementListData(groupId) {
      if (!groupId) return;
      
      getElementList({ groupId: groupId }).then(res => {
        if (res.code === 200) {
          this.elementList = res.rows;
          
          // 检查当前选中的operateElementId是否在新的列表中存在
          if (this.saveForm.operateElementId) {
            const elementExists = this.elementList.some(item => item.id === this.saveForm.operateElementId);
            if (!elementExists) {
              // 如果不存在，清空选择
              this.saveForm.operateElementId = null;
            }
          }
        }
      })
    },
    // 元素组变化时触发
    handleOperateGroupChange() {
      if (this.saveForm.operateGroupId) {
        this.getElementListData(this.saveForm.operateGroupId);
      } else {
        this.elementList = [];
        this.saveForm.operateElementId = null;
      }
    },
  },
  watch: {
    // 监听操作对象类型的变化
    'saveForm.operateObject': {
      handler(newVal, oldVal) {
        if (newVal === '1' && this.saveForm.operateGroupId) {
          // 当切换到元素对象且已有分组ID时，重新获取元素列表
          this.getElementListData(this.saveForm.operateGroupId);
        }
      }
    },
    // 监听复选框模型的变化
    isAppendPageModel: {
      immediate: true,
      handler(val) {
        this.saveForm.isAppendPage = val ? 1 : 0;
        console.log('isAppendPageModel changed:', val, this.saveForm.isAppendPage);
      }
    },
    // 监听saveForm中isAppendPage的变化来更新复选框状态
    'saveForm.isAppendPage': {
      immediate: true,
      handler(val) {
        this.isAppendPageModel = val === 1;
        console.log('isAppendPage changed:', val, this.isAppendPageModel);
      }
    },
    detail(newVal, oldVal) {
      this.saveForm = newVal
      // 如果是元素对象且有元素组ID，获取元素列表
      if (this.saveForm.operateObject === '1' && this.saveForm.operateGroupId) {
        this.getElementListData(this.saveForm.operateGroupId)
      }
    },
    saveForm: {
      handler(newVal, oldVal) {
        // 判断操作类型
        switch (newVal.operateType) {
          case '1': // 浏览器操作
            this.typeList = [{ label: '打开网页', value: '1' }, { label: '关闭网页', value: '2' }, { label: '切换窗口', value: '3' },
            { label: '设置窗口大小', value: '4' }, { label: '选择内嵌网页', value: '5' }]
            // 判断步骤类型
            switch (newVal.stepType) {
              case '1': // 打开网页
                this.typeTitle = '使用指定的浏览器打开网页'
                break
              case '2': // 关闭网页
                this.typeTitle = '关闭当前网页'
                break
              case '3': // 切换窗口
                this.typeTitle = '切换到指定窗口'
                this.actionList = [{ label: '根据句柄 ID 切换到指定窗口', value: '1' }, { label: '根据网页索引号切换到指定窗口', value: '2' },
                { label: '切换到初始窗口', value: '3' }]
                break
              case '4': // 设置窗口大小
                this.typeTitle = '设置窗口大小'
                this.actionList = [{ label: '窗口最大化', value: '1' }, { label: '指定尺寸(像素为单位)', value: '2' }]
                break
              case '5': // 选择内嵌网页
                this.typeTitle = '从当前 window 选择 frame(对 frame 标签起作用)'
                this.actionList = [{ label: '退出当前 frame(回到主页面)', value: '1' }, { label: '根据 frame 索引号切换到指定 frame', value: '2' },
                { label: '根据定位方式切换 frame', value: '3' }]
                break
            }
            break
          case '2': // 弹窗操作
            this.typeList = [{ label: '弹窗操作', value: '1' }]
            // 判断步骤类型
            switch (newVal.stepType) {
              case '1': // 弹窗操作
                this.typeTitle = '对无法进行元素定位的弹窗实现的操作 (注：弹框事件不会产生截图)'
                break
            }
            break
          case '3': // 元素操作
            this.typeList = [{ label: '提交表单', value: '1' }, { label: '下拉框操作', value: '2' }, { label: '设置选项', value: '3' },
            { label: '等待元素', value: '4' }]
            // 判断步骤类型
            switch (newVal.stepType) {
              case '1': // 提交表单
                this.typeTitle = '针对属性type="submit"的元素，用于提交表单数据'
                break
              case '2': // 下拉框操作
                this.typeTitle = '对下拉选项进行操作，可实现单选，多选，以及取消选择的操作'
                this.actionList = [{ label: '选择', value: '1' }, { label: '取消', value: '2' }]
                break
              case '3': // 设置选项
                this.typeTitle = '用于设置 checkbox/radio 的状态'
                this.actionList = [{ label: '选择', value: '1' }, { label: '取消', value: '2' }]
                break
              case '4': // 等待元素
                this.typeTitle = '对页面对象执行指定的等待操作，默认等待超时15000ms'
                this.actionList = [{ label: '等待元素等于给定的定值(Text)', value: '1' }, { label: '等待元素存在', value: '2' },
                { label: '等待元素显示', value: '3' }, { label: '等待元素不显示', value: '4' },
                { label: '等待元素不存在', value: '5' }, { label: '等待元素可编辑', value: '6' }, { label: '等待元素不可编辑', value: '7' }]
                break
            }
            break
          case '4': // 鼠标操作
            this.typeList = [{ label: '鼠标点击', value: '1' }, { label: '鼠标移动', value: '2' }]
            // 判断步骤类型
            switch (newVal.stepType) {
              case '1': // 鼠标点击
                this.typeTitle = '模拟鼠标点击的操作，支持单击/双击/按下/弹起'
                break
              case '2': // 鼠标移动
                this.typeTitle = '将鼠标悬停在网页元素的上方'
                break
            }
            break
          case '5': // 输入操作
            this.typeList = [{ label: '输入操作', value: '1' }]
            // 判断步骤类型
            switch (newVal.stepType) {
              case '1': // 输入操作
                this.typeTitle = '对元素实现输入的操作'
                this.actionList = [{ label: '输入框', value: '1' }, { label: '可编辑段落', value: '2' }]
                break
            }
            break
        }

        // 尺寸
        if (newVal.windowSize != null) {
          let result = newVal.windowSize.split(/\*/);
          if (result.length > 0) {
            this.winSize.width = result[0]
            this.winSize.height = result[1]
          }
        }

        // 确保数组已初始化
        const beforeList = this.saveForm.beforeList || [];
        const afterList = this.saveForm.afterList || [];
        var newList = [...beforeList, ...afterList];

        // 错误处理
        var param3 = {
          settingType: '3',
          errorHandling: this.saveForm.errorHandling,
        }
        newList.push(param3)
        // 其他设置
        var param4 = {
          settingType: '4',
          otherSettingsQO: {
            waitElementTime: this.saveForm.waitElementTime,
            screenshotConfiguration: this.saveForm.screenshotConfiguration
          }
        }
        newList.push(param4)

        this.$emit('changeSetting', newList)
      },
      deep: true
    },
  },
  computed: {
    appendPageValue: {
      get() {
        return this.saveForm && typeof this.saveForm.isAppendPage !== 'undefined' ? this.saveForm.isAppendPage === 1 : false;
      },
      set(value) {
        if (!this.saveForm) {
          this.saveForm = {};
        }
        this.saveForm.isAppendPage = value ? 1 : 0;
        console.log('appendPageValue changed:', value, this.saveForm.isAppendPage);
      }
    }
  },
}
</script>

<style scoped lang="scss">
.scene-step {
  padding: 20px;

  .title {
    padding: 10px 20px;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .input {
    width: 700px;
  }

  .select {
    width: 200px;
  }

  .operateObject-wrap {
    display: flex;
    gap: 10px;
  }
}
</style>
