<template>
  <div class="scene-step">
    <div class="title">场景步骤</div>
    <el-form :model="saveForm" :rules="rules" label-width="100px">
      <el-form-item prop="stepName" label="名称">
        <el-input v-model="saveForm.stepName" placeholder="请输入名称" maxlength="100" show-word-limit @input="changeInput"
          class="input" />
      </el-form-item>
      <el-form-item prop="type" label="步骤类型">
        <el-select v-model="saveForm.type" placeholder="请选择" class="select" @change="changeSelectType">
          <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-show="typeName === '打开网页'">
        <el-form-item prop="url" label="URL">
          <el-input v-model="saveForm.stepName" 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>
          <el-radio v-model="saveForm.radio" label="1">追加页面</el-radio>
          <el-tooltip class="item" effect="dark" content="追加页面，在新的页面打开url，不勾选覆盖当前url" placement="right">
            <i class="el-icon-info"></i>
          </el-tooltip>
        </el-form-item>
      </div>
      <div v-show="typeName === '弹窗操作'">
        <el-form-item label="是否输入" prop="isInput">
          <el-select v-model="saveForm.isInput" class="select">
            <el-option key="1" label="是" value="1"></el-option>
            <el-option key="0" label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作方式" prop="actionType">
          <el-select v-model="saveForm.actionType" class="select">
            <el-option key="1" label="确定" value="1"></el-option>
            <el-option key="0" label="取消" value="0"></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-show="typeName === '切换窗口' || typeName === '设置窗口大小' || typeName === '选择内嵌网页' || typeName === '下拉框操作' || typeName === '设置选项'">
        <el-form-item label="操作">
          <el-select v-model="saveForm.action" class="select">
            <el-option v-for="item in actionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div v-show="typeName === '提交表单' || typeName === '下拉框操作' || typeName === '设置选项' || typeName === '等待元素'">
        <el-form-item label="操作对象">
          <el-select v-model="saveForm.action" class="select">
            <el-option key="1" label="元素对象" value="1"></el-option>
            <el-option key="1" label="元素定位" value="1"></el-option>
          </el-select>
          <el-select v-model="saveForm.action" class="select" style="margin: 0px 10px;">
            <el-option key="1" label="元素对象" value="1"></el-option>
            <el-option key="1" label="元素定位" value="1"></el-option>
          </el-select>
          <el-select v-model="saveForm.action" class="select">
            <el-option key="1" label="元素对象" value="1"></el-option>
            <el-option key="1" label="元素定位" value="1"></el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "SceneStep",
  props: {
    step: '',
  },
  data() {
    return {
      saveForm: {
        stepName: null,
        type: '1',
        url: null,
        radio: true,
        action: null,
        isInput: null,
        actionType: null
      },
      rules: {
        stepName: [{ required: true, message: '请输入元素名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择步骤类型', trigger: 'blur' }],
        url: [{ required: true, message: '请输入URL或路径', trigger: 'blur' }],
        isInput: [{ required: true, message: '请选择是否输入', trigger: 'blur' }],
        actionType: [{ required: true, message: '请选择操作方式', trigger: 'blur' }],
      },
      typeList: [],// 步骤类型
      typeTitle: '', // 步骤类型
      typeName: '', // 步骤类型
      actionList: [],
    }
  },
  mounted() {
  },
  methods: {
    changeInput(val) {
      this.$emit('stepNameChange', val);
    },
    changeSelectType(val) {
      this.saveForm.stepName = this.typeList[val - 1].label
      this.typeName = this.typeList[val - 1].label
      this.$emit('stepNameChange', this.saveForm.stepName);
      switch (this.typeList[val - 1].label) {
        case '打开网页': this.typeTitle = '使用指定的浏览器打开网页'
          break
        case '关闭网页':
          this.typeTitle = '关闭当前网页'
          break
        case '切换窗口':
          this.typeTitle = '切换到指定窗口'
          this.actionList = [{ label: '根据句柄ID切换到指定窗口', value: '1' }, { label: '根据网页索引号切换到指定窗口', value: '2' }, { label: '切换到初始窗口', value: '3' }]
          break
        case '设置窗口大小':
          this.typeTitle = '设置窗口大小'
          this.actionList = [{ label: '窗口最大化', value: '1' }, { label: '指定尺寸(像素为单位)', value: '2' }]
          break
        case '选择内嵌网页':
          this.typeTitle = '选择内嵌网页'
          this.actionList = [{ label: '退出当前frame(回到主页面)', value: '1' }, { label: '根据frame索引号切换到指定frame', value: '2' }, { label: '根据定位方式切换frame', value: '3' }]
          break
        case '提交表单':
          this.typeTitle = '针对属性type="submit”的元素，用于提交表单数据'
          break
        case '下拉框操作':
          this.typeTitle = '对下拉选项进行操作，可实现单选，多选，以及取消选择的操作'
          this.actionList = [{ label: '选择', value: '1' }, { label: '取消', value: '2' }]
          break
        case '设置选项':
          this.typeTitle = '用于设置 checkbox/radio 的状态'
          this.actionList = [{ label: '选择', value: '1' }, { label: '取消', value: '2' }]
          break
      }
    },
  },
  watch: {
    step(newVal, oldVal) {
      this.saveForm.stepName = newVal
      this.typeName = newVal
      switch (newVal) {
        case '打开网页':
          this.typeList = [{ label: '打开网页', value: '1' }, { label: '关闭网页', value: '2' }, { label: '切换窗口', value: '3' },
          { label: '设置窗口大小', value: '4' }, { label: '选择内嵌网页', value: '5' }]
          this.typeTitle = '使用指定的浏览器打开网页'
          break
        case '弹窗操作':
          this.typeList = [{ label: '弹窗操作', value: '1' }]
          this.typeTitle = '对无法进行元素定位的弹窗实现的操作 (注：弹框事件不会产生截图)'
          break
        case '提交表单':
          this.typeList = [{ label: '提交表单', value: '1' }, { label: '下拉框操作', value: '2' }, { label: '设置选项', value: '3' },
          { label: '等待元素', value: '4' }]
          this.typeTitle = '针对属性type="submit”的元素，用于提交表单数据'
          break
        case '鼠标点击':
          this.typeList = [{ label: '鼠标点击', value: '1' }, { label: '鼠标移动', value: '2' }]
          this.typeTitle = '模拟鼠标点击的操作，支持单击/双击/按下/弹起'
          break
        case '输入操作':
          this.typeList = [{ label: '输入操作', value: '1' }]
          this.typeTitle = '对元素实现输入的操作'
          break
      }
    }
  },
}
</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;
  }
}
</style>
