<template>
  <div>
    <div class="box"></div>
    <el-popover placement="bottom" width="524" trigger="hover">
      <p class="p-1">在遭遇专利侵权纠纷，收到专利侵权警告函或被他人起诉专利侵权时，合理应对以化险为夷，妥善解决侵权纠纷的解决方案。主要包括确认自有技术/产品是否存在侵权风险的侵权分析判断，并在存在侵权行为时进行专利无效、回避设计的应对机制。</p>
      <p class="p-1">随着市场竞争的加剧，无论是在国内或是国外市场环境下，越来越多的企业遭遇到侵权纠纷。这些侵权纠纷有的来自竞争对手，有的来自NPE（非专利实施实体），国内企业对涉诉一般具有恐惧心理，特别是涉外诉讼。但是，并不一定所有的侵权纠纷都可怕，很多侵权纠纷仅仅是竞争对手的商业手段或者是NPE的恐吓行为，通过专利分析评议，充分了解案情，在知己知彼的基础上，企业完全可以从容应对。</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-3 c-3">确认自有技术/产品是否存在侵权风险</div>
    <div class="t-1 b-2 c-4 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-5 c-p" @click="handleClick('侵权分析')">
        <span class="star"></span>
        <span>侵权分析</span>
        <span class="o n-2">{{ getTotal('侵权分析') }}</span>
      </div>
    </popover>
    <div class="t-2 b-1 c-6">定期了解关注企业/技术的发展情况</div>
    <div class="t-2 b-1 c-7">
      <span class="h-1">是</span>
    </div> 
    <popover type="11" width="270">
      <div class="t-1 b-2 c-8 c-p" @click="handleClick('定期专利监控公报')">
        <span class="no-star"></span>
        <span>定期专利监控公报</span>
        <span class="o n-1">{{ getTotal('定期专利监控公报') }}</span>
      </div>
    </popover>
    <popover type="7" width="270">
      <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>
    <popover type="6" width="270">
      <div class="t-1 b-4 c-10 c-p" @click="handleClick('回避设计')">
        <span class="star"></span>
        <span>回避设计</span>
        <span class="o n-2">{{ 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>
    <div class="t-2 b-1 c-12">对技术方向作出新颖性判断</div>
    <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>
    <div class="t-1 b-5 c-14">
      <span>新颖性判断</span>
    </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>
    <popover type="12" width="270">
      <div class="t-1 b-2 c-16 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-3 c-17">
      <span class="h-2">否</span>
    </div>
    <div class="t-1 b-4 c-18 c-p" @click="handleClick('不侵权分析意见')">
      <span class="star"></span>
      <span>不侵权分析意见</span>
      <span class="o n-2">{{ getTotal('不侵权分析意见') }}</span>
    </div>
    <div class="t-1 b-2 c-19 c-p" @click="handleClick('（己方）专利盘点')">
      <span class="no-star"></span>
      <span>
        <span class="t-3">（己方）</span><br>
        <span>专利盘点</span>
      </span>
      <span class="o n-1">{{ getTotal('（己方）专利盘点') }}</span>
    </div>
    <div class="t-2 b-1 c-20">找反诉专利</div>
    <div class="t-1 b-5 c-21">
      <span>专利布局完善</span>
    </div>
    <div class="t-2 b-1 c-22">
      <span class="h-1">是</span>
    </div>
    <div class="t-2 b-3 c-23">
      <span class="h-2">否</span>
    </div>
    <div class="t-2 b-3 c-71">
      <span class="h-2">否</span>
    </div>
    <div class="t-2 b-3 c-68">
      <span class="h-1">是</span>
    </div>
    <popover type="7" width="270">
      <div class="t-1 b-2 c-24 c-p" @click="handleClick('（己方）专利稳定性分析')">
        <span class="no-star"></span>
        <span>
          <span class="t-3">（己方）</span><br>
          <span>专利稳定性分析</span>
        </span>
        <span class="o n-1">{{ getTotal('（己方）专利稳定性分析') }}</span>
      </div>
    </popover>
    <div class="t-1 b-2 c-25 c-p" @click="handleClick('专利布局优化分析')">
      <span class="no-star"></span>
      <span>专利布局优化分析</span>
      <span class="o n-1">{{ getTotal('专利布局优化分析') }}</span>
    </div>
    <div class="t-1 b-5 c-200">
      <span>侵权判断</span>
    </div>
    <div class="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-1 c-31"></div>
    <div class="c-32"></div>
    <div class="c-33"></div>
    <div class="c-34"></div>
    <div class="c-35"></div>
    <div class="c-36"></div>
    <div class="c-38"></div>
    <div class="d-1 c-39"></div>
    <div class="c-41"></div>
    <div class="d-1 c-42"></div>
    <div class="c-43"></div>
    <div class="d-2 c-44"></div>
    <div class="c-45"></div>
    <div class="c-46"></div>
    <div class="c-47"></div>
    <div class="c-48"></div>
    <div class="c-49"></div>
    <div class="c-50"></div>
    <div class="c-51"></div>
    <div class="c-52"></div>
    <div class="d-2 c-53"></div>
    <div class="d-2 c-54"></div>
    <div class="d-2 c-55"></div>
    <div class="d-2 c-56"></div>
    <div class="d-5 c-57"></div>
    <div class="d-5 c-58"></div>
    <div class="d-1 c-59"></div>
    <div class="d-5 c-60"></div>
    <div class="d-1 c-61"></div>
    <div class="d-5 c-62"></div>
    <div class="c-201"></div>
    <div class="d-1 c-202"></div>
    <div class="c-203"></div>
    <div class="d-1 c-204"></div>
    <div class="t-2 b-3 c-205">反诉专利的稳定性分析</div>
    <div class="d-3 c-206"></div>
    <div class="d-9 c-207"></div>
  </div>
</template>

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

<style lang="scss" scoped>
.c-1 {
  top: 75px;
  left: 320px;
  min-width: 524px;
  padding:0 10px;
  height: 100px;
}
.c-2 {
  width: 240px;
  height: 70px;
  top: 190px;
  left: 410px;
}
.c-3 {
  width: 160px;
  height: 70px;
  top: 190px;
  left: 760px;
}
.c-4 {
  width: 300px;
  height: 80px;
  top: 255px;
  left: 250px;
}
.c-5 {
  width: 300px;
  height: 80px;
  top: 255px;
  left: 600px;
}
.c-6 {
  width: 160px;
  height: 70px;
  top: 330px;
  left: 410px;
}
.c-7 {
  width: 300px;
  height: 70px;
  top: 470px;
  left: 640px;
}
.c-8 {
  width: 300px;
  height: 80px;
  top: 395px;
  left: 250px;
}
.c-9 {
  width: 300px;
  height: 80px;
  top: 535px;
  left: 250px;
}
.c-10 {
  width: 300px;
  height: 80px;
  top: 535px;
  left: 600px;
}
.c-11 {
  width: 300px;
  height: 80px;
  top: 675px;
  left: 250px;
}
.c-12 {
  width: 120px;
  height: 70px;
  top: 610px;
  left: 760px;
}
.c-13 {
  width: 300px;
  height: 80px;
  top: 675px;
  left: 600px;
}
.c-14 {
  width: 300px;
  height: 80px;
  background-color: #E6A23C !important;
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
  transition:1s clip-path;
  top: 815px;
  left: 600px;
}
.c-15 {
  width: 300px;
  height: 80px;
  top: 945px;
  left: 600px;
}
.c-16 {
  width: 300px;
  height: 80px;
  top: 815px;
  left: 1030px;
}
.c-17 {
  width: 300px;
  height: 70px;
  top: 370px;
  left: 795px;
}
.c-18 {
  width: 300px;
  height: 80px;
  top: 255px;
  left: 1030px;
}
.c-19 {
  width: 300px;
  height: 80px;
  top: 395px;
  left: 1030px;
}
.c-20 {
  width: 220px;
  height: 70px;
  top: 470px;
  left: 1140px;
}
.c-21 {
  width: 300px;
  height: 80px;
  background-color: #E6A23C !important;
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
  transition:1s clip-path;
  top: 535px;
  left: 1030px;
}
.c-22 {
  width: 220px;
  height: 70px;
  top: 610px;
  left: 1120px;
}
.c-23 {
  width: 220px;
  height: 70px;
  top: 510px;
  left: 1260px;
}
.c-24 {
  width: 300px;
  height: 80px;
  top: 675px;
  left: 1030px;
}
.c-25 {
  width: 300px;
  height: 80px;
  top: 535px;
  left: 1400px;
}
.c-26 {
  height: 2px;
  width: 40px;
  background: #d45a6a;
  top: 575px;
  left: 550px;
}
.c-27 {
  width: 2px;
  height: 30px;
  background: #d45a6a;
  top: 170px;
  left: 575px;
}
.c-28 {
  height: 2px;
  width: 350px;
  background: #d45a6a;
  top: 200px;
  left: 400px;
}
.c-29 {
  width: 2px;
  height: 50px;
  background: #d45a6a;
  top: 200px;
  left: 400px;
}
.c-30 {
  width: 2px;
  height: 50px;
  background: #d45a6a;
  top: 200px;
  left: 750px;
}
.c-31 {
  top: 380px;
  left: 391px;
}
.c-32 {
  width: 2px;
  height: 60px;
  background: #d45a6a;
  top: 610px;
  left: 750px;
}
.c-33 {
  width: 2px;
  height: 60px;
  background: #d45a6a;
  top: 610px;
  left: 400px;
}
.c-34 {
  width: 2px;
  height: 60px;
  background: #d45a6a;
  top: 330px;
  left: 750px;
}
.c-35 {
  height: 2px;
  width: 350px;
  background: #3084e5;
  top: 510px;
  left: 400px;
}
.c-36 {
  height: 2px;
  width: 120px;
  background: #3084e5;
  top: 435px;
  left: 900px;
}
.c-37 {
  width: 2px;
  height: 46px;
  background: #3084e5;
  top: 435px;
  left: 1273px;
}
.c-38 {
  height: 2.5px;
  width: 40px;
  background: #3084e5;
  top: 292px;
  left: 980px;
}
.c-39 {
  top: 800px;
  left: 741px;
}
.c-40 {
  width: 2px;
  height: 13px;
  background: #3084e5;
  top: 481px;
  left: 1513px;
}
.c-41 {
  width: 2px;
  height: 60px;
  background: #3084e5;
  top: 470px;
  left: 750px;
}
.c-42 {
  top: 520px;
  left: 741px;
}
.c-43 {
  width: 2px;
  height: 60px;
  background: #3084e5;
  top: 330px;
  left: 400px;
}
.c-44 {
  top: 660px;
  left: 391px;
}
.c-45 {
  height: 2px;
  width: 647px;
  background: #3084e5;
  top: 985px;
  left: 905px;
}
.c-46 {
  height: 2px;
  width: 60px;
  background: #3084e5;
  top: 575px;
  left: 1330px;
}
.c-47 {
  width: 2px;
  height: 60px;
  background: #3084e5;
  top: 610px;
  left: 1180px;
}
.c-48 {
  width: 2px;
  height: 375px;
  background: #3084e5;
  top: 610px;
  left: 1550px;
}
.c-49 {
  width: 2px;
  height: 60px;
  background: #3084e5;
  top: 750px;
  left: 750px;
}
.c-50 {
  height: 2px;
  width: 120px;
  background: #3084e5;
  top: 855px;
  left: 900px;
}
.c-51 {
  width: 2px;
  height: 50px;
  background: #3084e5;
  top: 889px;
  left: 750px;
}
.c-52 {
  width: 2px;
  height: 145px;
  background: #3084e5;
  top: 292px;
  left: 980px;
}
.c-53 {
  top: 240px;
  left: 391px;
}
.c-54 {
  top: 240px;
  left: 741px;
}
.c-55 {
  top: 380px;
  left: 741px;
}
.c-56 {
  top: 660px;
  left: 741px;
}
.c-57 {
  top: 283px;
  left: 1015px;
}
.c-58 {
  top: 426px;
  left: 1015px;
}
.c-59 {
  top: 660px;
  left: 1171px;
}
.c-60 {
  top: 566px;
  left: 1383px;
}
.c-61 {
  top: 929px;
  left: 741px;
}
.c-62 {
  top: 846px;
  left: 1015px;
}
.c-68 {
  width: 276px;
  height: 70px;
  top: 885px;
  left: 650px;
}
.c-71 {
  width: 276px;
  height: 70px;
  top: 790px;
  left: 810px;
}
.c-200 {
  width: 300px;
  height: 80px;
  background-color: #E6A23C !important;
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
  transition:1s clip-path;
  top: 395px;
  left: 600px;
}
.c-201 {
  width: 2px;
  height: 20px;
  background: #3084e5;
  top: 510px;
  left: 400px;
}
.c-202 {
  top: 520px;
  left: 391px;
}
.c-203 {
  width: 2px;
  height: 60px;
  background: #3084e5;
  top: 470px;
  left: 1180px;
}
.c-204 {
  top: 520px;
  left: 1171px;
}
.c-205 {
  width: 100px;
  height: 70px;
  top: 610px;
  left: 1080px;
}
.c-206 {
  top: 976px;
  left: 900px;
}
.c-207 {
  top: 566px;
  left: 585px;
}
</style>