<template>
  <div>
    <el-card>
      <div>
        项目:
        <el-select v-model="projectId" placeholder="请选择项目" @change="selectChange" clearable>
          <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        场景:
        <el-select v-model="sceneId" placeholder="请选择场景" clearable>
          <el-option v-for="item in sceneList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-input v-model="queryReportInfo.sceneName" clearable placeholder="请输入场景名称" style="width: 300px;"></el-input>
        <el-button type="primary" style="margin-left:10px" icon="el-icon-search" @click="queryData">查询</el-button>
      </div>
      <el-table :data="reportList" border style="width: 100%;margin-top:20px">
        <el-table-column type='index' width="50px">
          <template slot-scope="scope">
            <span>{{  (queryReportInfo.pageNum -1 ) * queryReportInfo.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sceneName" label="场景名称" width="200px"></el-table-column>
        <el-table-column prop="projectName" label="项目名称" width="150px"></el-table-column>
        <el-table-column prop="namespace" label="运行环境" width="150px"></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="primary" icon="el-icon-chat-line-square" @click="detailReportFrom(scope.row)">详情</el-button>
          </slot>
        </el-table-column>
      </el-table>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryReportInfo.pageNum" :page-size="queryReportInfo.pageSize" layout="total, prev, pager, next"
        :total="totalNum"></el-pagination>
    </el-card>
  </div>
</template>
<script>
import { getProjectList } from '@/api/getAotoInterface'
import { getSceneList } from '@/api/getAutoScene'
import { getReportList } from '@/api/getAutoReport'
export default {
  data() {
    return {
      queryReportInfo: {
        pageNum: 1,
        pageSize: 10,
        projectId: '',
        sceneId: '',
        sceneName: '',
        namespace: ''
      },
      projectId: '',
      sceneId: '',
      namespace: '',

      queryProjectInfo: {
        pageNum: 1,
        pageSize: 20
      },
      querySceneInfo: {
        pageNum: 1,
        pageSize: 20,
        projectId: ''
      },
      reportList: [],
      projectList: [],
      sceneList: [],
      totalNum: 0
    }
  },
  created() {
    this.getProjectList()
    this.getReportList()
    this.$bus.$off('reportmsg').$on('reportmsg', (row) => {
      // 下拉框赋值
      this.projectId = row.projectName
      this.sceneId = row.name
      // 传递参数信息
      this.queryReportInfo.sceneId = row.id
      this.queryReportInfo.projectId = row.projectId
      getReportList(this.queryReportInfo).then((resp) => {
        this.reportList = resp.data.data.list
        this.totalNum = resp.data.data.total
      })
    })
  },
  methods: {
    // 项目列表
    getProjectList() {
      getProjectList(this.queryProjectInfo).then((resp) => {
        this.projectList = resp.data.data.list
      })
    },
    // 下拉项目改变事件
    selectChange() {
      this.getSceneList()
    },
    // 获取场景列表
    getSceneList() {
      this.querySceneInfo.projectId = this.projectId
      getSceneList(this.querySceneInfo).then((resp) => {
        this.sceneList = resp.data.data.list
      })
    },
    // 获取场景报告列表
    getReportList() {
      this.queryReportInfo.namespace = window.sessionStorage.getItem('env')
      getReportList(this.queryReportInfo).then((resp) => {
        this.reportList = resp.data.data.list
        this.totalNum = resp.data.data.total
      })
    },
    // 点击查询调取方法
    queryReportList() {
      this.queryReportInfo.projectId = this.projectId
      this.queryReportInfo.sceneId = this.sceneId
      this.queryReportInfo.namespace = window.sessionStorage.getItem('env')
      getReportList(this.queryReportInfo).then((resp) => {
        this.reportList = resp.data.data.list
        this.totalNum = resp.data.data.total
      })
    },
    // 查询方法
    queryData() {
      this.queryReportList()
    },

    // 报表详情信息
    detailReportFrom(row) {
      this.$router.push({ path: 'ReportDetail' })
      // bus使用
      this.$nextTick(function () {
        // DOM 现在更新了
        this.$bus.$emit('reportDetail', row)
      })
    },
    handleSizeChange(newSize) {
      this.queryReportInfo.pageSize = newSize
      this.getReportList()
    },
    handleCurrentChange(newPage) {
      this.queryReportInfo.pageNum = newPage
      this.getReportList()
    }
  }
}
</script>

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