<template>
  <div>
    <div style="height: 300px; overflow: auto" v-infinite-scroll="load">
      <el-table
        :data="tableData"
        border
        header-row-class-name="custom-table-header"
        v-loading="loading"
        @sort-change="sortChange"
        element-loading-text="请耐心等待，数据正在加载中..."
      >
        <el-table-column label="#" type="index" align="center" width="55">
          <template slot-scope="scope">
            <div>
              <span>{{ scope.$index + 1 + (queryParams.current - 1) * queryParams.size }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="事件名称"
          prop="questionName"
          align="center"
          width="150px"
          sortable="custom"
          show-overflow-tooltip
        >
          <template slot="header">
            <span>
              <el-tooltip
                class="item"
                effect="dark"
                content="事件：商业目标/解决问题/对应项目"
                placement="top"
              >
                <span>事件名称</span>
              </el-tooltip>
            </span>
          </template>
          <template slot-scope="scope">
            <div>
              <el-link type="primary" @click="checkQuestion(scope.row)">{{
                scope.row.questionName
              }}</el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="描述"
          prop="description"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="事件时间"
          prop="eventDate"
          align="center"
          width="200px"
          sortable="custom"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  props: ["type"],
  data() {
    return {
      tableData: [],
      checkList: [],
      total: 1,
      queryParams: {
        current: 0,
        size: 10,
      },
      loading: false,
    };
  },
  watch: {
    type(val) {
      if (val) {
        this.getList2();
      }
      
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    load() {
      if (this.total > this.queryParams.current * this.queryParams.size) {
        this.queryParams.current += 1
        this.getList();
      }
    },
    submit(){
        this.$emit("questionId", {ids:this.checkList,type:this.type});
    },
    checkQuestion(row) {
        var arr = [row]
      this.$emit("questionId", {questions:arr,type:this.type.applicationScenarioName});
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    getList() {
      if(!this.type){
        return false
      }
      this.tableData = []
      this.queryParams.applicationScenario =this.type? this.type.applicationScenarioValue:null
      this.$api.queryByApplicationScenario(this.queryParams).then(response=>{
        if(response.code == 200){
          this.tableData = this.tableData.concat(response.data.list)
          this.total = response.data.totalSizes
        }
      })
    },
    getList2() {
      this.queryParams.current = 1;
      this.getList();
    },
    sortChange() {},
  },
};
</script>