<template>
  <div class="create-scene">
    <div class="left-wrap">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick" stretch>
        <el-tab-pane label="基础信息" name="first">
          <el-form ref="form" :rules="rules" label-width="80px" :model="informationForm" label-position="right">
            <el-form-item prop='name' label="名称">
              <el-input v-model="informationForm.name" placeholder="请输入名称" maxlength="100" show-word-limit></el-input>
            </el-form-item>
            <el-form-item prop='groupId' label="模块">
              <el-select v-model="informationForm.groupId">
                <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 prop='status' label="状态">
              <el-select v-model="informationForm.status" placeholder="请选择状态">
                <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='dutyBy' label="责任人">
              <el-input v-model="informationForm.dutyBy" placeholder="请选择责任人"></el-input>
            </el-form-item>
            <el-form-item prop='caseLevel' label="用例等级">
              <el-select v-model="informationForm.caseLevel" placeholder="请选择用例等级">
                <el-option key="P0" label="P0" value="P0"></el-option>
                <el-option key="P1" label="P1" value="P1"></el-option>
                <el-option key="P2" label="P2" value="P2"></el-option>
                <el-option key="P3" label="P3" value="P3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop='label' label="标签">
              <el-input v-model="informationForm.label" placeholder="请输入标签"></el-input>
            </el-form-item>
            <el-form-item prop='description' label="描述">
              <el-input v-model="informationForm.description" placeholder="请输入描述" type="textarea" :rows="2"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="场景步骤" name="second">
          <el-menu :default-active="String(defaultActive)" @select="handleSelect">
            <div v-for="(item, index) in informationForm.uiSceneStepsVOList">
              <el-menu-item :index="String(index + 1)">
                <div class="menu-wrap">
                  <div class="stepCount">{{ index + 1 }}</div>
                  <div>{{ item.name }}</div>
                  <el-button type="text" icon="el-icon-delete" class="delete-btn"
                    @click="deleteStep(index)"></el-button>
                </div>
              </el-menu-item>
            </div>
          </el-menu>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="scene-wrap">
      <div class="scene-header">
        <el-button size="mini" @click="handleClickSave">保存</el-button>
      </div>
      <SceneStep v-show="informationForm.uiSceneStepsVOList.length > 0" :detail="changeStep" />
      <AdvancedSetting v-show="informationForm.uiSceneStepsVOList.length > 0" :detail="changeStep"
        @changeSetting="changeSetting" />
    </div>
    <!-- 添加步骤 -->
    <div class="add-btn">
      <el-dropdown @command="handleCommand" :hide-on-click="false">
        <el-button icon="el-icon-circle-plus-outline" type="text" style="font-size: 30px;"></el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="浏览器操作">浏览器操作</el-dropdown-item>
          <el-dropdown-item command="弹窗操作">弹窗操作</el-dropdown-item>
          <el-dropdown-item command="元素操作">元素操作</el-dropdown-item>
          <el-dropdown-item command="鼠标操作">鼠标操作</el-dropdown-item>
          <el-dropdown-item command="输入操作">输入操作</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import AdvancedSetting from './advancedSetting.vue'
import SceneStep from './sceneStep.vue'
import { getAutomationDetail, addAutomation } from '../../../api/uiTest/automationTest'
import { listGroup } from "../../../api/test/group"

export default {
  name: "AddScene",
  components: { AdvancedSetting, SceneStep },
  data() {
    return {
      activeName: 'first',
      groupList: [], // 分组
      informationForm: {
        automationId: null, // 场景id
        name: null, // 名称
        groupId: null,  // 模块
        status: null,  // 状态
        dutyBy: null,  // 责任人
        caseLevel: null,   // 用例等级
        label: null, // 标签
        description: null,  // 描述
        uiSceneStepsVOList: [], // 场景步骤
      },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        groupId: [{ required: true, message: '请选择模块', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
        dutyBy: [{ required: true, message: '请输入责任人', trigger: 'blur' }],
      },
      stepList: [],
      defaultActive: 0, // 当前激活菜单的 index
      changeStep: { operateType: null }, // 选中的步骤
    }
  },
  mounted() {
    this.getGroupListData()
  },
  methods: {
    handleClick() { },
    // 
    getGroupListData() {
      listGroup('automation').then(res => {
        if (res.code === 200) {
          this.groupList = res.data
        }
      })
    },
    // 修改高级设置
    changeSetting(val) {
      this.informationForm.uiSceneStepsVOList[this.defaultActive - 1].uiHighSettingVOList = val
    },

    // 删除步骤
    deleteStep(index) {
      this.$modal.confirm('确认删除该步骤' + '？').then(() => {
        this.informationForm.uiSceneStepsVOList.splice(index, 1);
      }).catch(() => { })
    },
    // 场景步骤
    handleSelect(key, keyPath) {
      this.defaultActive = Number(key)
      this.changeStep = this.informationForm.uiSceneStepsVOList[this.defaultActive - 1]
    },
    // 添加步骤
    handleCommand(command) {
      var param = {
        name: null,
        operateType: null,
        stepType: '1',
        automationId: this.$route.query.id
      }
      switch (command) {
        case '浏览器操作':
          param.name = '打开网页'
          param.operateType = '1'
          break
        case '弹窗操作':
          param.name = '弹窗操作'
          param.operateType = '2'
          break
        case '元素操作':
          param.name = '提交表单'
          param.operateType = '3'
          break
        case '鼠标操作':
          param.name = '鼠标点击'
          param.operateType = '4'
          break
        case '输入操作':
          param.name = '输入操作'
          param.operateType = '5'
          break
      }
      this.informationForm.uiSceneStepsVOList.splice(this.defaultActive, 0, param);
      this.changeStep = this.informationForm.uiSceneStepsVOList[this.defaultActive]
      this.defaultActive++;
    },
    // 保存
    handleClickSave() {
      if (this.informationForm.name === null || this.informationForm.name === '') {
        this.$modal.msgWarning("请输入名称！");
        return
      }
      if (this.informationForm.groupId === null || this.informationForm.groupId === '') {
        this.$modal.msgWarning("请选择模块！");
        return
      }
      if (this.informationForm.status === null || this.informationForm.status === '') {
        this.$modal.msgWarning("请选择状态");
        return
      }
      if (this.informationForm.dutyBy === null || this.informationForm.dutyBy === '') {
        this.$modal.msgWarning("请输入责任人");
        return
      }
      addAutomation(this.informationForm).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess("编辑成功")
          this.$tab.closeOpenPage({ path: "/ui-test/automation-test" });
        } else {
          this.$modal.msgError("编辑失败")
        }

      })
    },
  }
}
</script>

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

  .left-wrap {
    width: 300px;
    overflow: auto;

    .menu-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      position: relative;

      .delete-btn {
        position: absolute;
        right: 0px;
      }

      .stepCount {
        width: 20px;
        height: 20px;
        border: solid 1px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

  }

  .scene-wrap {
    width: 100%;

    .scene-header {
      display: flex;
      justify-content: flex-end;
      padding-right: 30px;
    }
  }

  .add-btn {
    position: fixed;
    bottom: 100px;
    right: 100px;
  }
}

::v-deep .el-menu-item {
  height: 36px;
  line-height: 36px;
}

::v-deep .el-menu-item.is-active {
  background-color: white;
  /* 自定义背景色 */
  color: #409EFF;
  /* 自定义字体颜色 */
}
</style>
