<template>
  <div class="wrapper">
    <div class="left">
      <div class="box1">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">基本信息</div>

          <div class="header-right">
            <img src="../assets/images/header-icon.png" alt="" />
          </div>
        </div>
        <div class="box1-main">
          <div class="box1-item">
            <div class="box1-item-left">{{ "调查案号：" }}</div>
            <div class="box1-item-right">{{ "337-TA-1443" }}</div>
          </div>
          <div class="box1-item">
            <div class="box1-item-left">{{ "涉及产品：" }}</div>
            <div class="box1-item-right">
              {{
                "特定外国制造的半导体器件及其下游产品和组件（Certain Foreign-Fabricated Semiconductor Devices, Products Containing the Same, and Components Thereof"
              }}
            </div>
          </div>
          <div class="box1-item">
            <div class="box1-item-left">{{ "调查类别：" }}</div>
            <div class="box1-item-right">{{ "专利侵权调查" }}</div>
          </div>
          <div class="box1-item">
            <div class="box1-item-left">{{ "涉及专利：" }}</div>
            <div class="box1-item-right">
              {{ "注册专利号7745847、9093473、9147747、9184292" }}
            </div>
          </div>
          <div class="box1-item">
            <div class="box1-item-left">{{ "限制措施：" }}</div>
            <div class="box1-item-right">{{ "有限排除令 、禁止令 " }}</div>
          </div>
          <div class="box1-item">
            <div class="box1-item-left">{{ "调查领域：" }}</div>
            <div class="box1-item-right1">
              <div class="tag">{{ "半导体" }}</div>
            </div>
          </div>
          <div class="box1-item">
            <div class="box1-item-left">{{ "案件进展：" }}</div>
            <div class="box1-item-right2">
              <div
                class="box1-item-right2-item"
                v-for="(item, index) in processList"
                :key="index"
              >
                <div class="icon">
                  <img src="./assets/images/icon1.png" alt="" />
                </div>
                <div class="time">{{ item.time }}</div>
                <div class="title">{{ item.title }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="box2">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">原告信息</div>

          <div class="header-right">
            <img src="../assets/images/header-icon.png" alt="" />
          </div>
        </div>
        <div class="box2-main">
          <div class="box2-main-top">
            <div class="left">
              {{ "Lon" }}
            </div>
            <div class="right">
              <div class="title">{{ "爱尔兰Longitude Licensing Ltd" }}</div>
              <div class="info">{{ "爱尔兰半导体零件制造公司" }}</div>
            </div>
          </div>
          <div class="box2-main-center">
            {{
              `Longitude Licensing Ltd. (“Longitude”) 是IPValue管理集团旗下企业，致力于在国际知识经济最活跃的领域开展业务。
公司总部位于爱尔兰共和国都柏林，以成为领先的知识产权管理公司为愿景，专注于为全球专利持有人实现专利知识产权价值最大化。自2013年7月成立以来，经度公司目前已获得知名科技企业授权，管理着总计超过8,000项有效专利和专利申请的组合。这些专利组合涵盖半导体设计与制造工艺、非易失性存储技术、显示技术及消费电子技术。我们计划将合作伙伴关系与许可活动拓展至相关技术领域。`
            }}
          </div>
          <div class="box2-main-footer">
            <div class="box2-main-footer-left">
              <img src="./assets/images/footer-icon1.png" alt="" />
            </div>
            <div class="box2-main-footer-center">
              {{
                'Pantech是韩国的一家通信设备公司，曾经是手机制造商，但现在可能已转型为专利持有实体。这类公司常被称为"非执业实体"(NPE)或"专利断言实体"(PAE)，通过专利授权和诉讼获取收益。这些企业曾经是行业龙头，但因科技和市场形态巨变，加上自身改革步伐缓慢，经营状况每况愈下。卖掉实体业务部门后，留下来的是高达几万件的专利。'
              }}
            </div>
            <div class="box2-main-footer-right">
              <img src="./assets/images/footer-icon2.png" alt=""></img>
            </div>
          </div>
        </div>
      </div>
      <div class="box3">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">被告信息</div>
          <div class="header-info">
            <div class="icon">
              <img src="./assets/images/header-info-icon.png" alt="">
            </div>
            <div class="text">{{ '以下为列名被告企业及其关联公司' }}</div>
          </div>
          <div class="header-right">
            <img src="../assets/images/header-icon.png" alt="" />
          </div>
        </div>
        <div class="box3-main">
          <div class="box3-main-box" v-for="item,index in caseList" :key="index">
            <div class="box3-main-box-header">{{ item.title }}</div>
            <div class="box3-main-box-content">
              <div class="content-item" v-for="val,idx in caseList[index].companyList" :key="idx">
                <div class="icon">
                  <img :src="val.logo" alt="">
                </div>
                <div class="text">{{ val.name }}</div>
              </div>
            </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";

import Logo1 from './assets/images/logo1.png'
import Logo2 from './assets/images/logo2.png'
import Logo3 from './assets/images/logo3.png'
import Logo4 from './assets/images/logo4.png'
import Logo5 from './assets/images/logo5.png'
import Logo6 from './assets/images/logo6.png'

const processList = ref([
  {
    time: "2025-02-18",
    title: "申请立案",
  },
  {
    time: "2025-03-21",
    title: "立案",
  },
  {
    time: "2025-08-14",
    title: "部分仲裁",
  },
  {
    time: "2025-09-18",
    title: "部分终裁",
  },
]);

const caseList = ref([
  {
    title:'一加(OnePlus)及相关企业',
    companyList: [
      {
        name: '深圳市万普拉斯科技有限公司 (中国广东)',
        logo: Logo1
      },
        {
        name: 'OnePlus USA Corp. (美国德州欧文)',
        logo: Logo1
      },
    ]
  },
   {
    title:'联想(Lenovo)及相关企业',
    companyList: [
     {
        name: '联想集团 (中国北京)',
        logo: Logo2
      },
        {
        name: 'Lenovo (United States) Inc. (美国北卡罗来纳州)',
        logo: Logo2
      },
       {
        name: 'Motorola Mobility LLC (美国伊利诺伊州)',
        logo: Logo2
      },
    ]
  },
   {
    title:'TCL及相关企业',
    companyList: [
      {
        name: 'TCL实业控股股份有限公司 (中国广东)',
        logo: Logo3
      },
        {
        name: 'TCL Electronics Holdings Ltd. (中国香港)',
        logo: Logo3
      },
       {
        name: 'TCL Communication Ltd. (中国香港)',
        logo: Logo3
      },
       {
        name: 'TCL Communication Ltd. (中国香港)',
        logo: Logo3
      },
       {
        name: 'TCL Communication Technology Holdings Ltd. (中国广东)',
        logo: Logo3
      },
       {
        name: 'TCL Mobile International Ltd. (中国香港)',
        logo: Logo3
      },
       {
        name: '惠州TCL移动通信有限公司 (中国广东)',
        logo: Logo3
      },
       {
        name: 'TCL Mobile Communication (HK) Company Ltd. (中国香港)',
        logo: Logo3
      },
    ]
  },
   {
    title:'其他相关企业',
    companyList: [
      {
        name: 'Tinno USA, Inc. (美国德州普莱诺)',
        logo: Logo4
      },
        {
        name: '深圳市天珑移动技术有限公司 (中国广东)',
        logo: Logo5
      },
       {
        name: 'HMD Global (芬兰)',
        logo: Logo6
      },
             {
        name: 'HMD Global OY (芬兰)',
        logo: Logo6
      },
             {
        name: 'HMD America, Inc. (美国佛罗里达州迈阿密)',
        logo: Logo6
      },
    ]
  },
])


</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 1191px;
  padding: 0 160px;
  display: flex;
  .box-header {
    height: 56px;
    display: flex;
    position: relative;
    .header-left {
      margin-top: 20px;
      width: 8px;
      height: 16px;
      border-radius: 0 4px 4px 0;
      background: rgba(10, 87, 166, 1);
    }
    .title {
      margin-left: 14px;
      margin-top: 16px;
      height: 24px;
      line-height: 24px;
      color: rgba(10, 87, 166, 1);
      font-family: Microsoft YaHei;
      font-size: 18px;
      font-weight: 700;
    }
    .header-btn-box {
      position: absolute;
      top: 14px;
      right: 52px;
      display: flex;
      .btn {
        margin-left: 8px;
        height: 28px;
        padding: 0 8px;
        box-sizing: border-box;
        border: 1px solid rgba(230, 231, 232, 1);
        border-radius: 4px;
        background: rgba(255, 255, 255, 1);
        text-align: center;
        line-height: 28px;
        color: rgba(59, 65, 75, 1);
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: 400;
        cursor: pointer;
      }
      .btnActive {
        border: 1px solid rgba(10, 87, 166, 1);
        background: rgba(246, 250, 255, 1);
        color: rgba(10, 87, 166, 1);
      }
    }
    .header-info {
      height: 22px;
      position: absolute;
      right: 56px;
      top: 17px;
      display: flex;
      justify-content: flex-end;
      .icon {
        margin-top: 3px;
        width: 14px;
        height: 14px;
        margin-right: 8px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        height: 22px;
        color: rgba(95, 101, 108, 1);
        font-family: Microsoft YaHei;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
      }
    }
    .header-right {
      position: absolute;
      top: 14px;
      right: 12px;
      width: 32px;
      height: 32px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .left {
    width: 520px;
    .box1 {
      margin-top: 16px;
      width: 520px;
      height: 837px;
      border-radius: 4px;
      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
      background: rgba(255, 255, 255, 1);
      .box1-main {
        margin-top: 6px;
        margin-left: 22px;
        .box1-item {
          display: flex;
          margin-bottom: 16px;
          .box1-item-left {
            width: 100px;
            height: 24px;
            color: rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
            margin-top: 3px;
            margin-bottom: 3px;
          }
          .box1-item-right {
            width: 346px;
            color: rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
          }
          .box1-item-right1 {
            .tag {
              margin-top: 3px;
              margin-bottom: 3px;
              height: 24px;
              box-sizing: border-box;
              border: 1px solid rgba(135, 232, 222, 1);
              border-radius: 4px;
              background: rgba(230, 255, 251, 1);
              line-height: 24px;
              text-align: center;
              padding: 0 8px;
              color: rgba(19, 168, 168, 1);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-weight: 400;
            }
          }
          .box1-item-right2 {
            .box1-item-right2-item {
              width: 332px;
              height: 36px;
              display: flex;
              .icon {
                width: 10px;
                height: 10px;
                margin-left: 17px;
                margin-top: 10px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .time {
                height: 24px;
                margin-left: 16px;
                margin-top: 6px;
                color: rgba(10, 87, 166, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px;
              }
              .title {
                height: 24px;
                margin-left: 16px;
                margin-top: 6px;
                color: rgba(10, 87, 166, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
              }
            }
          }
        }
      }
    }
  }
  .right {
    width: 1064px;
    margin-left: 16px;
    .box2 {
      margin-top: 16px;
      width: 1064px;
      height: 410px;
      border-radius: 4px;
      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
      background: rgba(255, 255, 255, 1);
      .box2-main {
        .box2-main-top {
          display: flex;
          width: 1012px;
          height: 69px;
          border-bottom: 1px solid rgba(234, 236, 238, 1);
          margin: 0 auto;
          .left {
            width: 48px;
            height: 48px;
            text-align: center;
            line-height: 48px;
            background: rgba(231, 243, 255, 1);
            color: rgba(10, 87, 166, 1);
            font-family: Microsoft YaHei;
            font-size: 14px;
            font-weight: 700;
          }
          .right {
            margin-left: 16px;
            .title {
              height: 24px;
              color: rgba(59, 65, 75, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 24px;
            }
            .info {
              color: rgba(95, 101, 108, 1);
              height: 24px;
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 24px;
            }
          }
        }
        .box2-main-center {
          width: 1012px;
          margin: 0 auto;
          margin-top: 13px;
          color: rgba(59, 65, 75, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
          height: 160px;
        }
        .box2-main-footer {
          margin: 0 auto;
          margin-top: 10px;
          width: 1034px;
          height: 88px;
          box-sizing: border-box;
          border: 1px solid rgba(231, 243, 255, 1);
          border-radius: 4px;
          background: rgba(246, 251, 255, 1);
          box-sizing: border-box;
          padding: 6px 12px;
          display: flex;
          .box2-main-footer-left {
            width: 19px;
            height: 20px;
            margin-top: 22px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .box2-main-footer-center {
            margin-top: 2px;
            margin-left: 13px;
            width: 941px;
            color: rgba(10, 87, 166, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
          }
          .box2-main-footer-right {
            margin-left: 13px;
            margin-top: 26px;
            width: 24px;
            height: 24px;
            border-radius: 12px;
            background: rgba(231, 243, 255, 1);
            img {
              width: 12px;
              height: 12px;
              margin-top: 6px;
              margin-left: 6px;
            }
          }
        }
      }
    }
    .box3 {
      margin-top: 16px;
      margin-bottom: 35px;
      width: 1064px;
      height: 714px;
      border-radius: 4px;
      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
      background: rgba(255, 255, 255, 1);
      .box3-main {
        margin-top: 1px;
        margin-left: 24px;
        margin-right: 27px;
        .box3-main-box {
          margin-bottom: 18px;
          .box3-main-box-header {
            height: 36px;
            border-bottom: 1px solid rgba(234, 236, 238, 1);
            color: rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 700;
            line-height: 36px;
          }
          .box3-main-box-content {
            padding-top: 13px;
            display: flex;
            flex-wrap: wrap;
            .content-item {
              display: flex;
              height: 30px;
              width: 50%;
              margin-bottom: 11px;
              .icon {
                width: 24px;
                height: 24px;
                margin-top: 3px;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
              .text {
                margin-left: 13px;
                height: 30px;
                color: rgba(95, 101, 108, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 400;
                line-height: 30px;
              }
            }
          }
        }
      }
    }
  }
}
</style>