<template>
  <div style="height:100%;padding:0 10px;">
    <el-container>
        <el-header v-if="!show">
            <div>
              <mySearch style="width:500px" :SearchFields="searchFiled" @search="search" :searchValue="searchOption"></mySearch>  
            </div>
            <div style="display:flex;">
                <div>
                    <span>分组查询：</span>
                    <el-select v-model="groupingValue" size="small" @change="changeGrouping" style="width:120px">
                        <el-option v-for="item in groupingOption" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <el-button-group style="display:flex;justify-content:flex-start;margin-left:10px;">
                    <el-button size="small" :type="viewSelected === 'visual' ? 'primary' : ''"  @click="onChange2('visual')" >可视化</el-button>
                    <el-button :type="viewSelected === 'Table' ? 'primary' : ''" @click="onChange2('Table')" size="small">列表 </el-button>
                    <el-button :type="viewSelected === 'Card' ? 'primary' : ''" @click="onChange2('Card')" size="small">卡片</el-button>
                </el-button-group>
                <el-dropdown trigger="click" split-button type="primary" size="small" @command="handleCommand($event)" >
                    <P @click="handleClick(1)" >添加事件</P>
                    <el-dropdown-menu slot="dropdown" class="text-align_center">
                        <el-dropdown-item command="1">添加事件</el-dropdown-item>
                        <el-dropdown-item command="2">批量添加事件</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-main id="patent-list-container" class="main" v-loading="loading">
            <div>
              <component
                  ref="questionViewList"
                  :is="viewSelected"
                  :projectId="projectId"
                  :tableData="tableData"
                  :params="queryParams"
                  v-bind="$attrs"
                  :show="show"
                  @checkVisual="checkVisual"
                  @on-sort="handleSort"
                  @option="handleOption"
              ></component>
            </div>
          </el-main>
          <el-footer class="workspace-content-patent-page" v-if="!show">
            <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :current-page.sync="queryParams.current"
                :page-size.sync="queryParams.size"
                @current-change="handleCurrentChange"
                @size-change="getList()"
                :total="total">
            </el-pagination>
          </el-footer>
    </el-container>
    <visualDialog ref="visualDialog"></visualDialog>
    <project-form-drawer ref="projectFormDrawer" @submit="submitProjectForm" :common-data="commonData" />
    <CreateReport ref="ReportForm" @getList="submitProjectForm"></CreateReport>
    <!-- 事件弹窗 -->
    <el-dialog :title="title" :visible.sync="visible" :width="type==1?'600px':'1200px'" draggable append-to-body :close-on-click-modal="false"
      @closed="close">
      <questionAdd :projectId="projectId" @formData="handleFormData" :type="type" :row="row" @resetClose="close"></questionAdd>
    </el-dialog>
    <!-- 其他报告 -->
    <el-dialog title="新增报告" :visible.sync="reportVisible" width="500px" append-to-body destroy-on-close :before-close="cancel">
      <el-form :model="reportForm" :rules="rules" ref="reportForm" label-width="80px" label-position="left">
        <el-form-item label="文件名称" prop="name">
          <el-input v-model="reportForm.name" placeholder="请输入文件名称"></el-input>
        </el-form-item>
        <el-form-item label="文件选择" class="margin-bottom_0" required>
          <el-upload class="upload-file" drag action="#" :auto-upload="false" :show-file-list="false" :on-change="onChange">
            <i :class="!reportForm.file ? 'el-icon-upload' : 'el-icon-refresh'"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip"></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="reportForm.remark" placeholder="请输入备注" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitReport" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Table from './table.vue';
import Card from './card.vue';
import visual from './visual.vue';
import visualDialog from '@/views/home/components/visualDialog.vue'
import { openVisual } from "@/views/home/components/mixins";

import ProjectFormDrawer from '../../workspace/components/drawer/Form'
import CreateReport from '@/views/report/components/CreateReport.vue'
import questionAdd from "./addQuestion.vue";
export default {
    name:'questionIndex',
  components: {
    Table,
    Card,
    visual,
    visualDialog,
    ProjectFormDrawer,
    CreateReport,
    questionAdd
  },
  mixins:[openVisual],
  props: {
    projectId:{},
    eventName:{},
    applicationScenario:{},
    show:{}
  },
  data() {
    return {
        queryParams:{
            projectId:this.projectId,
            current: 1,
            size: 10,
            
        },
        total:0,
        tableData:[],
        viewSelected:'Table',
        loading:false,
        commonData:{},
        searchFiled:[
            {
                label:'事件名称',
                value:'questionName',
                type:1,
                placeholder:'请输入事件名称'
            }
        ],
        searchOption:{
            questionName:this.eventName,
            applicationScenario:this.applicationScenario
        },
        title:'',
        visible:false,
        type:1,
        row:null,
        reportForm:{},
        reportVisible:false,
        btnLoading:false,
        rules: {
            name: [{ required: true, message: '请输入文件名称', trigger: 'blur' },],
        },
        groupingValue: 'noGrouping',//分组的值
        groupingOption: [//分组
        {
          label: '不分组',
          value: 'noGrouping',
        },
        {
          label: '应用场景',
          value: 'scenarioName',
        },
        {
          label: '创建人',
          value: 'createName',
        },
        {
          label: '创建时间',
          value: 'createTime',
        },
      ],
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    // 分组监听事件
    changeGrouping(val) { 
    //   this.queryParams.current = 1
    //   if (val == 'noGrouping') {//不分组
    //     this.componentType='indiciaCard'
    //   } else {
    //     this.componentType = 'indiciaCollapse'
    //     this.queryParams.grouping = val
    //   }
    //   this.isCollapse()
    },
    //关闭报告文档弹窗
    cancel(){
        this.reportVisible = false
        this.reportForm = {}
    },
    //上传报告文档
    submitReport(){
        if (!this.ruleForm.id && !this.ruleForm.file) {
            this.$message.error('请选择文件')
            return false
        }
    },
    //切换上传的附件
    onChange(file, fileList) {
      this.$set(this.ruleForm, 'name', file.name.substring(0, file.name.lastIndexOf(".")))
      this.$set(this.ruleForm, 'file', file.raw)
    },
    //新增事件的选项
    handleCommand(e){
        switch(e){
            case '1':
                this.handleClick(1)
                break;
            case '2':
                this.handleClick(2)
                break;
        }
    },
     //打开新增事件弹窗
     handleClick(type){
        if(type == 1){
            this.title = '添加事件'
        }else if(type == 2){
            this.title = '批量添加事件'
        }
        this.type = type
        this.visible = true
    },
    //关闭新增事件弹窗
    close() {
        this.visible = false
        this.$nextTick(()=>{
            this.type = 0
            this.row = null
        })
        
    },
    //新增事件
    handleFormData({ list, option,edit }) {
      let lists = JSON.parse(JSON.stringify(list))
      if(lists.length == 0){
        this.close()
        return false
      }
      this.forms = {
        projectId: this.projectId,
        eventAddNewDTOs:lists
      }
      if(edit){
        return false
      }
      this.$api.eventAddNew(this.forms).then(res => {
        if (res.code == 200) {
          this.getList()
          this.$message.success('事件新增成功')
          this.visualRouter(lists)//跳转
          this.close()
        }
      }).catch(error => {
        this.$message.error(error.message)
      })

    },
    visualRouter(val){
        if(val.length ==1){
            if(val.applicationScenarios.length == 0){
                return false
            }
            var visuals = {
                Scenario:null,
                eventId:null,
                eventName:val.questionName
            }
            this.$router.push({
                path:'/eventVisual',
                query:{
                    visuals:visuals
                }
            })
        }
    },
    //查询
    search(val){
        var params = {}
        if(val.length>0){
            val.forEach(item => {
                if(item.type == 3){
                   params[item.value] = item.searchValue.map(item1=>{
                    return item1.value
                   }) 
                }else{
                    params[item.value] = item.searchValue.label
                }
                
            });
        }
        this.searchOption = params
        this.queryParams.current = 1
        this.getList()
    },
    //创建专题库或者创建报告成功
    submitProjectForm(){
      this.getList()
    },
    //获取应用场景
    async getCommonData() {
      const response = await this.$api.getCommonData({ keys: 'ENTERPRISE_APPLICATION_SCENARIO,INVESTIGATION_TYPE' })
      this.commonData = response.data
    },
    //操作
    handleOption({ option, row ,type}){
        switch(option){
            case '1'://新增专题库
                if(Object.keys(this.commonData).length == 0){
                    this.getCommonData()
                }
                this.$refs.projectFormDrawer.open({
                    update: 0,
                    updateTime: '一天',
                    status: '0',
                    sort: 1,
                    eventId:row.id,
                    eventName:row.questionName,
                    typeList: [],
                    scenarioList: []
                }   , '新增专题库')
                break;
            case 'addReport'://新增报告
                this.addReport(type,row)
                break;
            case '3'://删除
                break;
            case 'cancel'://取消关联
                this.handleCancel(row)
                break;
            case 'edit'://编辑事件
                this.row = JSON.parse(JSON.stringify(row))
                this.title = '编辑事件'
                this.type = 1
                this.visible = true
                break;
        }
    },
    //新增报告
    addReport(type,row){
        if(type == 'e'){
            this.reportVisible = true
            return false
        }
        var form = {
            type:type,
            eventId:row.id,
            eventName:row.questionName,
        }
        this.$refs.ReportForm.open(form)
    },
    //取消关联
    handleCancel(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('操作已取消')
        });
    },
    //将分页置为第一页
    getList2() {
      this.queryParams.current = 1
      this.getList()
    },
    //查询事件
    getList(){
        var params = this.queryParams
            params = {
                ...this.queryParams,
                ...this.searchOption
            }
        this.loading = true
        this.$api.eventQuery(params).then(res => {
            if (res.code == 200) {
                this.total = res.data.totalSizes
                this.tableData = res.data.list
                this.loading  =false
            }
        }).catch(error=>{
            this.loading = false
        })
    },
    // 分页
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    // 排序
    handleSort(sort) {
        this.queryParams.orderBy = sort.prop
        this.queryParams.orderDesc = sort.order
        this.getList2()
    },
    //切换视图
    onChange2(type) {
      this.viewSelected = type
    },
  },
};
</script>
<style lang="scss" scoped>
</style>