<template>
  <div class="advanced-setting">
    <div class="title">高级设置</div>
    <div class="tab-wrap">
      <el-tabs v-model="activeName">
        <el-tab-pane v-if="detail.operateType != '1' && detail.operateType != '2'" label="元素库" name="first">
          <div class="element-wrap">
            <div class="header">
              <el-button icon="el-icon-circle-plus-outline" size="mini" @click="addElementData">创建元素</el-button>
              <div class="searchInput">
                <i class="el-icon-search"></i>
                <el-input class="input" v-model="searchForm.name" placeholder="根据名称搜索" @blur="searchName"></el-input>
              </div>
            </div>
            <div class="list">
              <el-table :data="elementList">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="ID" width="50" align="center" sortable />
                <el-table-column prop="locType" label="定位类型" min-width="150" align="center" />
                <el-table-column prop="name" label="名称" min-width="150" align="center" />
                <el-table-column prop="groupNamePath" label="所属模块" min-width="150" align="center" />
                <el-table-column prop="elementLoc" label="元素定位" min-width="150" align="center" />
              </el-table>
              <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
            </div>
            <!-- 创建元素、编辑元素 -->
            <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
              <div class="form">
                <el-form :model="editForm" :rules="rules" label-position="right" label-width="80px">
                  <el-form-item label="元素名称" prop="name">
                    <el-input v-model="editForm.name" placeholder="请输入元素名称"></el-input>
                  </el-form-item>
                  <el-form-item label="所属模块" prop="groupId">
                    <el-select v-model="editForm.groupId" placeholder="请选择">
                      <el-option v-for="item in groupList" :key="item.id" :label="item.name"
                        :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="定位类型" prop="locType">
                    <el-select v-model="editForm.locType" placeholder="请选择">
                      <el-option v-for="(item, index) in typeList" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="元素定位" prop="elementLoc">
                    <el-input v-model="editForm.elementLoc" placeholder="请输入元素定位"></el-input>
                  </el-form-item>
                  <el-form-item label="备注" prop="description">
                    <el-input v-model="editForm.description" placeholder="请输入备注" type="textarea" :rows="2"></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleWithAdd()">确 定</el-button>
              </span>
            </el-dialog>
          </div>
        </el-tab-pane>
        <el-tab-pane label="前置操作" name="second">
          <el-select v-model="saveForm.before" class="select">
            <el-option key="1" label="等待时间" value="1"></el-option>
            <el-option key="3" label="数据提取" value="3"></el-option>
          </el-select>
          <el-button type="primary" plain style="margin-left: 10px;" @click="addBefore">添加</el-button>
          <div class="list">
            <div v-for="(item, index) in saveForm.beforeList">
              <!-- 等待时间 -->
              <div v-if="item.operateType === '1'" class="time">
                <div class="time-left">
                  <div class="number">{{ index + 1 }}</div>
                  <div>等待时间</div>
                  <el-input-number v-model="item.awateTime" :min="0"></el-input-number>
                </div>
                <div class="time-right">
                  <el-switch v-model="item.isDisabled" :active-value="1" :inactive-value="0">
                  </el-switch>
                  <el-button type="text" icon="el-icon-delete" style="color: red;"
                    @click="beforeDelete(index)"></el-button>
                </div>
              </div>
              <!-- 数据提取 -->
              <div v-if="item.operateType === '3'">
                <el-collapse v-model="index" accordion>
                  <el-collapse-item name="1">
                    <template slot="title">
                      <div class="time">
                        <div class="time-left">
                          <div class="number">{{ index + 1 }}</div>
                          <div>数据提取</div>
                          <el-input v-model="item.name" class="select" @click.native.stop></el-input>
                        </div>
                        <div class="time-right">
                          <el-switch v-model="item.isDisabled" active-value="1" inactive-value="0"
                            @click.native.stop></el-switch>
                          <el-button type="text" icon="el-icon-delete" style="color: red;"
                            @click="beforeDelete(index)"></el-button>
                        </div>
                      </div>
                    </template>
                    <div class="collapse-content">
                      <div style="margin-bottom: 20px;">将提取的内容保存到变量中</div>
                      <el-select v-model="saveForm.informationType" class="select">
                        <el-option key="1" label="提取窗口信息" value="1"></el-option>
                        <el-option key="2" label="提取元素信息" value="2"></el-option>
                      </el-select>
                      <el-select v-if="saveForm.informationType === '1'" v-model="saveForm.windowType" class="select"
                        style="margin: 0 10px;">
                        <el-option key="1" label="窗口 Handle(storeWindowHandle)" value="1"></el-option>
                        <el-option key="2" label="网页标题(storeTitle) " value="2"></el-option>
                      </el-select>
                      <el-select v-if="saveForm.informationType === '2'" v-model="saveForm.elementType" class="select"
                        style="margin: 0 10px;">
                        <el-option key="1" label="普通对象(store)" value="1"></el-option>
                        <el-option key="2" label="元素文本(storeText)" value="2"></el-option>
                        <el-option key="3" label="元素值(storeValue)" value="3"></el-option>
                        <el-option key="4" label="元素属性(storeAttribute)" value="4"></el-option>
                        <el-option key="5" label="CSS属性(storeCssAttribute)" value="5"></el-option>
                        <el-option key="6" label="匹配 xpath 的元素数量(storeXpathCount)" value="6"></el-option>
                      </el-select>
                      <el-button type="primary" plain @click="addBeforeDataExtractionQOList(index)">添加</el-button>
                      <!-- 提取窗口信息 -->
                      <div v-if="item.dataExtractionQOList.windowExtractions.length > 0" class="information">
                        <div>提取窗口信息</div>
                        <div v-for="(row, index1) in item.dataExtractionQOList.windowExtractions">
                          <div class="time">
                            <div class="time-left">
                              <el-select v-model="row.windowType" class="select">
                                <el-option key="1" label="窗口 Handle(storeWindowHandle)" value="1"></el-option>
                                <el-option key="2" label="网页标题(storeTitle) " value="2"></el-option>
                              </el-select>
                              <el-input class="select" v-model="row.value" style="margin:0px 10px;"
                                placeholder="请输入"></el-input>
                              <el-tooltip class="item" effect="dark"
                                content="将提取的内容保存到变量中，如果元素不存在，则返回值为 'NoSuchElementException'" placement="right">
                                <i class="el-icon-info"></i>
                              </el-tooltip>
                            </div>
                            <div class="time-right">
                              <el-switch v-model="row.isDisabled" active-value="1" inactive-value="0"
                                @click.native.stop></el-switch>
                              <el-button type="text" icon="el-icon-delete" style="color: red;"
                                @click="beforeWindowDelete(index, index1)"></el-button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- 提取元素信息 -->
                      <div v-if="item.dataExtractionQOList.elementExtractions.length > 0" class="information">
                        <div>提取元素信息</div>
                        <div v-for="(row, index1) in item.dataExtractionQOList.elementExtractions">
                          <div class="time">
                            <div class="time-left">
                              <el-select v-model="row.elementType" class="select">
                                <el-option key="1" label="普通对象(store)" value="1"></el-option>
                                <el-option key="2" label="元素文本(storeText)" value="2"></el-option>
                                <el-option key="3" label="元素值(storeValue)" value="3"></el-option>
                                <el-option key="4" label="元素属性(storeAttribute)" value="4"></el-option>
                                <el-option key="5" label="CSS属性(storeCssAttribute)" value="5"></el-option>
                                <el-option key="6" label="匹配 xpath 的元素数量(storeXpathCount)" value="6"></el-option>
                              </el-select>
                              <el-input class="select" v-model="row.value" style="margin:0px 10px;"
                                placeholder="请输入变量"></el-input>
                              <el-tooltip class="item" effect="dark"
                                content="将提取的内容保存到变量中，如果元素不存在，则返回值为 'NoSuchElementException'" placement="right">
                                <i class="el-icon-info"></i>
                              </el-tooltip>
                            </div>
                            <div class="time-right">
                              <el-switch v-model="row.isDisabled" active-value="1" inactive-value="0"
                                @click.native.stop></el-switch>
                              <el-button type="text" icon="el-icon-delete" style="color: red;"
                                @click="beforeElemetDelete(index, index1)"></el-button>
                            </div>
                          </div>
                          <!--  普通对象(store) -->
                          <div v-if="row.elementType === '1'" class="time">
                            <el-input class="select" v-model="row.elementAttribute" placeholder="普通对象"></el-input>
                          </div>
                          <!--  -->
                          <div v-else class="operateObject-wrap" style="padding: 10px;">
                            <el-select v-model="row.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="row.operateObject != '2'" class="operateObject-wrap">
                              <el-select v-model="row.operateGroupId" class="select" @change="getOperateGroup">
                                <el-option v-for="item in groupList" :key="item.id" :label="item.name"
                                  :value="item.id"></el-option>
                              </el-select>
                              <el-select v-model="row.operateElementId" class="select">
                                <el-option v-for="item in elementList" :key="item.id" :label="item.name"
                                  :value="item.id"></el-option>
                              </el-select>
                            </div>
                            <!-- 元素定位 -->
                            <div v-show="row.operateObject === '2'" class="operateObject-wrap">
                              <el-select v-model="row.operateLocType" class="select" @change="getOperateLoc">
                                <el-option v-for="item in groupList" :key="item.id" :label="item.name"
                                  :value="item.id"></el-option>
                              </el-select>
                              <el-select v-model="row.operateLocValue" class="select">
                                <el-option v-for="item in elementList" :key="item.id" :label="item.name"
                                  :value="item.id"></el-option>
                              </el-select>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="后置操作" name="third">
          <el-select v-model="saveForm.after" 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-button type="primary" plain style="margin-left: 10px;" @click="addAfter">添加</el-button>
          <div class="list">
            <div v-for="(item, index) in saveForm.afterList">
              <!-- 等待时间 -->
              <div v-if="item.operateType === '1'" class="time">
                <div class="time-left">
                  <div class="number">{{ index + 1 }}</div>
                  <div>等待时间</div>
                  <el-input-number v-model="item.awateTime" :min="0"></el-input-number>
                </div>
                <div class="time-right">
                  <el-switch v-model="item.isDisabled" :active-value="1" :inactive-value="0">
                  </el-switch>
                  <el-button type="text" icon="el-icon-delete" style="color: red;"
                    @click="afterDelete(index)"></el-button>
                </div>
              </div>
              <!-- 数据提取 -->
              <div v-if="item.operateType === '3'">
                <el-collapse v-model="index" accordion>
                  <el-collapse-item name="1">
                    <template slot="title">
                      <div class="time">
                        <div class="time-left">
                          <div class="number">{{ index + 1 }}</div>
                          <div>数据提取</div>
                          <el-input v-model="item.name" class="select" @click.native.stop></el-input>
                        </div>
                        <div class="time-right">
                          <el-switch v-model="item.isDisabled" active-value="1" inactive-value="0"
                            @click.native.stop></el-switch>
                          <el-button type="text" icon="el-icon-delete" style="color: red;"
                            @click="afterDelete(index)"></el-button>
                        </div>
                      </div>
                    </template>
                    <div class="collapse-content">
                      <div style="margin-bottom: 20px;">将提取的内容保存到变量中</div>
                      <el-select v-model="saveForm.informationType" class="select">
                        <el-option key="1" label="提取窗口信息" value="1"></el-option>
                        <el-option key="2" label="提取元素信息" value="2"></el-option>
                      </el-select>
                      <el-select v-if="saveForm.informationType === '1'" v-model="saveForm.windowType" class="select"
                        style="margin: 0 10px;">
                        <el-option key="1" label="窗口 Handle(storeWindowHandle)" value="1"></el-option>
                        <el-option key="2" label="网页标题(storeTitle) " value="2"></el-option>
                      </el-select>
                      <el-select v-if="saveForm.informationType === '2'" v-model="saveForm.elementType" class="select"
                        style="margin: 0 10px;">
                        <el-option key="1" label="普通对象(store)" value="1"></el-option>
                        <el-option key="2" label="元素文本(storeText)" value="2"></el-option>
                        <el-option key="3" label="元素值(storeValue)" value="3"></el-option>
                        <el-option key="4" label="元素属性(storeAttribute)" value="4"></el-option>
                        <el-option key="5" label="CSS属性(storeCssAttribute)" value="5"></el-option>
                        <el-option key="6" label="匹配 xpath 的元素数量(storeXpathCount)" value="6"></el-option>
                      </el-select>
                      <el-button type="primary" plain @click="addAfterDataExtractionQOList(index)">添加</el-button>
                      <!-- 提取窗口信息 -->
                      <div v-if="item.dataExtractionQOList.windowExtractions.length > 0" class="information">
                        <div>提取窗口信息</div>
                        <div v-for="(row, index1) in item.dataExtractionQOList.windowExtractions">
                          <div class="time">
                            <div class="time-left">
                              <el-select v-model="row.windowType" class="select">
                                <el-option key="1" label="窗口 Handle(storeWindowHandle)" value="1"></el-option>
                                <el-option key="2" label="网页标题(storeTitle) " value="2"></el-option>
                              </el-select>
                              <el-input class="select" v-model="row.value" style="margin:0px 10px;"
                                placeholder="请输入"></el-input>
                              <el-tooltip class="item" effect="dark"
                                content="将提取的内容保存到变量中，如果元素不存在，则返回值为 'NoSuchElementException'" placement="right">
                                <i class="el-icon-info"></i>
                              </el-tooltip>
                            </div>
                            <div class="time-right">
                              <el-switch v-model="row.isDisabled" active-value="1" inactive-value="0"
                                @click.native.stop></el-switch>
                              <el-button type="text" icon="el-icon-delete" style="color: red;"
                                @click="afterWindowDelete(index, index1)"></el-button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- 提取元素信息 -->
                      <div v-if="item.dataExtractionQOList.elementExtractions.length > 0" class="information">
                        <div>提取元素信息</div>
                        <div v-for="(row, index1) in item.dataExtractionQOList.elementExtractions">
                          <div class="time">
                            <div class="time-left">
                              <el-select v-model="row.elementType" class="select">
                                <el-option key="1" label="普通对象(store)" value="1"></el-option>
                                <el-option key="2" label="元素文本(storeText)" value="2"></el-option>
                                <el-option key="3" label="元素值(storeValue)" value="3"></el-option>
                                <el-option key="4" label="元素属性(storeAttribute)" value="4"></el-option>
                                <el-option key="5" label="CSS属性(storeCssAttribute)" value="5"></el-option>
                                <el-option key="6" label="匹配 xpath 的元素数量(storeXpathCount)" value="6"></el-option>
                              </el-select>
                              <el-input class="select" v-model="row.value" style="margin:0px 10px;"
                                placeholder="请输入变量"></el-input>
                              <el-tooltip class="item" effect="dark"
                                content="将提取的内容保存到变量中，如果元素不存在，则返回值为 'NoSuchElementException'" placement="right">
                                <i class="el-icon-info"></i>
                              </el-tooltip>
                            </div>
                            <div class="time-right">
                              <el-switch v-model="row.isDisabled" active-value="1" inactive-value="0"
                                @click.native.stop></el-switch>
                              <el-button type="text" icon="el-icon-delete" style="color: red;"
                                @click="afterElemetDelete(index, index1)"></el-button>
                            </div>
                          </div>
                          <!--  普通对象(store) -->
                          <div v-if="row.elementType === '1'" class="time">
                            <el-input class="select" v-model="row.elementAttribute" placeholder="普通对象"></el-input>
                          </div>
                          <!--  -->
                          <div v-else class="operateObject-wrap" style="padding: 10px;">
                            <el-select v-model="row.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="row.operateObject != '2'" class="operateObject-wrap">
                              <el-select v-model="row.operateGroupId" class="select" @change="getOperateGroup">
                                <el-option v-for="item in groupList" :key="item.id" :label="item.name"
                                  :value="item.id"></el-option>
                              </el-select>
                              <el-select v-model="row.operateElementId" class="select">
                                <el-option v-for="item in elementList" :key="item.id" :label="item.name"
                                  :value="item.id"></el-option>
                              </el-select>
                            </div>
                            <!-- 元素定位 -->
                            <div v-show="row.operateObject === '2'" class="operateObject-wrap">
                              <el-select v-model="row.operateLocType" class="select" @change="getOperateLoc">
                                <el-option v-for="item in groupList" :key="item.id" :label="item.name"
                                  :value="item.id"></el-option>
                              </el-select>
                              <el-select v-model="row.operateLocValue" class="select">
                                <el-option v-for="item in elementList" :key="item.id" :label="item.name"
                                  :value="item.id"></el-option>
                              </el-select>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="错误处理" name="forth">
          <el-form :model="saveForm">
            <el-form-item label="处理方式">
              <el-select v-model="saveForm.errorHandling" 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>
        </el-tab-pane>
        <el-tab-pane label="其他设置" name="fifth">
          <el-form :model="saveForm">
            <el-form-item v-show="detail.operateType != '1' && detail.operateType != '2'" label="等待元素超时时间">
              <el-input-number v-model="saveForm.waitElementTime" :min="0"></el-input-number>
              <el-tooltip class="item" effect="dark"
                content="如果步骤涉及的元素定位在一定时间内无法找到元素，将会提示超时错误。(注：若超时错误的日志显示会四舍五入成 秒，但不影响等待具体时长)" placement="right">
                <i class="el-icon-info" style="margin-left: 20px;"></i>
              </el-tooltip>
            </el-form-item>
            <el-form-item label="截图配置">
              <el-select v-model="saveForm.screenshotConfiguration" 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-tooltip class="item" effect="dark" content="当前步骤截图: 场景步骤执行后截图，步骤如果触发原生弹窗（alert或prompt），或不存在页面时，截图不生效;出现异常截图: 
              当前步骤出现异常截图,包括场景步骤异常、数据提取和断言异常;
              不截图: 当前场景步骤不截图。" placement="right">
                <i class="el-icon-info" style="margin-left: 20px;"></i>
              </el-tooltip>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

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

export default {
  name: "AdvancedSetting",
  props: {
    detail: {}, // 编辑的数据
  },
  data() {
    return {
      activeName: 'first',
      uiHighSettingVOList: [], // 
      saveForm: {
        errorHandling: '1', // 错误处理
        waitElementTime: 15000, // 等待元素超时时间
        screenshotConfiguration: 1, // 截图配置
        beforeList: [], // 前置数组
        afterList: [], // 后置数组
        before: '1',
        after: '1',
        informationType: '1',
        windowType: null,
        elementType: null,
      },
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        name: null,
      },
      elementList: [],
      total: 0,
      editForm: {
        name: null, // 元素名称
        groupId: null,  // 所属模块
        locType: null, // 定位类型
        elementLoc: null, // 元素定位
        description: null, // 备注
      },
      dialogTitle: '',
      dialogVisible: false,
      groupList: [], // 分组
      typeList: ['id', 'name', 'className', 'tagName', 'linkText', 'partialLinkText', 'css', 'xpath', 'lable', 'value', 'index'],
      rules: {
        name: [{ required: true, message: '请输入元素名称', trigger: 'blur' }],
        groupId: [{ required: true, message: '请选择所属模块', trigger: 'blur' }],
        locType: [{ required: true, message: '请选择定位类型', trigger: 'blur' }],
        elementLoc: [{ required: true, message: '请输入元素定位', trigger: 'blur' }],
      },
      groupList: [], // 操作对象分组
      elementList: [], // 操作对象分组
    }
  },
  mounted() {
    this.getGroupListData()
    this.getElementData()
  },
  methods: {
    // 
    getGroupListData() {
      listGroup('element').then(res => {
        if (res.code === 200) {
          this.groupList = res.data
        }
      })
    },
    // 获取元素
    getElementData() {
      getElementList(this.searchForm).then(res => {
        if (res.code === 200) {
          this.elementList = res.rows
          this.total = res.total
        }
      })
    },
    // 创建元素
    addElementData() {
      this.dialogTitle = '创建元素'
      this.dialogVisible = true
      for (let key in this.editForm) {
        this.editForm[key] = null
      }
    },
    // 搜索
    searchName() {
      this.getElementData();
    },
    // 确定
    handleWithAdd() {
      // 创建元素
      addElement(this.editForm).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess("创建成功")
          this.dialogVisible = false
          this.getElementData()
        } else {
          this.$modal.msgError("创建失败");
        }
      })
    },
    // 分页
    handleSizeChange(val) {
      this.searchForm.pageSize = val
      this.getElementData();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val
      this.getElementData();
    },
    // 添加 - 前置操作
    addBefore() {
      if (this.saveForm.before === '1') {
        // 等待时间
        var param = {
          settingType: '1', // 前置操作
          operateType: '1', // 等待时间
          awateTime: 15000,
          isDisabled: '1',
        }
        this.saveForm.beforeList.push(param)
      } else {
        // 数据提取
        var param = {
          settingType: '1', // 前置操作
          operateType: '3', // 数据提取
          dataExtractionQOList: {
            windowExtractions: [], // 提取窗口信息
            elementExtractions: [], // 提取元素信息
          },
          isDisabled: '1',
          name: '数据提取',
        }
        this.saveForm.beforeList.push(param)
      }
    },
    // 添加 - 后置操作
    addAfter() {
      if (this.saveForm.after === '1') {
        // 等待时间
        var param = {
          settingType: '2', // 后置操作
          operateType: '1', // 等待时间
          awateTime: 15000,
          isDisabled: '1',
        }
        this.saveForm.afterList.push(param)
      } else {
        // 数据提取
        var param = {
          settingType: '2', // 后置操作
          operateType: '3', // 数据提取
          dataExtractionQOList: {
            windowExtractions: [], // 提取窗口信息
            elementExtractions: [], // 提取元素信息
          },
          isDisabled: '1',
          name: '数据提取',
        }
        this.saveForm.afterList.push(param)
      }
    },
    // 删除
    beforeDelete(val) {
      this.saveForm.beforeList = this.saveForm.beforeList.filter((item, index) => index !== val);
    },
    afterDelete(val) {
      this.saveForm.afterList = this.saveForm.afterList.filter((item, index) => index !== val);
    },
    // 添加
    addBeforeDataExtractionQOList(index) {
      if (this.saveForm.informationType === '1' && this.saveForm.windowType != null) {
        // 提取窗口信息且子分类不为空
        var param = {
          windowType: this.saveForm.windowType,
          value: null,
          isDisabled: '1',
          informationType: '1',
        }
        this.saveForm.beforeList[index].dataExtractionQOList.windowExtractions.push(param)
      } else if (this.saveForm.informationType === '2' && this.saveForm.elementType != null) {
        // 提取元素信息且子分类不为空
        var param = {
          elementType: this.saveForm.elementType,
          value: null,
          isDisabled: '1',
          elementAttribute: null,
          informationType: '2',
          operateObject: null, // 操作对象
          operateGroupId: null, // 元素对象
          operateElementId: null, // 元素对象
          operateLocType: null, // 元素定位
          operateLocValue: null, // 元素定位
        }
        this.saveForm.beforeList[index].dataExtractionQOList.elementExtractions.push(param)
      } else {
        this.$modal.msgError("请选择子分类");
      }
    },
    addAfterDataExtractionQOList(index) {
      if (this.saveForm.informationType === '1' && this.saveForm.windowType != null) {
        // 提取窗口信息且子分类不为空
        var param = {
          windowType: this.saveForm.windowType,
          value: null,
          isDisabled: '1',
          informationType: '1',
        }
        this.saveForm.afterList[index].dataExtractionQOList.windowExtractions.push(param)
      } else if (this.saveForm.informationType === '2' && this.saveForm.elementType != null) {
        // 提取元素信息且子分类不为空
        var param = {
          elementType: this.saveForm.elementType,
          value: null,
          isDisabled: '1',
          elementAttribute: null,
          informationType: '2',
          operateObject: null, // 操作对象
          operateGroupId: null, // 元素对象
          operateElementId: null, // 元素对象
          operateLocType: null, // 元素定位
          operateLocValue: null, // 元素定位
        }
        this.saveForm.afterList[index].dataExtractionQOList.elementExtractions.push(param)
      } else {
        this.$modal.msgError("请选择子分类");
      }
    },
    // 删除
    beforeWindowDelete(val, val1) {
      this.saveForm.beforeList[val].dataExtractionQOList.windowExtractions = this.saveForm.beforeList[val].dataExtractionQOList.windowExtractions.filter((item, index) => index !== val1)
    },
    beforeElemetDelete(val, val1) {
      this.saveForm.beforeList[val].dataExtractionQOList.elementExtractions = this.saveForm.beforeList[val].dataExtractionQOList.elementExtractions.filter((item, index) => index !== val1)
    },
    afterWindowDelete(val, val1) {
      this.saveForm.afterList[val].dataExtractionQOList.windowExtractions = this.saveForm.afterList[val].dataExtractionQOList.windowExtractions.filter((item, index) => index !== val1)
    },
    afterElemetDelete(val, val1) {
      this.saveForm.afterList[val].dataExtractionQOList.elementExtractions = this.saveForm.afterList[val].dataExtractionQOList.elementExtractions.filter((item, index) => index !== val1)
    },
    // 元素对象
    getOperateGroup() {
      this.getElementListData(this.saveForm.operateGroupId)
    },
    // 元素定位
    getOperateLoc() {
      this.getElementListData(this.saveForm.operateLocType)
    },
    // 获取元素列表
    getElementListData(id) {
      getElementList({ groupId: id }).then(res => {
        if (res.code === 200) {
          this.elementList = res.rows
        }
      })
    },

  },
  watch: {
    detail(newVal, oldVal) {
      if (newVal === null) {
        return
      }
      this.saveForm.beforeList = []
      this.saveForm.afterList = []

      if (newVal.operateType != '1' && newVal.operateType != '2') {
        this.activeName = 'first'
      } else {
        this.activeName = 'second'
      }
      if (newVal.uiHighSettingVOList != null) {
        this.uiHighSettingVOList = newVal.uiHighSettingVOList
      }
      this.uiHighSettingVOList.forEach(item => {
        switch (item.settingType) {
          // 前置操作
          case '1':
            this.saveForm.beforeList.push(item)
            break
          // 后置操作
          case '2':
            this.saveForm.afterList.push(item)
            break
          // 错误处理
          case '3':
            this.saveForm.errorHandling = item.errorHandling
            break
          // 其他设置 
          case '4':
            if (item.otherSettingsQO != null) {
              this.saveForm.waitElementTime = item.otherSettingsQO.waitElementTime
              this.saveForm.screenshotConfiguration = item.otherSettingsQO.screenshotConfiguration
            }
            break
        }
      })

    },
    saveForm: {
      handler(newVal, oldVal) {
        // 前置操作

        // 后置操作

        var newList = [...this.saveForm.beforeList, ...this.saveForm.afterList]
        // 错误处理
        var param3 = {
          settingType: '3',
          errorHandling: this.saveForm.errorHandling,
        }
        newList.push(param3)
        // 其他设置
        var param4 = {
          settingType: '4',
          waitElementTime: this.saveForm.waitElementTime,
          screenshotConfiguration: this.saveForm.screenshotConfiguration,
        }
        newList.push(param4)
        this.$emit('changeSetting', newList)
      },
      deep: true
    },
  }
}
</script>

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

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

  .tab-wrap {
    padding: 0 20px;
  }

  .element-wrap {
    .header {
      display: flex;
      justify-content: space-between;

      .searchInput {
        display: flex;
        align-items: center;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        padding: 0 10px;

        .input {
          width: 200px;
        }

        /* 去除 el-input 的边框 */
        ::v-deep .el-input__inner {
          border: none !important;
        }
      }
    }

    .list {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: flex-end;
    }
  }

  .select {
    width: 200px;
  }


  .list {
    padding: 20px 0px;

    .number {
      height: 24px;
      width: 24px;
      border-radius: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: solid 1px black;
    }

    .time {
      display: flex;
      align-items: center;
      padding: 10px;
      justify-content: space-between;
      width: 100%;

      .time-left {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .time-right {
        gap: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }

    .collapse-content {
      padding: 15px;

      .information {
        padding: 10px;
      }
    }

  }

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