<template>
  <div>
    <el-table :data="tableData" border header-row-class-name="custom-table-header"  @sort-change="sortChange" element-loading-text="请耐心等待，数据正在加载中..."
      :row-class-name="tableRowClassName">
      <el-table-column label="#" type="index" align="center" width="55">
        <template slot-scope="scope">
          <span>{{ (scope.$index + 1) + ((params.current - 1) * params.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>
          <template slot-scope="scope">
            <div>
              <el-link type="primary" @click="checkVisual(scope.row.scenarioNames,scope.row.id,scope.row.questionName)">{{scope.row.questionName}}</el-link>
            </div>
          </template>
          
        </el-table-column>
        <el-table-column label="相关报告数量" align="center">
          <template slot-scope="scope">
            <el-link type="primary">{{ scope.row.reportNum||0 }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="相关专题库数量" align="center">
          <template slot-scope="scope">
            <el-link type="primary">{{ scope.row.reportNum||0 }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="事件场景" prop="scenarioNames" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="cursor_pointer" v-for="item in scope.row.scenarioNames?scope.row.scenarioNames:[]" :key="item" @click="checkVisual([item])">
            {{ item }}<br />
          </span>
        </template>
      </el-table-column>
      <el-table-column label="事件时间" prop="eventDate" align="center" 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" show-overflow-tooltip></el-table-column>
      <el-table-column label="创建时间" prop="createTime" align="center" sortable="custom" show-overflow-tooltip></el-table-column>
      
      <el-table-column label="操作" align="center" width="150" show-overflow-tooltip v-if="projectId">
        <template slot-scope="scope">
          <el-link type="danger" @click="handleDelete(scope.row)"> 取 消</el-link>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="130px" v-if="!projectId && !show">
        <template slot-scope="scope">
          <el-dropdown trigger="click" @command="handleCommand($event, scope.row)" split-button :hide-on-click="false" type="primary" size="small"  @click="handleEdit(scope.row)">
            <p>编辑</p>
            <el-dropdown-menu slot="dropdown" class="text-align_center">
              <el-dropdown-item command="1">新增专题库</el-dropdown-item>
              <el-dropdown-item>
                <el-dropdown trigger="hover" placement="right-start">
                    <span class="el-dropdown-link"> 新增报告 </span>
                    <el-dropdown-menu  class="children_item" v-if="dictMessage.REPORT_TYPE">
                        <el-dropdown-item v-for="item in dictMessage.REPORT_TYPE.filter(item=>!['6'].includes(item.dictChildValue))" :key="item.dictChildLabel"  @click.native="handleAnalyse(item.dictChildValue,scope.row)" v-if="$permission('/pcs/report/add/' + item.permission)">{{item.dictChildLabel}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>                                  
              </el-dropdown-item>
              <el-dropdown-item command="3" divided class="color-red">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div style="display:flex;flex-direction: row-reverse;margin:25px 0" v-if="show">
        <el-link type="primary" style="font-size:16px" @click="checkMore">查看更多>>> </el-link>
    </div>
  </div>
</template>

<script>
import mixins from './mixins';
export default {
  components: {},
  props: {},
  mixins:[mixins],
  data() {
    return {
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    //查看更多
    checkMore(){
        this.$router.push({
            path: '/questionEvent'
        })
    },
    tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 0) {
          return 'height-row'
        }
      },
    //排序
    sortChange({ column, prop, order }) {
      if (!order) {
        this.sortData('create_time', 'desc')
        return false
      }
      const o = {
        'descending': '1',
        'ascending': '0',
      }
      let orderBy = prop
      this.sortData(orderBy, o[order])
    },
    sortData(prop, order) {
      this.$emit('on-sort', { prop, order })
    },
  },
};
</script>
<style lang="scss">
  .custom-table-header > th {
      background: #deedff !important;
      color: #7ba6d5 !important;
      font-weight: 400 !important;
    }
    .height-row {
      background: #f5faff !important;
    }
</style>
<style lang="scss" scoped>
</style>