<template>
  <div>
    <el-card>
      <div>
        模块:
        <el-select v-model="selectModelId" placeholder="请选择模块" @change="selectChangeModel" clearable>
          <el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-input v-model="queryModuleInfo.testcaseName" clearable placeholder="请输入用例名称" style="width: 300px;"></el-input>
        <el-button type="primary" style="margin-left:10px" icon="el-icon-search" @click="queryData">查询</el-button>
        <el-button type="primary" style="margin-left:10px" icon="el-icon-circle-plus" @click="addPage" v-permission="('auto:testcase:add')">新增</el-button>
      </div>
      <el-table :data="singleCaseList" border style="width: 100%;margin-top:20px">
        <el-table-column type='index' width="50px">
          <template slot-scope="scope">
            <span>{{  (queryModuleInfo.pageNum -1 ) * queryModuleInfo.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="用例名称" width="250px"></el-table-column>
        <el-table-column prop="interfaceName" label="接口名称" width="250px"></el-table-column>
        <el-table-column prop="moduleName" label="模块名称" width="200px"></el-table-column>
        <el-table-column prop="createTime" label="创建日期" width="200px"></el-table-column>
        <el-table-column label="操作">
          <slot slot-scope="scope">
            <el-button type="success" icon="el-icon-link" @click="executeCaseFrom(scope.row)">执行</el-button>
            <el-button type="warning" icon="el-icon-edit" @click="editCaseFrom(scope.row)" v-permission="('auto:testcase:edit')">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delCaseFrom(scope.row)" v-permission="('auto:testcase:del')">删除</el-button>
          </slot>
        </el-table-column>
      </el-table>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize" layout="total, prev, pager, next" :total="totalNum"></el-pagination>
    </el-card>
    <!-- 接口返回数据 -->
    <el-card v-if="isShow">
      <div slot="header" v-if="this.requestData.length>0" style="margin-left:20px">
        <el-row>
          <el-col :span="2">name:</el-col>
          <el-col :span="22">
            <json-viewer :expand-depth=3 :value='this.requestData[0].name' style="margin-top:-25px"></json-viewer>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">url:</el-col>
          <el-col :span="22">
            <json-viewer :expand-depth=3 :value='this.requestData[0].url' style="margin-top:-25px"></json-viewer>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="2">headers:</el-col>
          <el-col :span="22">
            <json-viewer :expand-depth=3 :value='this.requestData[0].headers' style="margin-top:-25px"></json-viewer>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">parameters:</el-col>
          <el-col :span="22">
            <json-viewer :expand-depth=3 :value='this.requestData[0].parameters' style="margin-top:-25px"></json-viewer>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">response:</el-col>
          <el-col :span="22">
            <json-viewer :expand-depth=3 :value='this.requestData[0].response' style="margin-top:-25px"></json-viewer>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">assertResult:</el-col>
          <el-col :span="22">
            <json-viewer :expand-depth=3 :value='this.requestData[0].assertResult' style="margin-top:-25px"></json-viewer>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">elapsedTime:</el-col>
          <el-col :span="22">
            <json-viewer :expand-depth=3 :value='this.requestData[0].elapsedTime + "ms"' style="margin-top:-25px"></json-viewer>
          </el-col>
        </el-row>

      </div>
    </el-card>
  </div>
</template>
<script>
import { getModulList } from '@/api/getAotoInterface'
import { singleCaseList, executeCase, delCase } from '@/api/getAutoCase'
export default {
  data() {
    return {
      queryModuleInfo: {
        pageNum: 1,
        pageSize: 10,
        moduleId: '',
        testcaseName: ''
      },
      moduleInfo: {
        pageNum: 1,
        pageSize: 100
      },
      totalNum: 0,
      modelList: [],
      selectModelId: '',
      singleCaseList: [],
      delCase: {
        testcaseId: ''
      },
      executeCaseParam: {
        namespace: '',
        testcaseId: ''
      },
      isShow: false,
      requestData: []
    }
  },
  created() {
    this.isShow = false
    this.getModulList()
    this.getCaseList()
    this.$bus.$on('refresh', () => {
      this.isShow = false
      this.getCaseList()
    })
  },
  methods: {
    // 获取模块列表
    getModulList() {
      getModulList(this.moduleInfo).then((resp) => {
        this.modelList = resp.data.data.list
      })
    },
    // 下拉框改变事件
    selectChangeModel() {
      this.queryModuleInfo.moduleId = this.selectModelId
    },
    // 查询方法
    queryData() {
      this.getCaseList()
    },
    // 获取case列表
    getCaseList() {
      singleCaseList(this.queryModuleInfo).then((resp) => {
        this.singleCaseList = resp.data.data.list
        this.totalNum = resp.data.data.total
      })
    },
    // 添加方法
    addPage() {
      this.$router.push('AddCase')
      this.$nextTick(function () {
        // DOM 现在更新了
        var row = '新增'
        this.$bus.$emit('casemsg', row)
      })
    },
    // 执行用例
    executeCaseFrom(row) {
      this.isShow = true
      // 获取用例id
      this.executeCaseParam.testcaseId = row.id
      this.executeCaseParam.namespace = window.sessionStorage.getItem('env')
      // 获取当前场景
      executeCase(this.executeCaseParam).then((resp) => {
        var resultData = resp.data.data
        this.requestData = []
        // 将返回的对象数据转化成数组
        this.requestData.push(resultData)
        if (resp.data.data === false) {
          this.isShow = false
          this.requestData = []
          this.$message.error(resp.data.msg)
        }
      })
    },
    // 编辑用例
    editCaseFrom(row) {
      this.$router.push({ path: 'AddCase' })
      // bus使用
      this.$nextTick(function () {
        // DOM 现在更新了
        this.$bus.$emit('casemsg', row)
      })
    },
    // 对话框方法
    openMessage(message, confirmText, doit) {
      this.$messageBox
        .confirm(message, '确定', {
          cancelButtonText: '取消',
          confirmButtonText: confirmText,
          type: 'warning'
        })
        .then(() => {
          doit()
        })
        .catch(() => {})
    },
    // 删除用例
    delCaseFrom(row) {
      this.delCase.testcaseId = row.id
      this.openMessage('您确定要删除吗？', '删除', () => {
        delCase(this.delCase)
          .then((resp) => {
            if (resp.data.data === true) {
              this.$message.success('删除成功！')
              this.getCaseList()
            } else if (resp.data.data === false) {
              this.$message.error(resp.data.msg)
            }
          })
          .catch((error) => {
            this.$message({ type: 'error', message: error })
          })
      })
    },
    handleSizeChange(newSize) {
      this.queryModuleInfo.pageSize = newSize
      this.getCaseList()
    },
    handleCurrentChange(newPage) {
      this.queryModuleInfo.pageNum = newPage
      this.getCaseList()
    }
  }
}
</script>

<style lang="less" scoped>
.el-select {
  margin: 0 10px 0 5px;
}
</style>
