<template>
  <div style="background: white;height: 100%;padding: 20px;">
    <!-- 查/新增 -->
    <div style="display: flex;margin-bottom: 20px;" v-if="!show">
      <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="请耐心等待，数据正在加载中..."
      :row-class-name="tableRowClassName">
      <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>
          <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 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 command="3" divided class="color-red">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </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>

    <project-form-drawer ref="projectFormDrawer" @submit="submitProjectForm" :common-data="commonData" />
    <CreateReport ref="ReportForm" @getList="submitProjectForm"></CreateReport>
  </div>
</template>

<script>
import questionAdd from "./questionAdd.vue";
import { checkVisual } from "@/views/home/components/mixins";

import ProjectFormDrawer from '../../workspace/components/drawer/Form'
import CreateReport from '@/views/report/components/CreateReport.vue'
export default {
  props:['projectId','eventName','show'],
  components: {
    questionAdd,
    ProjectFormDrawer,
    CreateReport
  },
  mixins:[checkVisual],
  data() {
    return {
      tableData: [],
      loading: false,
      visible: false,
      title: '',
      queryParams: {
        projectId:this.projectId,
        current: 1,
        size: 10,
        questionName:this.eventName
      },
      total: 0,
      isClose: false,
      forms: {},
      commonData:{}
    }
  },
  computed:{
    dictMessage() {
      var a = this.$store.state.dictMessage.dictMessage
      if(a.REPORT_TYPE){
        a.REPORT_TYPE.forEach(item=>{
          if(['0','1','2'].includes(item.dictChildValue)){
            item.permission = 'invalid'
          }else if(item.dictChildValue == 3){
            item.permission = 'FTO'
          }else if(item.dictChildValue == 4){
            item.permission = 'tort'
          }else if(item.dictChildValue == 5){
            item.permission = 'avoidDesign'
          }else if (item.dictChildValue == 7) {
            item.permission = 'reInvalid'
          }
        })
      }
      return a
    },
  },
  mounted() { 
    this.getList()
    this.getCommonData()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 0) {
          return 'height-row'
        }
      },
    async getCommonData() {
      const response = await this.$api.getCommonData({ keys: 'ENTERPRISE_APPLICATION_SCENARIO,INVESTIGATION_TYPE' })
      this.commonData = response.data
    },
    submitProjectForm(){
      this.getList()
    },
    //操作列事件
    handleCommand(option,row){
      switch(option){
        case '1'://新增专题库
          this.$refs.projectFormDrawer.open({
            update: 0,
            updateTime: '一天',
            status: '0',
            sort: 1,
            eventId:row.id,
            eventName:row.questionName,
            typeList: [],
            scenarioList: []
      }   , '新增专题库')
          break;
        case '2'://新增报告
          var form = {
            type:id,
          }
          this.$refs.ReportForm.open(form)
          break;
        case '3'://删除
          break;
      }
    },
    // 创建报告：无效分析等点击事件
    handleAnalyse(id,row) {
      var form = {
        type:id,
        eventId:row.id,
        eventName:row.questionName,
      }
      this.$refs.ReportForm.open(form)
    },
    // 请求事件
    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
    },
    // 删除
    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">
  .custom-table-header > th {
      background: #deedff !important;
      color: #7ba6d5 !important;
      font-weight: 400 !important;
    }
    .height-row {
      background: #f5faff !important;
    }
</style>
<style lang="scss" scoped>
.pagination {
  text-align: center;
  margin: 20px 0;
}
</style>