<template>
  <div>
    <div class="box"></div>
    <el-popover placement="bottom" width="524" trigger="hover">
      <p class="p-1">专利维权旨在提供用于解决在激烈的行业竞争中，己方专利面临被他人侵犯时的解决方案。</p>
      <p class="p-1">企业遇到侵犯专利权情况，拿起法律武器合理维护自己的权益不失为最直接有效的措施。很多企业在自身的专利技术遭到侵犯时不知该如何应对，通过专利维权的解决方案，可以帮助企业理清思路，及时发现侵犯自身专利权的行为，划分市场份额，收取侵权赔偿费用，进行商业谈判，以找到合适的维权方式，维护自身利益。</p>
      <div class="t-4 b-0 c-1 c-p" slot="reference">
        <span class="no-star" v-if="!questionName && $permission('/workspace/event')"></span><span>专利维权<span v-if="questionName" class="q-1">({{ questionName }})</span></span>
        <el-popover placement="right" width="524" trigger="click" v-if="!questionName && $permission('/workspace/event')">
          <Question v-on="$listeners" :type="getQuestionId('专利维权')"></Question>
          <div class="o1 n-1" slot="reference">
            <el-tooltip class="item" effect="dark" content="相关事件数量" placement="top">
              <span>{{ getQuestionTotal('专利维权') }}</span>
            </el-tooltip>
            </div>
        </el-popover>
      </div>
    </el-popover>
    <div class="t-2 b-3 c-2">确认可用于维权的专利</div>
    <div class="t-2 b-1 c-3">锁定可能的侵权方</div>
    <div class="t-1 b-4 c-4 c-p" @click="handleClick('（己方）专利盘点')">
      <span class="star"></span>
      <span>
        <span class="t-3">（己方）</span><br>
        <span>专利盘点</span>
      </span>
      <span class="o n-2">{{ getTotal('（己方）专利盘点') }}</span>
    </div>
    <popover type="9" width="270">
      <div class="t-1 b-2 c-5 c-p" @click="handleClick('产业/行业专利调查')">
        <span class="no-star"></span>
        <span>产业/行业<br>专利调查</span>
        <span class="o n-1">{{ getTotal('产业/行业专利调查') }}</span>
      </div>
    </popover>
    <div class="t-2 b-3 c-6">核心专利的稳定性分析</div>
    <div class="t-2 b-1 c-7">涉嫌侵权公司的产品分析</div>
    <div class="t-2 b-1 c-8">定期了解关注企业/技术的发展情况</div>
    <div class="t-1 b-4 c-9 c-p" @click="handleClick('（己方）专利稳定性分析')">
      <span class="star"></span>
      <span>
        <span class="t-3">（己方）</span><br>
        <span>专利稳定性分析</span>
      </span>
      <span class="o n-2">{{ getTotal('（己方）专利稳定性分析') }}</span>
    </div>
    <popover type="1" width="270">
      <div class="t-1 b-2 c-10 c-p" @click="handleClick('公司调查')">
        <span class="no-star"></span>
        <span>公司调查</span>
        <span class="o n-1">{{ getTotal('公司调查') }}</span>
      </div>
    </popover>
    <div class="t-1 b-2 c-11 c-p" @click="handleClick('定期专利监控公报')">
      <span class="no-star"></span>
      <span>定期专利监控公报</span>
      <span class="o n-1">{{ getTotal('定期专利监控公报') }}</span>
    </div>
    <popover type="5" width="270">
      <div class="t-1 b-4 c-12 c-p" @click="handleClick('侵权分析')">
        <span class="star"></span>
        <span>侵权分析</span>
        <span class="o n-2">{{ getTotal('侵权分析') }}</span>
      </div>
    </popover>
    <popover type="3" width="270">
      <div class="t-1 b-2 c-13 c-p" @click="handleClick('重点技术专利调查')">
        <span class="no-star"></span>
        <span>重点技术专利调查</span>
        <span class="o n-1">{{ getTotal('重点技术专利调查') }}</span>
      </div>
    </popover>
    <div class="t-2 b-1 c-14">确认被侵权</div>
    <div class="t-1 b-2 c-15 c-p" @click="handleClick('维权方案')">
      <span class="no-star"></span>
      <span>维权方案</span>
      <span class="o n-1">{{ getTotal('维权方案') }}</span>
    </div>
    <div class="c-16"></div>
    <div class="c-17"></div>
    <div class="c-19"></div>
    <div class="d-2 c-20"></div>
    <div class="c-21"></div>
    <div class="d-2 c-22"></div>
    <div class="c-23"></div>
    <div class="d-2 c-24"></div>
    <div class="c-25"></div>
    <div class="d-1 c-26"></div>
    <div class="c-27"></div>
    <div class="c-28"></div>
    <div class="c-29"></div>
    <div class="c-30"></div>
    <div class="d-5 c-31"></div>
    <div class="c-32"></div>
    <div class="d-1 c-33"></div>
    <div class="c-200"></div>
    <div class="d-3 c-201"></div>
    <div class="c-202"></div>
    <div class="c-203"></div>
    <div class="d-2 c-204"></div>
    <div class="d-1 c-205"></div>
  </div>
</template>

<script>
import mixins from './mixins'
export default {
  mixins: [mixins]
}
</script>

<style lang="scss" scoped>
.c-1 {
  left: 670px;
  top: 160px;
  min-width: 524px;
  padding:0 10px;
  height: 100px;
  border-radius: 10px;
  background: #11acaf;
  z-index: 10;
}

.c-2 {
  top: 275px;
  left: 710px;
  width: 276px;
  height: 70px;
}

.c-3 {
  top: 270px;
  left: 1060px;
  width: 276px;
  height: 70px;
}

.c-4 {
  width: 276px;
  height: 80px;
  top: 334px;
  left: 600px;
}

.c-5 {
  width: 276px;
  height: 80px;
  top: 334px;
  left: 976px;
}

.c-6 {
  width: 100px;
  height: 70px;
  top: 400px;
  left: 760px;
}

.c-7 {
  width: 110px;
  height: 70px;
  top: 400px;
  left: 1130px;
}

.c-8 {
  width: 100px;
  height: 66px;
  top: 520px;
  left: 1320px;
}

.c-9 {
  width: 276px;
  height: 80px;
  top: 460px;
  left: 600px;
}

.c-10 {
  width: 276px;
  height: 80px;
  top: 460px;
  left: 976px;
}

.c-11 {
  width: 276px;
  height: 80px;
  top: 460px;
  left: 1420px;
}

.c-12 {
  width: 276px;
  height: 80px;
  top: 585px;
  left: 600px;
}

.c-13 {
  width: 276px;
  height: 80px;
  top: 585px;
  left: 976px;
}

.c-14 {
  width: 276px;
  height: 70px;
  top: 650px;
  left: 665px;
}

.c-15 {
  width: 276px;
  height: 80px;
  top: 705px;
  left: 600px;
}

.c-16 {
  width: 2.7px;
  height: 30px;
  background: #d45a6a;
  top: 260px;
  left: 930px;
}

.c-17 {
  height: 2.7px;
  width: 375px;
  background: #d45a6a;
  top: 290px;
  left: 740px;
}

.c-19 {
  width: 2px;
  height: 40px;
  background: #d45a6a;
  top: 290px;
  left: 740px;
}

.c-20 {
  top: 318px;
  left: 731px;
}

.c-21 {
  width: 2.7px;
  height: 40px;
  background: #d45a6a;
  top: 290px;
  left: 1113px;
}

.c-22 {
  top: 318px;
  left: 1104px;
}

.c-23 {
  width: 2px;
  height: 40px;
  background: #d45a6a;
  top: 414px;
  left: 740px;
}

.c-24 {
  top: 445px;
  left: 731px;
}

.c-25 {
  width: 2.7px;
  height: 40px;
  background: #3084e5;
  top: 414px;
  left: 1113px;
}

.c-26 {
  top: 445px;
  left: 1104px;
}

.c-27 {
  height: 2px;
  width: 52px;
  background: #3084e5;
  top: 375px;
  left: 1252px;
}

.c-28 {
  width: 2px;
  height: 250px;
  background: #3084e5;
  top: 375px;
  left: 1304px;
}

.c-29 {
  height: 2.7px;
  width: 54px;
  background: #3084e5;
  top: 625px;
  left: 1252px;
}

.c-30 {
  height: 2px;
  width: 105px;
  background: #3084e5;
  top: 500px;
  left: 1304.5px;
}

.c-31 {
  top: 491px;
  left: 1405px;
}

.c-32 {
  width: 2px;
  height: 40px;
  background: #3084e5;
  top: 660px;
  left: 740px;
}

.c-33 {
  top: 690px;
  left: 731px;
}
.c-200 {
  height: 2.7px;
  width: 100px;
  background: #3084e5;
  top: 625px;
  left: 885px;
}
.c-201 {
  top: 616px;
  left: 880px;
}
.c-202 {
  width: 2px;
  height: 40px;
  background: #d45a6a;
  top: 540px;
  left: 740px;
}
.c-203 {
  width: 2.7px;
  height: 40px;
  background: #3084e5;
  top: 540px;
  left: 1113px;
}
.c-204 {
  top: 570px;
  left: 731px;
}
.c-205 {
  top: 570px;
  left: 1104px;
}
</style>