<template>
  <div class="wrapper" v-loading="loading">
    <div class="left">
			<AnalysisBox title="基本信息" :showAllBtn="false" height="auto">
				<div class="box1-main">
          <div class="box1-item">
            <div class="box1-item-left">{{ "调查案号：" }}</div>
            <div class="box1-item-right">{{ baseInfo.SEARCHNUM || '-' }}</div>
          </div>
          <div class="box1-item">
            <div class="box1-item-left">{{ "涉及产品：" }}</div>
            <div class="box1-item-right">
              {{ baseInfo.SEARCHPRODUCT || '-' }}
            </div>
          </div>
          <div class="box1-item">
            <div class="box1-item-left">{{ "调查类别：" }}</div>
            <div class="box1-item-right">{{ baseInfo.SEARCHTYPE || '-' }}</div>
          </div>
          <div class="box1-item">
            <div class="box1-item-left">{{ "涉及专利：" }}</div>
            <div class="box1-item-right">
              {{ baseInfo.patentCode || '-' }}
            </div>
          </div>
          <div class="box1-item">
            <div class="box1-item-left">{{ "限制措施：" }}</div>
            <div class="box1-item-right">{{ baseInfo.SORTMEASURE || '-' }}</div>
          </div>
          <div class="box1-item">
            <div class="box1-item-left">{{ "调查领域：" }}</div>
            <div class="box1-item-right1">
              <div class="tag" v-for="(item, index) in baseInfo.areaData" :key="index">{{ item }}</div>
              <div v-if="!baseInfo.areaData || !baseInfo.areaData.length">-</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>
			</AnalysisBox>
			<AnalysisBox title="调查公告" :showAllBtn="false" height="auto">
				<div class="box4-main">
					<div v-for="(item, index) in afficheList" :key="index" class="box4-item">
						<div class="item-icon">
							<img src="@/views/marketAccessRestrictions/singleCaseLayout/assets/images/icon_affiche.png" alt="">
						</div>
						<div class="item-right">
							<div class="item-time">{{ item.time }}</div>
							<div class="item-text">{{ item.text }}</div>
						</div>
					</div>
				</div>
			</AnalysisBox>
    </div>
    <div class="right">
			<AnalysisBox title="原告信息" :showAllBtn="false" height="auto">
				<div class="box2-main">
          <div class="data-head">
            <div class="data-icon">{{ baseInfo.ORGNAME?.substring(0, 3) }}</div>
            <div class="data-right">
              <div class="data-name">{{ baseInfo.ORGNAME }}</div>
              <div class="data-desc">{{ "" }}</div>
            </div>
          </div>
          <div class="data-text">{{ baseInfo.ORGBLURB || '-' }}</div>
					<AiTips :tips="tips"></AiTips>
        </div>
			</AnalysisBox>
			<AnalysisBox title="被告信息" :showAllBtn="false" height="auto">
				<div class="box3-main">
          <div class="data-item" v-for="(item, index) in caseList" :key="index">
            <div class="data-head">{{ item.title }}</div>
            <div class="info-list">
              <div class="info-item" v-for="(val, idx) in item.companyList" :key="idx">
                <div class="icon">
                  <img :src="val.logo" alt="" v-if="val.logo">
                  <div class="default-logo" v-else>{{ val.name ? val.name.substring(0, 1) : '' }}</div>
                </div>
                <div class="text">{{ val.name }}</div>
              </div>
            </div>
          </div>
        </div>
			</AnalysisBox>
			<RelatedEvent title="相关事件" :listData="eventList"></RelatedEvent>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getSearchBlurb } from "@/api/marketAccessRestrictions";

import AiTips from "@/views/marketAccessRestrictions/com/AiTips.vue";
import RelatedEvent from "@/views/marketAccessRestrictions/com/RelatedEvent.vue";

const tips = `Pantech是韩国的一家通信设备公司，曾经是手机制造商，但现在可能已转型为专利持有实体。这类公司常被称为"非执业实体"(NPE)或"专利断言实体"(PAE)，通过专利授权和诉讼获取收益。这些企业曾经是行业龙头，但因科技和市场形态巨变，加上自身改革步伐缓慢，经营状况每况愈下。卖掉实体业务部门后，留下来的是高达几万件的专利。`

const route = useRoute();
const loading = ref(false);
const baseInfo = ref({});
const processList = ref([]);
const caseList = ref([]);
// 调查概况
const handleGetSearchBlurb = async () => {
  loading.value = true;
  try {
    const res = await getSearchBlurb({
      searchId: route.query.searchId,
      sortCode: "337"
    });
		console.log("调查概况", res)
    if (res.code === 200 && res.data) {
      const data = res.data;
      baseInfo.value = data;
      
      // 案件进展
      if (data.progress) {
        processList.value = data.progress.map(p => ({
          time: p.PROGRESSDATE,
          title: p.PROGRESSSTAGE
        }));
      }

      // 被告信息分组
      if (data.defendantOrg) {
        const groups = {};
        data.defendantOrg.forEach(item => {
          const companyName = item.COMPANYNAME || "其他相关企业";
          if (!groups[companyName]) {
            groups[companyName] = {
              title: companyName + (companyName !== "其他" ? "及相关企业" : ""),
              companyList: []
            };
          }
          groups[companyName].companyList.push({
            name: item.COMNAME,
            logo: "" // API 不提供 logo
          });
        });
        caseList.value = Object.values(groups);
      }
    }
  } catch (error) {
    console.log("获取调查概况失败", error);
  }
	loading.value = false;
};

// 调查公告
const afficheList = ref([
	{
		time: "2025-03-30",
		text: "美国ITC正式对外国制造的半导体器件及其下游产品和组件启动337调查"
	},
	{
		time: "2025-03-30",
		text: "美国ITC正式对外国制造的半导体器件及其下游产品和组件启动337调查"
	},
	{
		time: "2025-03-30",
		text: "美国ITC正式对外国制造的半导体器件及其下游产品和组件启动337调查"
	},
	{
		time: "2025-03-30",
		text: "美国ITC正式对外国制造的半导体器件及其下游产品和组件启动337调查"
	},
	{
		time: "2025-03-30",
		text: "美国ITC正式对外国制造的半导体器件及其下游产品和组件启动337调查"
	},
]);

// 相关事件
const eventList = ref([
	{
		name: "某些特定外国制造的半导体器件及其下游产品和组件;委员会最终裁定未违反第337条的通知;调查终止",
		text: "特此通知，2025 年 2 月 18 日，根据 1930 年《关税法》第 337 条（经修订）已代表爱尔兰 Longitude Licensing Ltd.和爱尔",
		time: "2025年4月15日"
	},
	{
		name: "某些特定外国制造的半导体器件及其下游产品和组件;委员会最终裁定未违反第337条的通知;调查终止",
		text: "特此通知，2025 年 2 月 18 日，根据 1930 年《关税法》第 337 条（经修订）已代表爱尔兰 Longitude Licensing Ltd.和爱尔",
		time: "2025年4月15日"
	},
	{
		name: "某些特定外国制造的半导体器件及其下游产品和组件;委员会最终裁定未违反第337条的通知;调查终止",
		text: "特此通知，2025 年 2 月 18 日，根据 1930 年《关税法》第 337 条（经修订）已代表爱尔兰 Longitude Licensing Ltd.和爱尔",
		time: "2025年4月15日"
	},
])

onMounted(() => {
  handleGetSearchBlurb();
});
</script>

<style lang="scss" scoped>
.wrapper {
	width: 1600px;
	margin: 20px auto;
	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;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.right {
		width: 20px;
		flex: auto;
		margin-left: 16px;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
}

.box1-main {
	padding: 0 22px;
	.box1-item {
		display: flex;
		margin-bottom: 16px;
		.box1-item-left {
			width: 100px;
			height: 24px;
			flex: none;
			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 {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			.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;
				}
			}
		}
	}
}

.box2-main {
	padding: 0 22px 20px;
	.data-head {
		display: flex;
		border-bottom: 1px solid rgba(234, 236, 238, 1);
		padding-bottom: 16px;
		.data-icon {
			width: 48px;
			height: 48px;
			text-align: center;
			line-height: 48px;
			background: rgba(231, 243, 255, 1);
			color: var(--color-main-active);
			font-size: 14px;
			font-weight: bold;
			font-family: Microsoft YaHei;
		}
		.data-right {
			width: 20px;
			flex: auto;
			margin-left: 16px;
			font-size: 16px;
			font-family: Source Han Sans CN;
			.data-name {
				color: var(--text-primary-80-color);
				font-weight: bold;
			}
			.data-desc {
				color: var(--text-primary-65-color);
				font-weight: 400;
			}
		}
	}
	.data-text {
		width: 1012px;
		margin: 0 auto;
		margin-top: 13px;
		color: rgba(59, 65, 75, 1);
		font-family: Source Han Sans CN;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		height: 160px;
		overflow-y: auto;
	}
}

.box3-main {
	padding: 0 22px 20px;
	.data-item {
		.data-head {
			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;
		}
		.info-list {
			padding-top: 13px;
			display: flex;
			flex-wrap: wrap;
			.info-item {
				display: flex;
				height: 30px;
				width: 50%;
				margin-bottom: 10px;
				.icon {
					width: 24px;
					height: 24px;
					margin-top: 3px;
					display: flex;
					align-items: center;
					justify-content: center;
					img {
						width: 100%;
						height: 100%;
					}
					.default-logo {
						width: 24px;
						height: 24px;
						background: #e7f3ff;
						color: var(--color-main-active);
						font-size: 12px;
						font-weight: 700;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 4px;
					}
				}
				.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;
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding-right: 10px;
				}
			}
		}
	}
}

.box4-main {
	padding: 0 16px 16px;
	.box4-item {
		border-top: 1px solid var(--bg-black-5);
		padding: 6px;
		display: flex;
		.item-icon {
			width: 15px;
			height: 15px;
			font-size: 0px;
			margin-right: 16px;
			margin-top: 7px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.item-right {
			width: 20px;
			flex: auto;
			font-family: Source Han Sans CN;
			font-size: 16px;
			line-height: 30px;
			.item-time {
				font-weight: bold;
				color: var(--text-primary-80-color);
			}
			.item-text {
				color: var(--text-primary-65-color);
			}
		}
	}
	.box4-item:last-child {
		border-bottom: 1px solid var(--bg-black-5);
	}
}
</style>
