<template>
  <div class="workspace-visual-title">
    <el-button type="primary" class="workspace-visual-title-back" @click="handleBack" icon="el-icon-back" v-if="!titleType">返回</el-button>
    <component class="workspace-visual-title-flow-chart" :is="components[title]" @on-click="handleClick" :total="total" :QuestionTotal="QuestionTotal" :questionName="questionName" @questionId="getQuestionId" v-if="show"/>
    <tips class="c-tips" />
    <project-drawer ref="projectDrawer" @close="close" />
  </div>
</template>

<script>
import A1 from '../components/A1'
import A2 from '../components/A2'
import A3 from '../components/A3'
import A4 from '../components/A4'
import A5 from '../components/A5'
import A6 from '../components/A6'
import A7 from '../components/A7'
import A8 from '../components/A8'
import Tips from '../components/Tips'
// import ProjectDrawer from "../components/ProjectDrawer";
import ProjectDrawer from "../components/drawer/index.vue";
export default {
  components: {
    A1,
    A2,
    A3,
    A4,
    A5,
    A6,
    A7,
    A8,
    Tips,
    ProjectDrawer,
  },
  props:['titleType','eventId','eventName'],
  data() {
    return {
      show:false,
      title: this.$route.params.title || this.titleType,
      components: {
        '专利培育布局': 'A1',
        '产品上市/出口风险控制': 'A2',
        '侵权纠纷': 'A3',
        '专利维权': 'A4',
        'IPO上市': 'A5',
        '专利盘点与运维': 'A6',
        '科技与重大立项专利导航': 'A7',
        '竞争对手威胁应对': 'A8'
      },
      total: {},
      QuestionTotal:[],
      questionName:this.$route.query.eventName || this.eventName || '',
      questionId:this.$route.query.eventId || this.eventId || null,
    }
  },
  created() {
    document.title = this.title
  },
  async mounted() {
    await this.getEventNumber()
    await this.getPermissionList()
    this.getProjectTypeTotal()
  },
  methods: {
    async getPermissionList(){
      var code = "6a8d3f4d1d5f11eda41c00163e2f0200;5051395c24e311eda41c00163e2f0200;a97c468b924111ed905500163e2f0200"
      await this.$api.getPermissionList({code:code}).then(response=>{
        this.$store.commit('SET_ADMIN_PERMISSION', response.data)
      })
    },
    //获取事件数量
   async getEventNumber(){
    await  this.$api.queryApplicationScenarioEventNumber().then(response=>{
        if(response.code == 200){
          this.QuestionTotal = response.data
        }
      })
    },
    getQuestionId({questions,type}){
      const router = this.$router.resolve({
        path: `/visual/${encodeURIComponent(type)}`,
        query:{
          eventName:questions[0].questionName,
          eventId:questions[0].id
        }
      })
      window.open(router.href, '_blank')
   
    },
    handleBack() {
      this.$router.push({ path: '/visual' })
    },
    handleClick(type) {
      var question={
        questionId:this.questionId,
        questionName:this.questionName
      }
      this.$refs.projectDrawer.open(this.title, type,question)
    },
    getProjectTypeTotal() {
      this.show = true
      if(this.questionName){
        var params = {
          applicationScenario: this.QuestionTotal.find(item=>{return item.applicationScenarioName == this.title}).applicationScenarioValue,
          eventId: this.questionId
        }
        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
      }
      this.$api.getProjectTypeTotal({ scenario: this.title }).then(response => {
        this.total = response.data
      })
    },
    close() {
      this.getProjectTypeTotal()
    }
  }
}
</script>

<style lang="scss">
.q-1{
  font-weight:normal;
  font-size: 28px;
}
.p-1 {
  text-indent: 2em;
  color: #000000;
}
.c-tips {
  position: absolute;
  top: 50px;
  left: 1650px;
}
.workspace-visual-title {
  height: 100%;
  // padding-bottom:20px;
  // overflow: auto;
  // height: 1080px;
  .workspace-visual-title-back {
    position: absolute;
    top: 80px;
    left: 80px;
    z-index: 999;
  }
  .workspace-visual-title-flow-chart {
    transform: scale(0.75);
    // width: 1920px;
    // height: 1020px;
    width: 100%;
    height: 100%;
    // overflow: auto;
    .box {
      
      position: absolute;
      left: 50px;
      top: 20px;
      // bottom:20px;
      // width: 2220px;
      // height: 980px;
      background: #fff;
      border-radius: 10px;
      // border: 1px solid rgba(0, 0, 0, 0.1);
      z-index: 0;
    }
    div {
      position: absolute;
    }
    .b-0 {
      border-radius: 10px;
      background: #11acaf;
      z-index: 10;
    }
    .b-1 {
      //background: #deedff;
      border-radius: 10px;
      z-index: 10;
    }
    .b-2 {
      border-radius: 10px;
      background: #3084e5;
      z-index: 10;
    }
    .b-3 {
      border-radius: 10px;
      //background: #fee6e6;
      z-index: 10;
    }
    .b-4 {
      border-radius: 10px;
      background: #d45a6a;
      z-index: 10;
    }
    .b-5 {
      border-radius: 10px;
      background: #11acaf;
      z-index: 10;
    }
    .t-1 {
      font-weight: 900;
      font-size: 24px;
      letter-spacing: -0.04em;
      color: #fff;
      z-index: 10;
      text-align: center;
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-around;
    }
    .t-2 {
      font-size: 18px;
      color: #33233e;
      z-index: 10;
      //text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .t-3 {
      font-weight: 400;
      font-size: 16px;
      color: #fff;
      z-index: 10;
      text-align: center;
      display: contents;
    }
    .t-4 {
      font-weight: 900;
      font-size: 36px;
      letter-spacing: -0.04em;
      color: #fff;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .o {
      width: 32px;
      height: 32px;
      border-radius: 16px;
      background: #fff;
      z-index: 10;
    }
    .o1 {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      background: #fff;
      z-index: 10;
      text-align: center;
      line-height: 40px;
    }
    .n-1 {
      font-family: "Bahnschrift Bold";
      font-weight: bold;
      font-size: 24px;
      text-align: center;
      color: #3084e5;
      z-index: 10;
      position: relative;
    }
    .n-2 {
      font-family: "Bahnschrift Bold";
      font-weight: bold;
      font-size: 24px;
      text-align: center;
      color: #d45a6a;
      z-index: 10;
      position: relative;
    }
    .n-3 {
      font-family: "Bahnschrift Bold";
      font-weight: bold;
      font-size: 24px;
      text-align: center;
      color: #11acaf;
      z-index: 10;
      position: relative;
    }
    .h-1 {
      width: 40px;
      height: 40px;
      // border-radius: 20px;
      // background: #d45a6a;
      // color: #ffffff;
      // font-weight: 900;
      font-size: 24px;
      text-align: center;
      line-height: 40px;
      z-index: 10;
      margin-right: 10px;
    }
    .h-2 {
      width: 40px;
      height: 40px;
      // border-radius: 20px;
      // background: #3084e5;
      // color: #ffffff;
      // font-weight: 900;
      font-size: 24px;
      text-align: center;
      line-height: 40px;
      z-index: 10;
      margin-right: 10px;
    }
    .d-1 {
      width: 20px;
      height: 14px;
      z-index: 1;
      background-image: url("../../../assets/visual/4888.png");
    }
    .d-2 {
      width: 20px;
      height: 14px;
      background-image: url("../../../assets/visual/4896.png");
      z-index: 1;
    }
    .d-3 {
      height: 20px;
      width: 14px;
      background-image: url("../../../assets/visual/4898.png");
      z-index: 1;
    }
    .d-4 {
      width: 20px;
      height: 14px;
      background-image: url("../../../assets/visual/4899.png");
      z-index: 1;
    }
    .d-5 {
      height: 20px;
      width: 14px;
      background-image: url("../../../assets/visual/4906.png");
      z-index: 1;
    }
    .d-6 {
      width: 20px;
      height: 14px;
      background-image: url("../../../assets/visual/4904.png");
      z-index: 1;
    }
    .d-8 {
      height: 20px;
      width: 14px;
      background-image: url("../../../assets/visual/7601.png");
      z-index: 1;
    }
    .d-9 {
      height: 20px;
      width: 14px;
      background-image: url("../../../assets/visual/5336.png");
      z-index: 1;
    }
    .d-10 {
      width: 20px;
      height: 14px;
      background-image: url("../../../assets/visual/5353.png");
      z-index: 1;
    }
    .star {
      width: 27.05px;
      height: 26.95px;
      z-index: 10;
      background-image: url("../../../assets/visual/7191.png");
      position: relative;
    }
    .no-star {
      width: 27.05px;
      height: 26.95px;
      z-index: 10;
      position: relative;
    }
    .c-p {
      cursor: pointer;
    }
  }
}
</style>