<template>
  <div>
    <div class="box"></div>
    <el-popover placement="bottom" width="575" 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-1 c-3">了解潜在威胁方企业的专利布局情况</div>
    <div class="t-2 b-1 c-4">了解企业所属行业专利技术现有发展情况</div>
    <div class="t-2 b-1 c-5">了解己方专利布局情况，并确认可用于维权的专利</div>
    <div class="t-1 b-4 c-6 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>
    <div class="t-1 b-2 c-7 c-p" @click="handleClick('产业/行业专利调查')">
      <span class="no-star"></span>
      <span>产业/行业专利调查</span>
      <span class="o n-1">{{ getTotal('产业/行业专利调查') }}</span>
    </div>
    <div class="t-1 b-4 c-8 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>
    <div class="t-1 b-2 c-9 c-p" @click="handleClick('产业调查')">
      <span class="no-star"></span>
      <span>产业调查</span>
      <span class="o n-1">{{ getTotal('产业调查') }}</span>
    </div>
    <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>
    <div class="t-2 b-1 c-11">了解重点关注企业/潜在竞争企业的专利布局</div>
    <div class="t-2 b-1 c-12">了解重点关注技术方向的专利布局情况</div>
    <div class="t-2 b-1 c-13">确认涵盖对方产品</div>
    <popover type="1" width="300">
      <div class="t-1 b-2 c-14 c-p" @click="handleClick('公司调查')">
        <span class="no-star"></span>
        <span>公司调查</span>
        <span class="o n-1">{{ getTotal('公司调查') }}</span>
      </div>
    </popover>
    <popover type="3" width="300">
      <div class="t-1 b-4 c-15 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-16 c-p" @click="handleClick('确认核心专利')">
      <span class="no-star"></span>
      <span>确认核心专利</span>
      <span class="o n-1">{{ getTotal('确认核心专利') }}</span>
    </div>
<!-- 无效应对 -->
<div class="t-1 b-4 c-225 c-p"  @click="handleClick('专利无效应对')">
      <span class="star"></span>
      <span>专利无效应对</span>
      <span class="o n-2">{{ getTotal('专利无效应对') }}</span>
      <!-- <span class="o n-2">0</span> -->
    </div>


    <div class="t-1 b-4 c-17 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>
    <div class="t-2 b-1 c-18">定期了解关注企业/技术的发展情况</div>
    <div class="t-2 b-3 c-19">加强对行业技术薄弱点/空白点的专利布局</div>
    <div class="t-1 b-4 c-20 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>
    <div class="t-2 b-1 c-21">已授权专利</div>
    <div class="t-2 b-1 c-22">申请中专利</div>
    <div class="t-1 b-2 c-23 c-p" @click="handleClick('提出无效')">
      <span class="no-star"></span>
      <span>提出无效</span>
      <span class="o n-1">{{ getTotal('提出无效') }}</span>
    </div>
    <div class="t-1 b-2 c-24 c-p" @click="handleClick('第三方意见')">
      <span class="no-star"></span>
      <span>第三方意见</span>
      <span class="o n-1">{{ getTotal('第三方意见') }}</span>
    </div>
    <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-2 c-26 c-p" @click="handleClick('回避设计')">
      <span class="no-star"></span>
      <span>回避设计</span>
      <span class="o n-1">{{ getTotal('回避设计') }}</span>
    </div>
    <div class="t-1 b-4 c-27 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-28 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-29">针对威胁方产品包围布局</div>
    <div class="t-1 b-2 c-31 c-p" @click="handleClick('专利布局优化分析')">
      <span class="no-star"></span>
      <span>专利布局优化分析</span>
      <span class="o n-1">{{ getTotal('专利布局优化分析') }}</span>
    </div>
    <div class="c-32"></div>
    <div class="c-34"></div>
    <div class="c-35"></div>
    <div class="c-36"></div>
    <div class="c-37"></div>
    <div class="c-38"></div>
    <div class="c-39"></div>
    <div class="c-40"></div>
    <div class="c-41"></div>
    <div class="c-42"></div>
    <div class="c-45"></div>
    <div class="c-48"></div>
    <div class="c-49"></div>
    <div class="c-51"></div>
    <div class="c-52"></div>
    <div class="c-53"></div>
    <div class="c-54"></div>
    <div class="c-55"></div>
    <div class="c-56"></div>
    <div class="c-57"></div>
    <div class="c-58"></div>
    <div class="c-60"></div>
    <div class="c-61"></div>
    <div class="c-62"></div>
    <div class="c-63"></div>
    <div class="d-1 c-65"></div>
    <div class="d-1 c-66"></div>
    <div class="d-1 c-67"></div>
    <div class="d-1 c-68"></div>
    <div class="d-1 c-69"></div>
    <div class="d-1 c-70"></div>
    <div class="d-1 c-71"></div>
    <div class="d-1 c-72"></div>
    <div class="d-2 c-73"></div>
    <div class="d-2 c-74"></div>
    <div class="d-2 c-75"></div>
    <div class="d-1 c-76"></div>
    <div class="d-5 c-77"></div>
    <div class="d-1 c-79"></div>
    <div class="d-1 c-80"></div>
    <div class="d-3 c-81"></div>
    <div class="c-201"></div>
    <div class="d-1 c-202"></div>
    <div class="c-203"></div>
    <div class="c-204"></div>
    <div class="c-205"></div>
    <div class="d-1 c-206"></div>
    <div class="d-1 c-207"></div>
    <div class="c-208"></div>
    <div class="c-209"></div>
    <div class="c-210"></div>
    <div class="c-211"></div>
    <div class="c-215"></div>
    <div class="d-8 c-216"></div>
    <div class="d-5 c-217"></div>
    <div class="d-5 c-218"></div>
    <div class="d-8 c-219"></div>
    <div class="d-9 c-220"></div>
    <div class="c-221"></div>
    <div class="c-222"></div>
    <div class="c-223"></div>
    <div class="d-1 c-224"></div>
    <div class="c-226"></div>
    <div class="c-227"></div>
    <div class="c-228"></div>
  </div>
</template>

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

<style lang="scss" scoped>
.c-1 {
  left: 675px;
  top: 75px;
  min-width: 524px;
  padding:0 10px;
  height: 100px;
  border-radius: 10px;
  background: #11acaf;
  z-index: 10;
}
.c-2 {
  width: 584px;
  height: 66px;
  top: 175px;
  left: 675px;
}
.c-3 {
  width: 160px;
  height: 70px;
  top: 200px;
  left: 450px;
}
.c-4 {
  width: 170px;
  height: 70px;
  top: 200px;
  left: 980px;
}
.c-5 {
  width: 200px;
  height: 70px;
  top: 200px;
  left: 1430px;
}
.c-6 {
  width: 300px;
  height: 80px;
  top: 265px;
  left: 290px;
}
.c-7 {
  width: 300px;
  height: 80px;
  top: 265px;
  left: 810px;
}
.c-8 {
  width: 300px;
  height: 80px;
  top: 265px;
  left: 1500px;
}
.c-9 {
  width: 300px;
  height: 80px;
  top: 415px;
  left: 110px;
}
.c-10 {
  width: 300px;
  height: 80px;
  top: 415px;
  left: 460px;
}
.c-11 {
  width: 130px;
  height: 70px;
  top: 345px;
  left: 830px;
}
.c-12 {
  width: 170px;
  height: 70px;
  top: 310px;
  left: 1150px;
}
.c-13 {
  width: 80px;
  height: 70px;
  top: 345px;
  left: 1670px;
}
.c-14 {
  width: 300px;
  height: 80px;
  top: 415px;
  left: 810px;
}
.c-15 {
  width: 300px;
  height: 80px;
  top: 415px;
  left: 1160px;
}
.c-16 {
  width: 300px;
  height: 80px;
  top: 415px;
  left: 1500px;
}
.c-17 {
  width: 300px;
  height: 80px;
  top: 555px;
  left: 460px;
}
.c-18 {
  width: 300px;
  height: 70px;
  top: 480px;
  left: 980px;
}
.c-19 {
  width: 120px;
  height: 70px;
  top: 580px;
  left: 1180px;
}
.c-20 {
  width: 300px;
  height: 80px;
  top: 555px;
  left: 1330px;
}
.c-21 {
  width: 165px;
  height: 70px;
  top: 646px;
  left: 240px;
}
.c-22 {
  width: 165px;
  height: 70px;
  top: 646px;
  left: 590px;
}
.c-23 {
  width: 300px;
  height: 80px;
  top: 705px;
  left: 110px;
}
.c-24 {
  width: 300px;
  height: 80px;
  top: 705px;
  left: 460px;
}
.c-25 {
  width: 300px;
  height: 80px;
  top: 555px;
  left: 810px;
}
.c-26 {
  width: 300px;
  height: 80px;
  top: 705px;
  left: 810px;
}
.c-27 {
  width: 300px;
  height: 80px;
  left: 1160px;
  top: 850px;
}
.c-28 {
  width: 300px;
  height: 80px;
  top: 705px;
  left: 1500px;
}
.c-29 {
  width: 300px;
  height: 80px;
  top: 820px;
  left: 70px;
}
.c-30 {
  width: 320px;
  height: 80px;
  top: 925px;
  left: 965px;
}
.c-31 {
  width: 300px;
  height: 80px;
  top: 850px;
  left: 1500px;
}
.c-32 {
  width: 2.7px;
  height: 90px;
  background: #3084e5;
  top: 170px;
  left: 966px;
}
.c-34 {
  height: 2px;
  width: 1215px;
  background: #3084e5;
  top: 200px;
  left: 436px;
}
.c-35 {
  width: 2px;
  height: 60px;
  background: #3084e5;
  top: 200px;
  left: 436px;
}
.c-36 {
  width: 2.7px;
  height: 60px;
  background: #3084e5;
  top: 200px;
  left: 1650px;
}
.c-37 {
  width: 2px;
  height: 30px;
  background: #3084e5;
  top: 340px;
  left: 436px;
}
.c-38 {
  height: 2.7px;
  width: 530px;
  background: #3084e5;
  top: 370px;
  left: 260px;
}
.c-39 {
  width: 2px;
  height: 40px;
  background: #3084e5;
  top: 370px;
  left: 260px;
}
.c-40 {
  width: 2.7px;
  height: 40px;
  background: #3084e5;
  top: 370px;
  left: 610px;
}
.c-41 {
  height: 2px;
  width: 24px;
  top: 455px;
  left: 90px;
  background: #3084e5;
}
.c-42 {
  width: 2.7px;
  height: 437px;
  background: #3084e5;
  top: 455px;
  left: 90px;
}
.c-43 {
  width: 420px;
  border: 1px dashed #3084e5;
  top: 964px;
  left: 243px;
}
.c-44 {
  height: 2px;
  width: 15px;
  background: #3084e5;
  top: 660px;
  left: 607px;
}
.c-45 {
  width: 2.7px;
  height: 100px;
  background: #3084e5;
  top: 780px;
  left: 966px;
}
.c-46 {
  height: 2px;
  width: 45px;
  background: #3084e5;
  top: 843px;
  left: 622px;
}
.c-47 {
  height: 2px;
  width: 35px;
  background: #d45a6a;
  top: 350px;
  left: 607px;
}
.c-48 {
  width: 2.7px;
  height: 160px;
  background: #3084e5;
  top: 370px;
  left: 790px;
}
.c-49 {
  height: 2.7px;
  width: 170px;
  background: #3084e5;
  top: 530px;
  left: 790px;
}
.c-50 {
  width: 2px;
  height: 40px;
  background: #3084e5;
  top: 370px;
  left: 812px;
}
.c-51 {
  width: 2.7px;
  height: 40px;
  background: #3084e5;
  top: 370px;
  left: 1305px;
}
.c-52 {
  width: 2.7px;
  height: 355px;
  background: #d45a6a;
  top: 490px;
  left: 1305px;
}
.c-53 {
  height: 2.7px;
  width: 1060px;
  background: #3084e5;
  top: 890px;
  left: 90px;
}
.c-54 {
  width: 2.7px;
  height: 70px;
  background: #d45a6a;
  top: 340px;
  left: 1650px;
}
.c-55 {
  width: 2.7px;
  height: 30px;
  background: #3084e5;
  top: 490px;
  left: 1650px;
}
.c-56 {
  width: 2.7px;
  height: 30px;
  background: #d45a6a;
  top: 665px;
  left: 1650px;
}
.c-57 {
  height: 2.7px;
  width: 332px;
  background: #d45a6a;
  top: 530px;
  left: 975px;
}
.c-58 {
  height: 2px;
  width: 55px;
  background: #3084e5;
  top: 455px;
  left: 1100px;
}
.c-59 {
  height: 2px;
  width: 25px;
  background: #3084e5;
  top: 964px;
  left: 951px;
}
.c-60 {
  width: 2.7px;
  height: 60px;
  background: #3084e5;
  top: 490px;
  left: 966px;
}
.c-61 {
  height: 2.7px;
  width: 80px;
  background: #3084e5;
  top: 890px;
  left: 1470px;
}
.c-62 {
  width: 2.7px;
  height: 70px;
  background: #3084e5;
  top: 340px;
  left: 966px;
}
.c-63 {
  height: 2.7px;
  width: 340px;
  background: #3084e5;
  top: 370px;
  left: 966px;
}

.c-65 {
  top: 250px;
  left: 427px;
}
.c-66 {
  top: 250px;
  left: 957px;
}
.c-67 {
  top: 250px;
  left: 1641px;
}
.c-68 {
  top: 400px;
  left: 251px;
}
.c-69 {
  top: 400px;
  left: 601px;
}
.c-70 {
  top: 540px;
  left: 1470px;
}
.c-71 {
  top: 400px;
  left: 957px;
}
.c-72 {
  top: 400px;
  left: 1296px;
}
.c-73 {
  top: 400px;
  left: 1641px;
}
.c-74 {
  top: 835px;
  left: 1296px;
}
.c-75 {
  top: 690px;
  left: 1641px;
}
.c-76 {
  top: 690px;
  left: 957px;
}
.c-77 {
  top: 881px;
  left: 1145px;
}
.c-78 {
  top: 955px;
  left: 660px;
}
.c-79 {
  top: 870px;
  left: 957px;
}
.c-80 {
  top: 540px;
  left: 957px;
}
.c-81 {
  top: 881px;
  left: 1465px;
}
.c-200 {
  width: 165px;
  height: 70px;
  top: 550px;
  left: 442px;
}
.c-201 {
  width: 2.7px;
  height: 60px;
  background: #3084e5;
  top: 490px;
  left: 610px;
}
.c-202 {
  top: 540px;
  left: 601px;
}
.c-203 {
  width: 2px;
  height: 45px;
  background: #3084e5;
  top: 655px;
  left: 260px;
}
.c-204 {
  width: 2.7px;
  height: 45px;
  background: #3084e5;
  top: 655px;
  left: 966px;
}
.c-205 {
  height: 2px;
  width: 707px;
  background: #3084e5;
  top: 655px;
  left: 260px;
}
.c-206 {
  top: 690px;
  left: 251px;
}
.c-207 {
  top: 690px;
  left: 601px;
}
.c-208 {
  width: 2.7px;
  height: 65px;
  background: #3084e5;
  top: 635px;
  left: 610px;
}
.c-209 {
  height: 2.7px;
  width: 190px;
  background: #d45a6a;
  top: 305px;
  left: 1800px;
}
.c-210 {
  width: 2.7px;
  height: 587px;
  background: #d45a6a;
  top: 305px;
  left: 1990px;
}
.c-211 {
  height: 2.7px;
  width: 190px;
  background: #d45a6a;
  top: 890px;
  left: 1805px;
}
.c-212 {
  top: 953px;
  left: 1620px;
}
.c-213 {
  width: 50px;
  border: 1px dashed #d45a6a;
  top: 515px;
  left: 1245px;
}
.c-214 {
  height: 330px;
  border: 1px dashed #d45a6a;
  top: 515px;
  left: 1295px;
}
.c-215 {
  height: 2.7px;
  width: 190px;
  background: #d45a6a;
  top: 750px;
  left: 1305px;
}
.c-216 {
  top: 521px;
  left: 970px;
}
.c-217 {
  top: 446px;
  left: 1145px;
}
.c-218 {
  top: 521px;
  left: 950px;
}
.c-219 {
  top: 881px;
  left: 1800px;
}
.c-220 {
  top: 741px;
  left: 1485px;
}


.c-221 {
  width: 2.7px;
    height: 22px;
    background: #3084e5;
    top: 523px;
    left: 1478px;
}
.c-222 {
  width: 354px;
    height: 2.7px;
    background: #d45a6a;
    top: 663px;
    left: 1478px;

}
.c-223 {
  width: 2.7px;
    height: 22px;
    background: #3084e5;
    top: 523px;
    left: 1830px;
}
.c-224 {
  top: 540px;
  left: 1822px;
}
.c-225 {
  width: 300px;
  height: 80px;
  top: 555px;
  left: 1670px;
}
.c-226 {
  width: 354px;
    height: 2.7px;
    background: #3084e5;
    top: 520px;
    left: 1478px;
}
.c-227 {
  width: 2.7px;
    height: 30px;
    background: #d45a6a;
    top: 635px;
    left: 1478px;
}.c-228 {
  width: 2.7px;
    height: 30px;
    background: #d45a6a;
    top: 635px;
    left: 1830px;
}
</style>