<template>
    <div class="visual-title">
      <el-button type="primary" class="visual-title-back" icon="el-icon-back" @click="handleBack" v-if="!sign">返回</el-button>
       <myCustomSvg  class="myCustomSvg" :title="title" :total="total" :QuestionTotal="QuestionTotal" :eventId="eventId" :eventName="eventName" @on-click="handleClick"></myCustomSvg>
      <!-- <tips class="c-tips" /> -->
      <titleDrawer ref="titleDrawer" @close="close" />
      <eventDrawer ref="eventDrawer" @close="closeDrawer"></eventDrawer>
    </div>
</template>
  
  <script>
  import Tips from '../components/Tips'
  import titleDrawer from "../components/drawer/titleDrawer.vue";
  import eventDrawer from "../components/drawer/eventDrawer.vue";
  export default {
    name:'flowPath',
    components: {
      Tips,
      titleDrawer,
      eventDrawer
    },
    props:{
      scenarioName:'',
      eventId:'',
      eventName:'',
      sign:{},
      searchOption:{
        type:Object,
        default:()=>{
          return {}
        }
      }
    },
    data() {
      return {
        //事件数量
        QuestionTotal: [],
        //获取应用场景下流程节点对应项目数量
        total: {},
        //当前的应用场景
        title: this.$route.params.title || this.scenarioName,
        queryParams:{
            "size": 999,
            "current": 1,
            "searchQuery": "",
            // "orderDTOList": [
            //     {
            //         "orderBy": "createTime",
            //         "orderType": 1
            //     }
            // ],
            "groupBy": "matterNames"
        },
        scenarioId:''
      }
      
    },
    computed:{
      scenario(){
        return this.$store.state.dictMessage.scenario || []
      },
    },
    watch:{
      searchOption:{
        async handler(val){
          var params = {
            scenarioNames:[this.scenarioId],
            eventNames:this.eventName,
            ...this.searchOption
          }
          this.queryParams.searchQuery = this.$commonJS.objectToString(params)
          //获取事件数量
          await this.getEventNumber()
          //获取应用场景对应项目数量
          await this.init()
        }
      }
    },
    async mounted() {
      if(this.scenario.length>0){
        var scenario = this.scenario.find(item=>{
          return item.name == this.title
        })
        if(scenario){
          this.scenarioId = scenario.id
          var params = {
            scenarioNames:[scenario.id],
            eventNames:this.eventName,
            ...this.searchOption
          }
          this.queryParams.searchQuery = this.$commonJS.objectToString(params)
        }else{
          return false
        }
      }
      
      //获取事件数量
      await this.getEventNumber()
      //获取应用场景对应项目数量
      await this.init()
    },
    methods: {
      openEventDrawer(title){
        if(this.eventName){
          return false
        }
        this.$refs.eventDrawer.open(title, [this.scenarioId])
      },
      closeDrawer(){
        this.getEventNumber()
      },
      //点击节点
      handleClick({type,isPatentMining}) {
        var matterId = this.total.find(item=>{
          return item.name == type
        }).id
        var data = {
          scenarioId:this.scenarioId,
          matterId:matterId,
          isPatentMining:isPatentMining,
          eventName:this.eventName,
          eventId:this.eventId
        }
        this.$refs.titleDrawer.open(data)
      },
       //获取事件数量
      async getEventNumber() {
        var obj = {
          ...this.searchOption,
          scenarioNames:[this.scenarioId]
        }
        var params = {
          "current": 1,
          "size": 10,
          "searchQuery": this.$commonJS.objectToString(obj),
          // "orderDTOList": [
          //   {
          //     "orderBy": "createTime",
          //     "orderType": 1
          //   }
          // ],
          "groupBy": "scenarioNames"
        }
      await this.$api.groupEvent(params).then(res => {
        if (res.code == 200) {
          if(res.data.data.values.length>0){
            this.QuestionTotal=res.data.data.values
          }else{
            this.QuestionTotal=[
              {
                name:this.title,
                value:this.scenarioId,
                count:0
              }
            ]
          }
          
        }
      }).catch(err => {
        this.QuestionTotal = [
          {
            name:this.title,
            value:this.scenarioId,
            count:0
          }
        ]
      })
        // await this.$api.queryApplicationScenarioEventNumber().then(response => {
        //   if (response.code == 200) {
        //     this.QuestionTotal = response.data
        //   }
        // })
      },
      //获取应用场景下流程节点对应项目数量
      async init() {
        var matter = []
        await this.$api.getMatter([this.scenarioId]).then(response => {
          matter = response.data.data
        })
        const [ProjectTotal,ReportTotal,PatentMiningTotal] = await Promise.allSettled([this.getProjectTotal(),this.getReportTotal(),this.getPatentMiningTotal()])
        var projectTotal = ProjectTotal.status =='fulfilled'?ProjectTotal.value:[]
        var reportTotal = ReportTotal.status =='fulfilled'?ReportTotal.value:[]
        var patentMiningTotal = PatentMiningTotal.status =='fulfilled'?PatentMiningTotal.value:[]
        for(var i = 0;i<matter.length;i++){
          let total = {}
          let project = projectTotal.find(item=>{
            return item.value == matter[i].id
          })
          total.projectCount = project?project.count:0
          let report = reportTotal.find(item=>{
            return item.value == matter[i].id
          })
          total.reportCount = report?report.count:0
          let patentMining = patentMiningTotal.find(item=>{
            return item.value == matter[i].id
          })
          total.patentMiningCount = patentMining?patentMining.count:0
          matter[i].total = total
        }
        this.total = matter
        // this.show = true
        // if (this.questionName) {
        //   var params = {
        //     applicationScenario: this.QuestionTotal.find(item => { return item.applicationScenarioName == this.title }).applicationScenarioValue,
        //     eventId: this.questionId
        //   }
        //   await this.$api.queryInvestigationTypeProjectNumber(params).then(response => {
        //     if (response.code == 200) {
        //       var total = {}
        //       response.data.map(item => {
        //         total[item.investigationTypeName] = item.projectNumber
        //       })
        //       this.total = total
        //     }
        //   })
        //   return false
        // }
        // await this.$api.getProjectTypeTotal({ scenario: this.title }).then(response => {
        //   this.total = response.data
        // })
      },
      //获取每个调查类型的数据库数量
      async getProjectTotal(){
        return await this.$api.groupPatentProject(this.queryParams).then( async response=>await response.data.data.values)
      },
      //获取每个调查类型的报告数量
      async getReportTotal(){
        return await this.$api.groupReportProject(this.queryParams).then( async response=>await response.data.data.values)
      },
      //获取每个调查类型的挖掘数量
      async getPatentMiningTotal(){
        return await this.$api.groupPatentDigProject(this.queryParams).then( async response=>await response.data.data.values)
      },
      //关闭抽屉弹窗回调
      close() { },
      // 返回
      handleBack() {
        this.$router.push({ path: '/visual' })
      },
    },
  }
  </script>
  
  <style lang="scss">
  .q-1 {
    font-weight: normal;
    font-size: 28px;
  }
  
  .p-1 {
    text-indent: 2em;
    color: #000000;
  }
  
  
  
  .visual-title {
    width: 100%;
    height:100%;
    position: relative;
    .c-tips {
      position: absolute;
      top: 20px;
      right:40px;
      cursor: pointer;
    }
    .visual-title-back {
      position: absolute;
      top: 20px;
      left: 45px;
      z-index: 999;
    }
    .myCustomSvg{
      
      // position: absolute;
      // left: 0; 
      // // top: 50px;
      // bottom:0;
      // right:0;
      // margin:auto;
    }
  }</style>