<template>
  <div>
    <div id="dialog" class="test test-1 drag" v-if="show_dialog">
      <div class="header_title"> 添加场景用例</div>
      <el-form :model="sceneCaseForm" style="margin-left:50px;margin-top:20px;">
        <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: 70%;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" style="margin-left:200px;margin-top:30px;">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button type="primary" @click="addCaseDetailFrom">确 定</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import {
  getCaseByInterface,
  getModulList,
  interfaceDetailList
} from '@/api/getAotoInterface'
export default {
  props: {
    msgchange: { type: Boolean }
  },
  data() {
    return {
      sceneCaseForm: {
        // moduleFrom: '',
        // interfaceFrom: '',
        caseDetail: []
      },
      moduleFrom: {},
      interfaceFrom: {},
      newFrom: {
        newModule: '',
        newInterface: ''
      },
      moduleInfo: {
        pageNum: 1,
        pageSize: 100
      },
      modelList: [],
      interfaceList: [],
      interfaceInfo: {
        pageNum: 1,
        pageSize: 100,
        moduleId: ''
      },
      caseInfo: {
        interfaceId: ''
      },
      caseList: [],
      show_dialog: false
    }
  },
  created() {
    this.getModelList()
  },
  methods: {
    // 获取模块列表
    getModelList() {
      getModulList(this.moduleInfo).then((resp) => {
        this.modelList = resp.data.data.list
        console.log('列表信息', this.modelList)
      })
    },
    // 模块下拉框改变事件
    selectChangeModel() {
      console.log('下拉款信息', this.sceneCaseForm.moduleFrom)
      this.interfaceInfo.moduleId = this.moduleFrom.id
      this.sceneCaseForm.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.sceneCaseForm.caseDetail = row
    },
    // 保存事件
    addCaseDetailFrom() {
      // 子组件向父组件传递的信息
      this.$emit('childFn', this.sceneCaseForm)
    },
    // 取消事件
    cancelForm() {
      this.show_dialog = false
    },
    // 父组件传递的事件
    addSceneCase(param) {
      if (param) {
        this.show_dialog = true
      }
    }
  }
}
</script>
<style lang="less" scoped>
#dialog {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background-color: #ffffff;
  position: fixed;
  top: 40%;
  left: 60%;
  margin: -120px 0 0 -150px;
  z-index: 1000;
  border: 2px solid #ccc;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow: 3px 2px 4px #ccc;
  -webkit-box-shadow: 3px 2px 4px #ccc;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
}
.header_title {
  margin-left: 20px;
  margin-top: 20px;
  font-size: 18px;
  color: #303133;
}

.test {
  width: 50px;
  height: 120px;
  overflow: auto;
  float: left;
  margin: 5px;
  border: none;
}
.scrollbar {
  width: 30px;
  height: 300px;
  margin: 0 auto;
}
.test-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
}
.test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}
.drag {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
}
</style>
