<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="b-0 t-4 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>
    <popover type="4" width="520">
      <div class="t-1 b-4 c-3 c-p" @click="handleClick('侵权风险排查（FTO调查）')">
        <span class="star"></span>
        <span>
          <span>侵权风险排查</span><br>
          <span class="t-3">（FTO调查）</span>
        </span>
        <span class="o n-2">{{ getTotal('侵权风险排查（FTO调查）') }}</span>
      </div>
    </popover>
    <div class="t-2 b-3 c-4">从风险调查中发现关联专利</div>
    <div class="t-2 b-3 c-5">发现潜在竞争对手/技术方向</div>
    <popover type="5" width="270">
      <div class="t-1 b-4 c-6 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-7">了解重点关注企业/潜在竞争企业的专利布局</div>
    <div class="t-2 b-1 c-8">了解重点关注技术方向的专利布局情况</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>
    <popover type="3" width="270">
      <div class="t-1 b-2 c-11 c-p" @click="handleClick('重点技术专利调查')">
        <span class="no-star"></span>
        <span>重点技术专利调查</span>
        <div class="o n-1">{{ getTotal('重点技术专利调查') }}</div>
      </div>
    </popover>
    <popover type="7" width="330">
      <div class="t-1 b-4 c-12 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-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-2 b-1 c-15">做专利挖掘，找可布局专利的技术方向</div>
    <popover type="11" 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>
    <popover type="12" width="270">
      <div class="t-1 b-2 c-17 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-18">新颖性判别</div>
    <div class="t-1 b-2 c-19 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-20 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-21 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-22 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-23">已授权专利</div>
    <div class="t-2 b-1 c-24">申请中专利</div>
    <div class="c-25"></div>
    <div class="d-2 c-26"></div>
    <div class="c-27"></div>
    <div class="c-28"></div>
    <div class="c-29"></div>
    <div class="d-1 c-30"></div>
    <div class="d-2 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-37"></div>
    <div class="d-5 c-38"></div>
    <div class="d-5 c-39"></div>
    <div class="c-41"></div>
    <div class="c-42"></div>
    <div class="c-44"></div>
    <div class="d-2 c-45"></div>
    <div class="d-2 c-46"></div>
    <div class="c-47"></div>
    <div class="d-5 c-48"></div>
    <div class="c-49"></div>
    <div class="d-1 c-50"></div>
    <div class="c-51"></div>
    <div class="d-1 c-53"></div>
    <div class="c-54"></div>
    <div class="d-3 c-55"></div>
    <div class="c-200"></div>
    <div class="c-201"></div>
    <div class="d-5 c-202"></div>
    <div class="d-1 c-203"></div>
    <div class="c-205"></div>
    <div class="c-206"></div>
    <div class="c-207"></div>
    <div class="c-208"></div>
    <div class="d-2 c-209"></div>
    <div class="d-2 c-210"></div>
    <div class="t-1 b-5 c-211">
      <span>侵权判断</span>
    </div>
    <div class="t-2 b-1 c-212">
      <span class="h-1">是</span>
    </div>
    <div class="c-213"></div>
    <div class="d-2 c-214"></div>
    <div class="c-215"></div>
    <div class="d-9 c-216"></div>
    <div class="t-1 b-1 c-217">
      <span class="h-2">否</span>
    </div>
    <div class="t-1 b-4 c-218 c-p" @click="handleClick('不侵权分析意见')">
      <span class="star"></span>
      <span>不侵权分析意见</span>
      <span class="o n-2">{{ getTotal('不侵权分析意见') }}</span>
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
.c-1 {
  padding:0 10px;
  left: 300px;
  top: 117px;
  min-width: 524px;
  height: 100px;
}

.c-2 {
  width: 524px;
  height: 66px;
  left: 130px;
  top: 210px;
}

.c-3 {
  width: 300px;
  height: 80px;
  left: 400px;
  top: 275px;
}

.c-4 {
  width: 120px;
  height: 70px;
  left: 430px;
  top: 350px;
}

.c-5 {
  width: 120px;
  height: 70px;
  top: 350px;
  left: 560px;
}

.c-6 {
  width: 300px;
  height: 80px;
  top: 425px;
  left: 400px;
}

.c-7 {
  width: 350px;
  height: 70px;
  top: 220px;
  left: 780px;
}

.c-8 {
  width: 350px;
  height: 70px;
  top: 490px;
  left: 775px;
}

.c-10 {
  width: 300px;
  height: 80px;
  top: 275px;
  left: 800px;
}

.c-11 {
  width: 300px;
  height: 80px;
  top: 425px;
  left: 800px;
}

.c-12 {
  width: 300px;
  height: 80px;
  top: 720px;
  left: 400px;
}

.c-13 {
  width: 300px;
  height: 80px;
  top: 720px;
  left: 800px;
}

.c-14 {
  width: 160px;
  height: 70px;
  top: 315px;
  left: 1160px;
}

.c-15 {
  width: 120px;
  height: 70px;
  top: 530px;
  left: 1310px;
}

.c-16 {
  width: 300px;
  height: 80px;
  top: 350px;
  left: 1345px;
}

.c-17 {
  width: 300px;
  height: 80px;
  top: 720px;
  left: 1150px;
}

.c-18 {
  width: 120px;
  height: 80px;
  top: 800px;
  left: 1300px;
}

.c-19 {
  width: 300px;
  height: 80px;
  top: 885px;
  left: 1150px;
}

.c-20 {
  width: 300px;
  height: 80px;
  top: 885px;
  left: 800px;
}

.c-21 {
  width: 300px;
  height: 80px;
  top: 885px;
  left: 475px;
}

.c-22 {
  width: 300px;
  height: 80px;
  top: 885px;
  left: 150px;
}

.c-23 {
  width: 165px;
  height: 70px;
  top: 795px;
  left: 410px;
}

.c-24 {
  width: 165px;
  height: 70px;
  top: 795px;
  left: 525px;
}

.c-25 {
  width: 2px;
  height: 60px;
  background: #d45a6a;
  top: 210px;
  left: 550px;
}

.c-26 {
  top: 260px;
  left: 541px;
}

.c-27 {
  width: 2px;
  height: 70px;
  background: #d45a6a;
  top: 350px;
  left: 550px;
}

.c-28 {
  width: 2px;
  height: 70px;
  background: #3084e5;
  top: 350px;
  left: 950px;
}

.c-29 {
  height: 2px;
  width: 190px;
  background: #d45a6a;
  top: 385px;
  left: 550px;
}

.c-30 {
  top: 410px;
  left: 941px;
}

.c-31 {
  top: 410px;
  left: 541px;
}

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

.c-33 {
  width: 2px;
  height: 152px;
  background: #3084e5;
  top: 315px;
  left: 1140px;
}

.c-34 {
  height: 2px;
  width: 40px;
  background: #3084e5;
  top: 315px;
  left: 1100px;
}

.c-35 {
  height: 2px;
  width: 40px;
  background: #3084e5;
  top: 465px;
  left: 1100px;
}

.c-36 {
  height: 2px;
  width: 55px;
  background: #3084e5;
  top: 315px;
  left: 740px;
}

.c-37 {
  height: 2px;
  width: 55px;
  background: #3084e5;
  top: 465px;
  left: 740px;
}

.c-38 {
  top: 306px;
  left: 785px;
}

.c-39 {
  top: 456px;
  left: 785px;
}

.c-41 {
  width: 2px;
  height: 60px;
  background: #d45a6a;
  top: 655px;
  left: 550px;
}

.c-42 {
  height: 2px;
  width: 400px;
  background: #d45a6a;
  top: 690px;
  left: 550px;
}

.c-43 {
  width: 2px;
  height: 20px;
  background: #d45a6a;
  top: 710px;
  left: 820px;
}

.c-44 {
  width: 2px;
  height: 20px;
  background: #d45a6a;
  top: 690px;
  left: 950px;
}

.c-45 {
  top: 705px;
  left: 541px;
}

.c-46 {
  top: 705px;
  left: 941px;
}

.c-47 {
  height: 2px;
  width: 50px;
  background: #3084e5;
  top: 780px;
  left: 950px;
}

.c-48 {
  top: 771px;
  left: 995px;
}

.c-49 {
  width: 2px;
  height: 80px;
  background: #3084e5;
  top: 800px;
  left: 950px;
}

.c-50 {
  top: 870px;
  left: 941px;
}

.c-51 {
  width: 2px;
  height: 80px;
  background: #3084e5;
  top: 800px;
  left: 1300px;
}

.c-53 {
  top: 870px;
  left: 1291px;
}

.c-54 {
  height: 2px;
  width: 50px;
  background: #3084e5;
  top: 923px;
  left: 1105px;
}

.c-55 {
  top: 914px;
  left: 1100px;
}

.c-200 {
  height: 2px;
  width: 200px;
  background: #3084e5;
  top: 385px;
  left: 1140px;
}
.c-201 {
  width: 2px;
  height: 330px;
  background: #3084e5;
  top: 385px;
  left: 1300px;
}
.c-202 {
  top: 376px;
  left: 1330px;
}
.c-203 {
  top: 705px;
  left: 1291px;
}

.c-205 {
  width: 2px;
  height: 60px;
  background: #d45a6a;
  top: 800px;
  left: 550px;
}
.c-206 {
  height: 2px;
  width: 350px;
  background: #d45a6a;
  top: 860px;
  left: 300px;
}
.c-207 {
  width: 2px;
  height: 20px;
  background: #d45a6a;
  top: 860px;
  left: 300px;
}
.c-208 {
  width: 2px;
  height: 20px;
  background: #d45a6a;
  top: 860px;
  left: 650px;
}
.c-209 {
  top: 870px;
  left: 291px;
}
.c-210 {
  top: 870px;
  left: 641px;
}
.c-211 {
  width: 300px;
  height: 80px;
  background-color: #E6A23C !important;
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
  transition:1s clip-path;
  top: 575px;
  left: 400px;
}
.c-212 {
  width: 276px;
  height: 70px;
  top: 650px;
  left: 390px;
}
.c-213 {
  width: 2px;
  height: 65px;
  background: #d45a6a;
  top: 500px;
  left: 550px;
}
.c-214 {
  top: 560px;
  left: 541px;
}
.c-215 {
  height: 2px;
  width: 105px;
  background: #d45a6a;
  top: 615px;
  left: 690px;
}
.c-216 {
  top: 606px;
  left: 785px;
}
.c-217 {
  width: 220px;
  height: 70px;
  top: 550px;
  left: 645px;
}
.c-218 {
  width: 300px;
  height: 80px;
  top: 575px;
  left: 800px;
}
</style>