<template>
  <div>
    <el-form ref="sceneForm" :rules="rules" :model="sceneForm" label-width="90px">
      <el-form-item label="场景名称:" prop="name" style="width:300px">
        <el-input v-model="sceneForm.name"></el-input>
      </el-form-item>
      <el-form-item label="项目名称:" prop="projectId">
        <el-select v-model="sceneForm.projectId" placeholder="请选择项目" clearable>
          <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" plain @click="DialogVisible = true" class="el-icon-circle-plus">添加</el-button>
        <el-table :data="sceneCaseList" border style="width: 100%;margin-top:20px">
          <el-table-column type='index' width="50px"></el-table-column>
          <el-table-column prop="moduleName" label="模块名称" width="200px"></el-table-column>
          <el-table-column prop="interfaceName" label="接口名称" width="200px"></el-table-column>
          <!-- <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="200px"></el-table-column> -->
          <el-table-column label="操作">
            <slot slot-scope="scope">
              <el-button type="success" @click="editeSceneFrom(scope.row)">编辑</el-button>
              <el-button type="danger" @click="deleSceneFrom(scope.row)">删除</el-button>
            </slot>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <div style="margin-left:500px;margin-top:20px">
          <el-button type="primary" @click="addSceneCaseFrom">确 定</el-button>
        </div>
      </el-form-item>
    </el-form>
    <!-- 添加场景用例 -->
    <el-dialog title="新增场景用例" :visible.sync="DialogVisible" width="30%">
      <el-form :model="sceneCaseForm" label-width="90px">
        <el-form-item label="模块名称:" style="width:300px">
          <el-select v-model="moduleFrom" value-key="id" placeholder="请选择模块" @change="selectChangeModel" clearable>
            <el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接口名称:" style="width:500px">
          <el-select v-model="interfaceFrom" value-key="id" placeholder="请选择接口" @change="selectChangeInterface" clearable>
            <el-option v-for="item in interfaceList" :key="item.id" :label="item.name" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-table :data="caseList" border style="width: 100%;margin-left:1px" @selection-change="handleSelectionChange">
            <el-table-column type="selection" style="width:10%">
            </el-table-column>
            <el-table-column type='index' style="width:15%"></el-table-column>
            <el-table-column prop="name" label="用例名称" style="width:60%"></el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSceneFrom">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import bus from '@/utils/bus'
import {
  getProjectList,
  getModulList,
  interfaceDetailList,
  getCaseByInterface
} from '@/api/getAotoInterface'
import { getSceneCaseList } from '@/api/getAutoScene'
export default {
  data() {
    return {
      queryProjectList: {
        pageNum: 1,
        pageSize: 20
      },
      sceneForm: {
        name: '',
        projectId: ''
      },
      projectList: [],
      rules: {
        name: [
          {
            required: true,
            message: '场景名称不能为空！',
            trigger: 'blur'
          }
        ],
        projectId: [
          {
            required: true,
            message: '项目名称不能为空！',
            trigger: 'blur'
          }
        ]
      },
      sceneCaseForm: {},
      sceneCaseList: [],
      sceneCaseInfo: {
        sceneId: ''
      },
      DialogVisible: false,
      modelList: [],
      interfaceList: [],
      moduleInfo: {
        pageNum: 1,
        pageSize: 100
      },
      interfaceInfo: {
        pageNum: 1,
        pageSize: 100,
        moduleId: ''
      },
      caseInfo: {
        interfaceId: ''
      },
      moduleFrom: {},
      interfaceFrom: {},
      caseList: [],
      newFrom: {
        moduleName: '',
        moduleId: '',
        interfaceName: '',
        interfaceId: '',
        caseDetialList: []
      }
    }
  },
  created() {
    this.getProjectList()
    bus.$on('scenemsg', (row) => {
      // console.log('参数信息', row)
      this.sceneForm.name = row.name
      this.sceneForm.projectId = row.projectId
      this.sceneCaseInfo.sceneId = row.id
      this.getSceneCaseList()
    })
    this.getModelList()
  },
  methods: {
    // 获取项目列表
    getProjectList() {
      getProjectList(this.queryProjectList).then((resp) => {
        this.projectList = resp.data.data.list
      })
    },
    // 获取场景用例列表
    getSceneCaseList() {
      getSceneCaseList(this.sceneCaseInfo).then((resp) => {
        this.sceneCaseList = resp.data.data.list
      })
    },
    // 获取模块列表
    getModelList() {
      getModulList(this.moduleInfo).then((resp) => {
        this.modelList = resp.data.data.list
      })
    },
    // 模块下拉框改变事件
    selectChangeModel() {
      this.interfaceInfo.moduleId = this.moduleFrom.id
      interfaceDetailList(this.interfaceInfo).then((resp) => {
        this.interfaceList = resp.data.data.list
      })
    },
    // 选择接口下拉框改变事件
    selectChangeInterface() {
      this.caseInfo.interfaceId = this.interfaceFrom.id
      getCaseByInterface(this.caseInfo).then((resp) => {
        this.caseList = resp.data.data
      })
    },
    // 选择事件
    handleSelectionChange(row) {
      this.newFrom.caseDetialList = row
    },
    // 确定按钮
    addSceneFrom() {
      this.newFrom.moduleId = this.moduleFrom.id
      this.newFrom.moduleName = this.moduleFrom.name
      this.newFrom.interfaceId = this.interfaceFrom.id
      this.newFrom.interfaceName = this.interfaceFrom.name
      console.log('列表信息', this.sceneCaseList)
      // var newCaseList = []
      this.sceneCaseList.push({
        moduleName: this.newFrom.moduleName,
        interfaceName: this.newFrom.interfaceName
      })
      console.log('新列表信息', this.sceneCaseList)
      this.DialogVisible = false
      this.moduleFrom = ''
      this.interfaceFrom = ''
      this.caseList = []
    },
    // 保存场景用例方法
    addSceneCaseFrom() {}
  }
}
</script>
