<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='name1' label="模块">
              <el-input v-model="informationForm.name1" placeholder="请选择模块"></el-input>
            </el-form-item>
            <el-form-item prop='name2' label="状态">
              <el-input v-model="informationForm.name2" placeholder="请选择状态"></el-input>
            </el-form-item>
            <el-form-item prop='name3' label="责任人">
              <el-input v-model="informationForm.name3" placeholder="请选择责任人"></el-input>
            </el-form-item>
            <el-form-item prop='level' label="用例登记">
              <el-input v-model="informationForm.level" placeholder="请选择用例登记"></el-input>
            </el-form-item>
            <el-form-item prop='remark' label="标签">
              <el-input v-model="informationForm.remark" placeholder="请输入标签"></el-input>
            </el-form-item>
            <el-form-item prop='descriptions' label="描述">
              <el-input v-model="informationForm.descriptions" 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 stepList">
              <el-menu-item :index="String(index + 1)">
                <div class="menu-wrap">
                  <div class="stepCount">{{ index + 1 }}</div>
                  <div>{{ item.name }}</div>
                </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="defaultActive != 0" :step="stepName" @stepNameChange="stenNameChange" />
      <AdvancedSetting v-show="defaultActive != 0" />
    </div>
    <!-- 添加步骤 -->
    <div class="add-btn">
      <el-dropdown @command="handleClickAddStep" :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'

export default {
  name: "AddScene",
  components: { AdvancedSetting, SceneStep },
  data() {
    return {
      activeName: 'first',
      informationForm: {
        name: null,
        name1: null,
        name2: null,
        name3: null,
        level: null,
        remark: null,
        descriptions: null,
      },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        name1: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        name2: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        name3: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      },
      stepList: [],
      defaultActive: 0, // 当前激活菜单的 index
      stepName: null, // 当前所选中的步骤的名称
    }
  },
  mounted() {
  },
  methods: {
    handleClick() { },
    // 场景步骤
    handleSelect(key, keyPath) {
      this.defaultActive = Number(key)
      this.stepName = this.stepList[Number(key) - 1].name
    },
    // 添加步骤
    handleClickAddStep(command) {
      var param = {
        name: '',
      }
      switch (command) {
        case '浏览器操作':
          param.name = '打开网页'
          break
        case '弹窗操作':
          param.name = '弹窗操作'
          break
        case '元素操作':
          param.name = '提交表单'
          break
        case '鼠标操作':
          param.name = '鼠标点击'
          break
        case '输入操作':
          param.name = '输入操作'
          break
      }
      this.stepName = param.name
      this.stepList.splice(this.defaultActive, 0, param);
      this.defaultActive++;
    },
    // 步骤名称同步
    stenNameChange(val) {
      this.stepName = val
      this.stepList[this.defaultActive - 1].name = val
    },
    // 保存
    handleClickSave() {
      console.log('保存')
    },
  }
}
</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;

      .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>
