<template>
  <div class="wrapper" v-loading="loading">
    <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">{{ 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>
      </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">
              {{ baseInfo.ORGNAME ? baseInfo.ORGNAME.substring(0, 3) : '-' }}
            </div>
            <div class="right">
              <div class="title">{{ baseInfo.ORGNAME || '-' }}</div>
              <div class="info">{{ "-" }}</div>
            </div>
          </div>
          <div class="box2-main-center">
            {{ baseInfo.ORGBLURB || '-' }}
          </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">
              {{ baseInfo.ORGBLURB || '-' }}
            </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 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>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getSearchBlurb } from "@/api/marketAccessRestrictions";

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"
    });
    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.error("获取调查详情失败", error);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  handleGetSearchBlurb();
});
</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 {
						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;
							}
						}
					}
				}
			}
		}
	}
	.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;
          overflow-y: auto;
				}
				.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;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
					}
					.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;
        height: 600px;
        overflow-y: auto;
				.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;
                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;
							}
						}
					}
				}
			}
		}
	}
}
</style>
