<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">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon1.png" alt="" />
						</div>
            <div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</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">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</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="" />
            </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">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</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: var(--color-main-active);
		}
		.title {
			margin-left: 14px;
			margin-top: 16px;
			height: 24px;
			line-height: 24px;
			color: var(--color-main-active);
			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 var(--color-main-active);
				background: rgba(246, 250, 255, 1);
				color: var(--color-main-active);
			}
		}
		.header-info {
			height: 22px;
			position: absolute;
			right: 84px;
			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;
			display: flex;
			justify-content: flex-end;
			gap: 4px;
			.icon {
				width: 28px;
				height: 28px;
				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: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
							}
							.title {
								height: 24px;
								margin-left: 16px;
								margin-top: 6px;
								color: var(--color-main-active);
								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: var(--color-main-active);
						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: var(--color-main-active);
						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>