<template>
  <div>
    <el-card>
      <div>
        场景名称：
        <el-input v-model="queryModuleInfo.sceneName" 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="DialogVisible = true" v-permission="('auto:scene:add')">新增</el-button>
      </div>
      <el-table :data="sceneList" 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="200px"></el-table-column>
        <el-table-column prop="projectName" 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" size="medium" icon="el-icon-link" @click="executeSceneFrom(scope.row)" style="width:80px;margin-left:1px">执行</el-button>
            <el-button type="warning" size="medium" icon="el-icon-edit-outline" @click="editeSceneCaseFrom(scope.row)" style="width:135px;margin-left:1px" v-permission="('auto:scene:case:edit')" >编辑场景用例</el-button>
            <el-button type="warning" size="medium" icon="el-icon-edit" @click="editeSceneFrom(scope.row)" style="width:110px;margin-left:1px" v-permission="('auto:scene:edit')">编辑场景</el-button>
            <el-button type="primary" size="medium" icon="el-icon-circle-check" @click="checkReport(scope.row)" style="width:110px;margin-left:1px">查看报告</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deleSceneFrom(scope.row)" v-permission="('auto:scene: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">
        <el-row>
          <el-col :span="3">
            <div>响应结果 :</div>
          </el-col>
        </el-row>
        <json-viewer :expand-depth=3 :value="requestData"></json-viewer>
      </div>
    </el-card>
    <!-- 新增场景页面-->
    <el-dialog title="新增场景" :visible.sync="DialogVisible" width="30%" @close="closeAddDialog">
      <el-form ref="addSceneFormRef" :rules="rules" :model="addSceneForm" label-width="90px">
        <el-form-item label="场景名称:" prop="name" style="width:400px">
          <el-input v-model="addSceneForm.name" placeholder="请输入场景"></el-input>
        </el-form-item>
        <el-form-item label="项目名称:" prop="projectId" style="width:400px">
          <el-select v-model="addSceneForm.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>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSceneFrom">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑场景页面-->
    <el-dialog title="编辑场景" :visible.sync="DialogEditVisible" width="30%">
      <el-form ref="editSceneFormRef" :rules="rules" :model="editSceneForm" label-width="90px">
        <el-form-item label="场景名称:" prop="name" style="width:400px">
          <el-input v-model="editSceneForm.name"></el-input>
        </el-form-item>
        <el-form-item label="项目名称:" prop="projectId" style="width:400px">
          <el-select v-model="editSceneForm.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>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSceneFrom">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSceneList,
  addSecene,
  delSecne,
  executeScene,
  editScene
} from '@/api/getAutoScene'
import { getProjectList } from '@/api/getAotoInterface'
export default {
  data() {
    return {
      queryModuleInfo: {
        pageNum: 1,
        pageSize: 10,
        sceneName: ''
      },
      queryProjectList: {
        pageNum: 1,
        pageSize: 100
      },
      sceneList: [],
      totalNum: 0,
      addSceneForm: {
        name: '',
        projectId: ''
      },
      editSceneForm: {
        id: '',
        name: '',
        projectId: ''
      },
      projectList: [],
      DialogVisible: false,
      DialogEditVisible: false,
      rules: {
        name: [
          {
            required: true,
            message: '场景名称不能为空！',
            trigger: 'blur'
          }
        ],
        projectId: [
          {
            required: true,
            message: '项目名称不能为空！',
            trigger: 'blur'
          }
        ]
      },
      delSceneForm: {
        sceneId: ''
      },
      isShow: false,
      requestData: '',
      executeScene: {
        sceneId: '',
        namespace: ''
      }
    }
  },
  created() {
    this.getSecneList()
    this.getProjectList()
    this.$bus.$on('refreshScene', () => {
      this.getSecneList()
    })
  },
  methods: {
    // 获取场景列表
    getSecneList() {
      getSceneList(this.queryModuleInfo).then((resp) => {
        this.sceneList = resp.data.data.list
        this.totalNum = resp.data.data.total
      })
    },
    // 获取项目列表
    getProjectList() {
      getProjectList(this.queryProjectList).then((resp) => {
        this.projectList = resp.data.data.list
      })
    },
    // 查询方法
    queryData() {
      this.getSecneList()
    },
    // 执行场景
    executeSceneFrom(row) {
      // 获取用例id
      this.executeScene.sceneId = row.id
      this.executeScene.namespace = window.sessionStorage.getItem('env')
      executeScene(this.executeScene)
        .then((resp) => {
          this.requestData = resp.data.data
          if (this.requestData.length > 0) {
            this.isShow = true
            this.$message.success('执行成功！')
          } else {
            this.isShow = false
            this.$message.error('执行失败！')
          }
        })
        .catch(() => {
          this.$message.error('执行失败！')
        })
    },
    // 编辑场景
    editeSceneFrom(row) {
      this.DialogEditVisible = true
      this.editSceneForm.id = row.id
      this.editSceneForm.name = row.name
      this.editSceneForm.projectId = row.projectId
    },
    // 编辑场景用例
    editeSceneCaseFrom(row) {
      window.sessionStorage.setItem('curScene', JSON.stringify(row))
      this.$router.push({ path: 'EditScene' })
      // bus使用
      this.$nextTick(function () {
        // DOM 现在更新了
        this.$bus.$emit('scenemsg', row)
      })
    },
    // 对话框方法
    openMessage(message, confirmText, doit) {
      this.$messageBox
        .confirm(message, '确定', {
          cancelButtonText: '取消',
          confirmButtonText: confirmText,
          type: 'warning'
        })
        .then(() => {
          doit()
        })
        .catch(() => {})
    },
    // 删除场景
    deleSceneFrom(row) {
      this.delSceneForm.sceneId = row.id
      this.openMessage('您确定要删除吗？', '删除', () => {
        delSecne(this.delSceneForm)
          .then((resp) => {
            if (resp.data.data === true) {
              this.$message.success('删除成功！')
              this.getSecneList()
            } 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.getSecneList()
    },
    handleCurrentChange(newPage) {
      this.queryModuleInfo.pageNum = newPage
      this.getSecneList()
    },
    // 添加场景
    addSceneFrom() {
      this.$refs.addSceneFormRef.validate((valid) => {
        if (!valid) {
          return false
        } else {
          addSecene(this.addSceneForm).then((resp) => {
            if (resp.data.data === true) {
              this.DialogVisible = false
              this.$message.success('新增成功！')
              this.getSecneList()
            } else {
              this.$message.error(resp.data.msg)
            }
          })
        }
      })
    },
    // 编辑场景用例按钮
    editSceneFrom() {
      this.$refs.editSceneFormRef.validate((valid) => {
        if (!valid) {
          return false
        } else {
          editScene(this.editSceneForm).then((resp) => {
            if (resp.data.data === true) {
              this.DialogEditVisible = false
              this.$message.success('修改成功！')
              this.getSecneList()
            } else {
              this.$message.error(resp.data.msg)
            }
          })
        }
      })
    },
    // 关闭清空数据
    closeAddDialog() {
      this.$refs.addSceneFormRef.resetFields()
    },
    // 查看报告
    checkReport(row) {
      this.$router.push({ path: 'report' })
      // bus使用
      this.$nextTick(function () {
        // DOM 现在更新了
        this.$bus.$emit('reportmsg', row)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-input {
  width: 300px;
}
.el-select {
  width: 300px;
}
</style>
