<template>
  <div style="background: white;height: 100%;padding: 20px;">
    <!-- 查/新增 -->
    <div style="display: flex;margin-bottom: 20px;">
      <el-input placeholder="请输入事件名称查询" v-model="queryParams.questionName" size="small"
        style="width: 300px;margin-right: 10px;"></el-input>
        <el-tooltip class="item" effect="dark" content="事件：商业目标/解决问题/对应项目" placement="top">
          <el-button type="primary" size="small" @click="getList2"> 查 询 </el-button>
        </el-tooltip>
      <!-- 新增 -->
      <el-button type="primary" size="small" @click="handleAdd"> 新 增 </el-button>
    </div>
    <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">
          <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
        </template>
      </el-table-column>
     
        <el-table-column label="事件名称" prop="questionName" align="center" width="240px" sortable="custom" show-overflow-tooltip>
          <template slot="header">
            <span>
              <el-tooltip class="item" effect="dark" content="事件：商业目标/解决问题/对应项目" placement="top">
                <span>事件名称</span>
              </el-tooltip>
           </span>
          </template>
        </el-table-column>
      
      <el-table-column label="事件时间" prop="eventDate" align="center" width="200px" sortable="custom" show-overflow-tooltip></el-table-column>
      <el-table-column label="描述" prop="description" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column label="创建人" prop="createPersonName" align="center" width="200px" show-overflow-tooltip></el-table-column>
      <el-table-column label="创建时间" prop="createTime" align="center" width="200px" sortable="custom" show-overflow-tooltip></el-table-column>
      <el-table-column label="事件场景" prop="scenarioNames" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-for="item in scope.row.scenarioNames?scope.row.scenarioNames:[]">
            {{ item }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-link type="danger" @click="handleDelete(scope.row)"> 取 消</el-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total"
        @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
    </div>

    <el-dialog :title="title" :visible.sync="visible" width="1200px" draggable append-to-body :close-on-click-modal="false"
      :before-close="resetClose">
      <questionAdd :projectId="projectId" @formData="handleFormData" :isCloseFormData="isClose" @resetClose="resetClose"></questionAdd>
    </el-dialog>
  </div>
</template>

<script>
import questionAdd from "./questionAdd.vue";
export default {
  props:['projectId'],
  components: {
    questionAdd,
  },
  data() {
    return {
      tableData: [],
      loading: false,
      visible: false,
      title: '',
      queryParams: {
        projectId:this.projectId,
        current: 1,
        size: 10,
      },
      total: 0,
      isClose: false,
      forms: {},
    }
  },
  mounted() { 
    this.getList()
  },
  methods: {
    // 请求事件
    getList() {
      this.$api.eventQuery(this.queryParams).then(res => {
        if (res.code == 200) {
          this.total = res.data.totalSizes
          this.tableData = res.data.list
        }
      })
    },
    getList2() {
      this.queryParams.current = 1
      this.getList()
    },
    // 新增弹窗
    handleAdd() {
      this.title='新增'
      this.visible = true
    },
    // 操作按钮组
    handleCommand(ev, row) {
      switch (ev) {
        case '1':
          this.handleDelete(row)
          break;

        default:
          break;
      }
    },
    // 删除
    handleDelete(row) {
      let a = {
        eventId: row.id,
        projectId:this.projectId
      }
      this.$confirm('此操作将取消专题库关联关系, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.eventDelete(a).then(res => {
            if (res.code == 200) {
              this.getList2()
              this.$message.success('事件取消成功')
            }
          })
        }).catch(() => {   
          this.$message.info('操作已取消')
        });
       
      
    },
    // 新增或重置事件
    handleFormData({ list, option }) {
      let lists = JSON.parse(JSON.stringify(list))
      this.forms = {
        projectId: this.projectId,
        eventAddNewDTOs:lists
      }
      this.$api.eventAddNew(this.forms).then(res => {
        if (res.code == 200) {
          this.getList()
          this.$message.success('事件新增成功')
          this.close()
        }
      }).catch(error => {
        this.$message.error(error.message)
      })

    },
    // 弹窗关闭
    close() {
      this.isClose = !this.isClose
      // this.forms={}
      this.visible = false
    },
    resetClose() {
      this.close()
    },
    // 分页
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    // 排序
    sortChange({ column, prop, order }) {
      if (!order) {
        return false
      }
      const o = {
        'descending': 'desc',
        'ascending': 'asc',
      }
      this.queryParams.orderBy = prop
      this.queryParams.orderType = o[order]
      this.getList2()
    },
  },
}
</script>

<style lang="scss" scoped>.pagination {
  text-align: center;
  margin: 20px 0;
}</style>