<template>
  <div class="sanctions-overview">
    <div class="main">
      <div class="left">
        <div class="left-top">
          <div class="title-com">
            <div class="box"></div>
            <div class="text">基本信息</div>
            <div class="btn">
              <img src="../../assets/下载按钮.png" alt="" />
              <img src="../../assets/收藏按钮.png" alt="" />
            </div>
          </div>
          <div class="left-top-title">
            <div class="info-row">
              <div class="label">发布机构：</div>
              <div class="value link">
                <img :src="title" alt="" class="icon">
                <span @click="handleClickDp">{{ formattedData.postOrgName }} ></span>
              </div>
            </div>
            <div class="info-row">
              <div class="label">发布时间：</div>
              <div class="value">{{ formattedData.postDate }}</div>
            </div>
            <div class="info-row">
              <div class="label">生效时间：</div>
              <div class="value">{{ formattedData.effectiveDate }}</div>
            </div>
            <div class="info-row">
              <div class="label">发布文件：</div>
              <div class="value">{{ formattedData.fileCode }}</div>
            </div>
            <div class="info-row">
              <div class="label">案卷号：</div>
              <div class="value">{{ formattedData.administrativeOrderId }}</div>
            </div>
            <div class="info-row">
              <div class="label">发布人：</div>
              <div class="value link">
                <img :src="defaultTitle" alt="" class="icon avatar">
                <span @click="handleClick">{{ formattedData.postPersonName }} ></span>
              </div>
            </div>
            <div class="info-row">
              <div class="label">制裁领域：</div>
              <div class="value tags">
                <span class="tag" v-for="(domain, index) in formattedData.domains" :key="index">{{ domain }}</span>
              </div>
            </div>
          </div>
          <div class="left-top-content">
            <div class="content-title">制裁实体分布：</div>
            <div class="distribution-list">
              <div class="list-item" v-for="(item, index) in entityDistribution" :key="index">
                <img :src="flag" alt="" class="flag">
                <div class="country-name">{{ item.name }}</div>
                <div class="progress-bar-container">
                  <div class="progress-bar" :style="{
                    width: item.width,
                    background: item.gradient
                  }"></div>
                </div>
                <div class="count" :class="{ 'highlight': index === 0 }">{{ item.count }}家</div>
              </div>
            </div>
          </div>
        </div>
        <div class="left-bottom">
          <div class="title-com">
            <div class="box"></div>
            <div class="text">制裁背景</div>
            <div class="btn">
              <img src="../../assets/下载按钮.png" alt="" />
              <img src="../../assets/收藏按钮.png" alt="" />
            </div>
          </div>
          <div class="left-bottom-content">
            <div class="timeline-list">
              <div class="timeline-item" v-for="(item, index) in timelineData" :key="index">
                <div class="date-row">
                  <div class="dot"></div>
                  <div class="date">{{ item.date }}</div>
                </div>
                <div class="content">{{ item.content }}</div>
              </div>
            </div>
            <div class="view-more" v-if="hasMore" @click="loadMore">
              查看更多 <el-icon class="icon-more">
                <DArrowRight />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title-com">
          <div class="box"></div>
          <div class="text">制裁清单</div>
          <div class="btn">
            <img src="../../assets/下载按钮.png" alt="" />
            <img src="../../assets/收藏按钮.png" alt="" />
          </div>
        </div>
        <div class="right-title">
          <div class="filter-row">
            <!-- <div class="filter-left">
              <el-select v-model="filterEntity" placeholder="受制裁实体" style="width: 184px">
                <el-option label="受制裁实体" value="1" />
              </el-select>
            </div> -->
            <div class="filter-right">
              <el-checkbox v-model="onlyChina" label="只看中国实体" />
              <el-select v-model="filterField" placeholder="全部领域" style="width: 150px; margin: 0 12px 0 16px">
                <el-option label="全部领域" value="" />
                <el-option v-for="item in domainOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-input v-model="searchKeyword" placeholder="搜索实体" style="width: 150px" :suffix-icon="Search" />
            </div>
          </div>
          <div class="stats-row">
            <!-- <div class="tabs">
              <div class="tab-btn" :class="{ active: activeTab === 'add' }" @click="activeTab = 'add'">新增实体</div>
              <div class="tab-btn" :class="{ active: activeTab === 'remove' }" @click="activeTab = 'remove'">移除实体</div>
            </div> -->
            <div class="stats-info">
              <div class="stat-item">
                <span class="dot red"></span>
                <span class="text">新增 <span class="num red">{{ addCount }}</span> 家 (50%规则涉及<span class="num red">{{
                  addRuleCount }}</span>家)</span>
              </div>
              <!-- <div class="stat-item">
              <span class="dot green"></span>
              <span class="text">移除 <span class="num green">{{ removeCount }}</span> 家 (50%规则涉及<span class="num green">{{ removeRuleCount }}</span>家)</span>
            </div> -->
            </div>
          </div>
        </div>
        <div class="right-content">
          <div class="sanction-group-list">
            <div class="sanction-group" v-for="(group, index) in sanctionList" :key="index">
              <el-table :data="group.entities" style="width: 100%">
                <el-table-column label="实体名称" min-width="280">
                  <template #default="scope">
                    <div class="name-cell">
                      <div class="dot"></div>
                      <img :src="defaultTitle" class="company-icon" />
                      <span class="company-name" @click="handleCompClick(scope.row)">{{ scope.row.name }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="涉及领域" width="180" align="center">
                  <template #default="scope">
                    <span v-for="(item, index) in scope.row.fields" :key="index" class="tag" :style="getTagStyle(item)"
                      style="margin: 0 2px;">{{ item }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="location" label="上市地点" width="90" align="center" />
                <el-table-column prop="date" label="制裁时间" width="150" align="center" />
                <el-table-column prop="revenue" label="营收(亿元)" width="110" align="center" />
                <el-table-column label="50%规则子企业" width="180" align="center">
                  <template #default="scope">
                    <span v-if="scope.row.subsidiaryCount" class="subsidiary-link"
                      @click="handleSubsidiaryClick(scope.row)">
                      {{ scope.row.subsidiaryText }} <span class="blue-text">{{ scope.row.subsidiaryCount }}家 ></span>
                    </span>
                    <span v-else>--</span>
                  </template>
                </el-table-column>
              </el-table>
              <div class="reason-box">
                {{ group.reason }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 50%规则子企业弹框 -->
    <RuleSubsidiaryDialog v-model="subsidiaryDialogVisible" :company-name="currentSubsidiaryCompanyName"
      :total-count="currentSubsidiaryCount" :data-list="currentSubsidiaryList" />
  </div>
</template>

<script setup>
import { ref, defineProps, computed, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { DArrowRight, Search } from "@element-plus/icons-vue";
import { debounce } from "lodash";
import title from "../../assets/title.png"
import defaultTitle from "../../assets/default-icon1.png"
import flag from "../../assets/default-icon2.png"
import { getSingleSanctionEntityCountry, getSingleSanctionBackground, getSingleSanctionOverviewList } from "@/api/exportControlV2.0";
import RuleSubsidiaryDialog from "../../../v2.0EntityList/components/sanctionsOverview/components/listPage/RuleSubsidiaryDialog.vue";

// 跳转公司详情页
const handleCompClick = item => {
  // console.log("item", item);
  // const route = router.resolve({
  //   path: "/companyPages",
  //   query: {
  //     id: item.entityId
  //   }
  // });
  // window.open(route.href, "_blank");
  const curRoute = router.resolve({ name: "companyPages", params: { id: item.entityId } });
  window.open(curRoute.href, "_blank");
};

// 跳转发布机构详情页
const handleClickDp = () => {
  // console.log("点击了发布机构:", props.data);
  const route = router.resolve({
    path: "/institution",
    query: {
      id: props.data.postOrgId
    }
  });
  window.open(route.href, "_blank");
};

// 50%规则子企业弹框逻辑
const subsidiaryDialogVisible = ref(false);
const currentSubsidiaryCompanyName = ref("");
const currentSubsidiaryCount = ref(0);
const currentSubsidiaryList = ref([]);

const handleSubsidiaryClick = (row) => {
  currentSubsidiaryCompanyName.value = row.name;
  currentSubsidiaryCount.value = row.subsidiaryCount;
  currentSubsidiaryList.value = row.ruleOrgList || [];
  subsidiaryDialogVisible.value = true;
};

// 单次制裁-制裁概况-制裁清单
const sanctionList = ref([])
const addCount = ref(0)
const addRuleCount = ref(0)
const removeCount = ref(0)
const removeRuleCount = ref(0)

// 调用单次制裁-制裁概况-制裁清单接口
const getSanctionOverviewList = async () => {
  try {
    const res = await getSingleSanctionOverviewList({
      sanRecordId: sanRecordId.value,
      isOnlyCn: onlyChina.value,
      domainId: filterField.value || undefined,
      searchText: searchKeyword.value || undefined,
    })
    if (res.code === 200) {
      const data = res.data || {}
      addCount.value = data.addCount || 0
      addRuleCount.value = data.addRuleCount || 0
      removeCount.value = data.removeCount || 0
      removeRuleCount.value = data.removeRuleCount || 0

      const list = data.sanList || []
      sanctionList.value = list.map(item => ({
        reason: item.sanReason,
        entities: (item.orgList || []).map(org => ({
          ...org,
          name: org.entityNameZh || org.entityName,
          fields: org.techDomains || [],
          location: "--", // 接口暂无数据
          date: org.startTime ? org.startTime.replace(/^(\d{4})-(\d{2})-(\d{2}).*$/, '$1年$2月$3日') : '--', // 格式化日期
          revenue: "--", // 接口暂无数据
          subsidiaryCount: org.ruleOrgCount || 0,
          subsidiaryText: org.ruleOrgList && org.ruleOrgList.length > 0
            ? (org.ruleOrgList[0].orgName.length > 10 ? org.ruleOrgList[0].orgName.slice(0, 10) + '...' : org.ruleOrgList[0].orgName) + '...等'
            : ''
        }))
      }))
    }
  } catch (error) {
    console.log(error)
  }
}


// 单次制裁-制裁概况-制裁背景
const timelinePage = ref(1);
const timelinePageSize = ref(3);
const hasMore = ref(true);

const getSanctionBackground = async (isLoadMore = false) => {
  try {
    const res = await getSingleSanctionBackground({
      sanRecordId: sanRecordId.value,
      pageNum: timelinePage.value,
      pageSize: timelinePageSize.value,
    })
    if (res.code === 200) {
      const list = res.data.content || [];
      const formattedList = list.map(item => ({
        ...item,
        date: item.createTime ? item.createTime.split(' ')[0] : '', // 提取日期部分
        content: item.summaryZh
      }));

      if (isLoadMore) {
        timelineData.value = [...timelineData.value, ...formattedList];
      } else {
        timelineData.value = formattedList;
      }

      // 判断是否还有更多数据
      const totalElements = res.data.totalElements || 0;
      hasMore.value = timelineData.value.length < totalElements;
    }
  } catch (error) {
    console.log(error)
  }
}

const loadMore = () => {
  timelinePage.value++;
  getSanctionBackground(true);
};

const router = useRouter();
const sanRecordId = ref("")
const getUrlParams = () => {
  const urlParams = new URLSearchParams(window.location.search);
  sanRecordId.value = urlParams.get("id") || ""
}

// 单次制裁-制裁概况-制裁实体国家分布
const getEntityCountry = async () => {
  try {
    const res = await getSingleSanctionEntityCountry({
      sanRecordId: sanRecordId.value
    })
    if (res.code === 200) {
      const rawData = res.data || [];
      const maxCount = Math.max(...rawData.map(item => item.count || 0), 1);

      // 颜色池 - 用于循环分配
      const gradientPool = [
        "linear-gradient(270deg, rgba(255,170,0,1) 0%, rgba(255,255,255,0) 100%)",   // 橙
        "linear-gradient(270deg, rgba(5,95,194,1) 0%, rgba(255,255,255,0) 100%)",    // 蓝
        "linear-gradient(270deg, rgba(114,46,209,1) 0%, rgba(255,255,255,0) 100%)",  // 紫
        "linear-gradient(270deg, rgba(16,178,166,1) 0%, rgba(255,255,255,0) 100%)"   // 青
      ];

      // 固定颜色映射 - 特定国家使用固定颜色
      const fixedColorMap = {
        "中国": "linear-gradient(270deg, rgba(206,79,81,1) 0%, rgba(255,255,255,0) 100%)" // 红
      };

      entityDistribution.value = rawData.map((item, index) => ({
        ...item,
        width: `${((item.count || 0) / maxCount) * 100}%`,
        // 优先使用固定颜色，否则循环使用颜色池中的颜色
        gradient: fixedColorMap[item.name] || gradientPool[index % gradientPool.length]
      }));
    }
  } catch (error) {
    console.log(error)
  }
}

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
});
// 跳转到人物页
const handleClick = () => {
  const route = router.resolve({
    path: "/characterPage",
    query: {
      // type: props.data.type,
      personId: props.data.postPersonId
    }
  });
  window.open(route.href, "_blank");
};

// 计算属性处理数据
const formattedData = computed(() => {
  const info = props.data || {};

  // 日期格式化
  const formatDate = (dateStr) => {
    if (!dateStr) return '';
    const date = new Date(dateStr);
    if (isNaN(date.getTime())) return dateStr;
    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
  };

  return {
    postOrgName: info.postOrgName,
    postDate: formatDate(info.postDate),
    effectiveDate: formatDate(info.effectiveDate),
    fileCode: info.fileCode ? `${info.fileCode} ` : '',
    administrativeOrderId: info.administrativeOrderId ? `No. ${info.administrativeOrderId}` : '',
    postPersonName: info.postPersonName,
    domains: info.domainNames
  };
});

const filterEntity = ref('')
const onlyChina = ref(false)
const filterField = ref('')
const searchKeyword = ref('')
const activeTab = ref('add')

// 监听筛选条件变化
watch([onlyChina, filterField], () => {
  getSanctionOverviewList()
})

// 搜索框防抖
const debouncedSearch = debounce(() => {
  getSanctionOverviewList()
}, 500)

watch(searchKeyword, () => {
  debouncedSearch()
})

const domainOptions = ref([
  { label: "人工智能", value: "1" },
  { label: "生物科技", value: "2" },
  { label: "新一代信息技术", value: "3" },
  { label: "量子科技", value: "4" },
  { label: "新能源", value: "5" },
  { label: "集成电路", value: "6" },
  { label: "海洋", value: "7" },
  { label: "先进制造", value: "8" },
  { label: "新材料", value: "9" },
  { label: "航空航天", value: "10" },
  { label: "深海", value: "11" },
  { label: "极地", value: "12" },
  { label: "太空", value: "13" },
  { label: "核", value: "14" }
]);

const tagColors = [
  { bg: 'rgb(242, 235, 255)', border: 'rgb(211, 190, 255)', text: 'rgb(114, 46, 209)' }, // Purple
  { bg: 'rgb(225, 250, 248)', border: 'rgb(178, 242, 238)', text: 'rgb(16, 178, 166)' }, // Cyan
  { bg: 'rgb(231, 243, 255)', border: 'rgb(186, 224, 255)', text: 'rgb(5, 95, 194)' },   // Blue
  { bg: 'rgb(255, 247, 230)', border: 'rgb(255, 213, 145)', text: 'rgb(250, 140, 22)' }, // Orange
  { bg: 'rgb(255, 241, 240)', border: 'rgb(255, 204, 199)', text: 'rgb(245, 34, 45)' },  // Red
  { bg: 'rgb(246, 255, 237)', border: 'rgb(183, 235, 143)', text: 'rgb(82, 196, 26)' },  // Green
];

const getTagStyle = (tagName) => {
  if (!tagName) return {};
  let hash = 0;
  for (let i = 0; i < tagName.length; i++) {
    hash = tagName.charCodeAt(i) + ((hash << 5) - hash);
  }
  const index = Math.abs(hash) % tagColors.length;
  const color = tagColors[index];
  return {
    backgroundColor: color.bg,
    borderColor: color.border,
    color: color.text
  };
}

const timelineData = ref([]);

const entityDistribution = ref([
  {
    name: "中国",
    count: 24,
    width: "100%",
    gradient: "linear-gradient(270deg, rgba(206,79,81,1) 0%, rgba(255,255,255,0) 100%)"
  },
  {
    name: "沙特阿拉伯",
    count: 2,
    width: "60%",
    gradient: "linear-gradient(270deg, rgba(255,170,0,1) 0%, rgba(255,255,255,0) 100%)"
  },
  {
    name: "俄罗斯",
    count: 2,
    width: "60%",
    gradient: "linear-gradient(270deg, rgba(255,170,0,1) 0%, rgba(255,255,255,0) 100%)"
  },
  {
    name: "中国香港",
    count: 1,
    width: "50%",
    gradient: "linear-gradient(270deg, rgba(5,95,194,1) 0%, rgba(255,255,255,0) 100%)"
  }
])

onMounted(() => {
  // 获取URL参数
  getUrlParams()
  // 单次制裁-制裁概况-制裁实体国家分布
  getEntityCountry()
  // 单次制裁-制裁概况-制裁背景
  getSanctionBackground()
  // 单次制裁-制裁概况-制裁清单
  getSanctionOverviewList()
})
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

.sanctions-overview {
  width: 1601px;
  margin: 0 auto;
  padding-top: 16px;
  padding-bottom: 50px;
	.main {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		.left {
			width: 520px;
			height: 1119px;
			.left-top {
				width: 100%;
				height: auto;
				padding-bottom: 20px;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				background-color: #fff;
				margin-bottom: 16px;
        .left-top-title {
          padding: 22px 20px 22px 27px;
          width: 100%;
          height: auto;
          border-bottom: 1px solid rgb(234, 236, 238);
          display: flex;
          flex-direction: column;
          // justify-content: space-between;
          gap: 12px;

          .info-row {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-family: "Microsoft YaHei";
            line-height: 24px;

            .label {
              min-width: 92px;
              color: rgb(59, 65, 75);
              font-weight: 700;
              font-size: 16px;
              font-family: "Microsoft YaHei";
              line-height: 24px;
              text-align: left;
            }

            .value {
              display: flex;
              align-items: center;
              color: rgb(59, 65, 75);
              font-weight: 400;
              font-size: 16px;
              font-family: "Microsoft YaHei";
              line-height: 24px;
              overflow: hidden; 

              &.link {
                color: rgb(5, 95, 194);
                cursor: pointer;
              }

              .icon {
                width: 20px;
                height: 20px;
                margin-right: 8px;
                object-fit: contain;

                &.avatar {
                  border-radius: 50%;
                  width: 24px;
                  height: 24px;
                }
              }

              &.tags {
                gap: 8px;
                flex-wrap: wrap;
                overflow: visible;

                .tag {
                  padding: 1px 8px;
                  background: rgba(246, 250, 255, 1);
                  border-radius: 4px;
                  border: 1px solid rgba(231, 243, 255, 1);
                  color: rgb(5, 95, 194);
                  font-size: 14px;
                  line-height: 20px;
                }
              }
            }
          }
        }

        .left-top-content {
          width: 100%;
          height: 234px;
          padding: 19px 29px 22px 27px;
          overflow: auto;

          .content-title {
            font-size: 16px;
            font-weight: 700;
            color: rgb(59, 65, 75);
            font-family: "Microsoft YaHei";
            line-height: 24px;
            margin-bottom: 12px;
            text-align: left;
          }

          .distribution-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
            overflow: auto;

            .list-item {
              display: flex;
              align-items: center;
              height: 24px;

              .flag {
                width: 24px;
                height: 24px;
                margin-right: 16px;
                border-radius: 50%;
                object-fit: cover;
              }

              .country-name {
                width: 96px;
                font-size: 16px;
                font-weight: 400;
                color: rgb(59, 65, 75);
                font-family: "Microsoft YaHei";
                line-height: 24px;
                margin-right: 12px;
                text-align: left;
              }

              .progress-bar-container {
                flex: 1;
                height: 8px;
                // background: #f0f2f5;
                // border-radius: 4px;
                // overflow: hidden;
                margin-right: 24px;
                display: flex;
                align-items: center;

                .progress-bar {
                  height: 100%;
                  border-radius: 4px;
                }
              }

              .count {
                // width: 40px;
                text-align: right;
                font-size: 16px;
                font-weight: 400;
                color: rgb(59, 65, 75);
                font-family: "Microsoft YaHei";
                line-height: 24px;

                &.highlight {
                  color: rgb(206, 79, 81);
                  font-weight: 700;
                }
              }
            }
          }
        }
      }

      .left-bottom {
        width: 100%;
        height: 521px;
        padding-bottom: 20px;
        border-radius: 10px;
        box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
        background-color: #fff;

        .left-bottom-content {
          padding: 26px 30px 0 25px;
          height: calc(100% - 56px); // 减去标题高度
          display: flex;
          flex-direction: column;

          .timeline-list {
            display: flex;
            flex-direction: column;
            gap: 24px;
            margin-bottom: 24px;
            overflow-y: auto; // 允许垂直滚动
            flex: 1; // 占据剩余空间
            padding-right: 10px; // 防止滚动条遮挡内容

            /* Custom Scrollbar */
            &::-webkit-scrollbar {
              width: 6px;
            }

            &::-webkit-scrollbar-thumb {
              background: #ccc;
              border-radius: 3px;
            }

            &::-webkit-scrollbar-track {
              background: transparent;
            }
          }

          .timeline-item {
            display: flex;
            flex-direction: column;
            // margin-left: 12px;
            position: relative;

            &::before {
              content: "";
              position: absolute;
              left: 6px;
              top: 12px;
              height: calc(100% + 24px);
              width: 1px;
              background-color: rgb(234, 236, 238);
              transform: translateX(-50%);
            }

            &:last-child::before {
              display: none;
            }
          }

          .date-row {
            display: flex;
            align-items: center;
            margin-bottom: 3px;
          }

          .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #fff;
            border: 3px solid rgb(5, 95, 194);
            box-sizing: border-box;
            margin-right: 13px;
            position: relative;
            z-index: 1;
          }

          .date {
            font-size: 16px;
            font-weight: 700;
            color: rgb(5, 95, 194);
            font-family: "Microsoft YaHei";
            line-height: 24px;
            // margin-bottom: 3px;
          }

          .content {
            font-size: 16px;
            font-weight: 400;
            color: rgb(59, 65, 75);
            line-height: 24px;
            margin-left: 25px;
            text-align: left;
            font-family: "Microsoft YaHei";
          }

          .view-more {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 400;
            color: rgb(5, 95, 194);
            cursor: pointer;
            margin-top: 24px;
            font-family: "Microsoft YaHei";

            .icon-more {
              transform: rotate(90deg);
              margin-left: 8px;
            }
          }
        }
      }
    }

    .right {
      width: 1064px;
      height: auto;
      border-radius: 10px;
      box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
      background-color: #fff;

      .right-title {
        width: 100%;
        // height: 107px;
        padding: 4px 20px 20px 20px;
        box-sizing: border-box;

        .filter-row {
          display: flex;
          // 隐藏使用right，解除使用space-between
          justify-content: right;
          align-items: center;
          margin-bottom: 20px;

          :deep(.el-input__inner) {
            font-size: 16px;
            font-weight: 400;
            font-family: "Microsoft YaHei";
            line-height: 24px;
            color: rgb(95, 101, 108);

            &::placeholder {
              color: rgb(95, 101, 108);
            }
          }

          :deep(.el-checkbox__label) {
            font-size: 16px;
            font-weight: 400;
            font-family: "Microsoft YaHei";
            line-height: 24px;
            color: rgb(95, 101, 108);
          }

          .filter-right {
            display: flex;
            align-items: center;
          }
        }

        .stats-row {
          display: flex;
          // 隐藏使用right，解除使用space-between
          justify-content: right;
          align-items: center;

          .tabs {
            display: flex;
            gap: 8px;

            .tab-btn {
              padding: 4px 8px;
              border: 1px solid rgb(230, 231, 232);
              border-radius: 4px;
              cursor: pointer;
              font-size: 18px;
              color: rgb(59, 65, 75);
              font-weight: 400;
              line-height: 24px;
              font-family: "Microsoft YaHei";

              &.active {
                color: rgb(5, 95, 194);
                border-color: rgb(5, 95, 194);
                font-weight: 700;
              }
            }
          }

          .stats-info {
            display: flex;
            gap: 24px;
            align-items: center;

            .stat-item {
              display: flex;
              align-items: center;
              font-size: 18px;
              color: rgb(59, 65, 75);
              font-family: "Microsoft YaHei";
              line-height: 24px;
              margin-right: 34px;

              .dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 8px;

                &.red {
                  background-color: rgb(206, 79, 81);
                }

                &.green {
                  background-color: rgb(33, 129, 57);
                }
              }

              .text {
                font-size: 18px;
                font-weight: 700;
                line-height: 24px;
                font-family: "Microsoft YaHei";
                color: rgb(59, 65, 75);

                .num {
                  font-weight: 700;

                  &.red {
                    color: rgb(206, 79, 81);
                  }

                  &.green {
                    color: rgb(33, 129, 57);
                  }
                }
              }
            }
          }
        }
      }

      .right-content {
        padding: 0 20px 17px 20px;

        .sanction-group-list {
          display: flex;
          flex-direction: column;
          gap: 16px;

          .sanction-group {
            border: 1px solid rgb(234, 236, 238);
            border-radius: 8px;
            overflow: hidden;

            :deep(.el-table__header-wrapper) {
              th {
                background-color: rgb(59, 65, 75) !important;
                height: 48px;
                padding: 0;
                color: #fff;
                font-weight: 700;
                font-size: 16px;
                font-family: "Microsoft YaHei";
                border-bottom: none;
              }

              th:first-child {
                border-top-left-radius: 8px;
              }

              th:last-child {
                border-top-right-radius: 8px;
              }
            }

            :deep(.el-table__body-wrapper) {
              tr:nth-child(odd) td {
                background-color: rgba(248, 249, 250, 1);
              }

              tr:nth-child(even) td {
                background-color: #fff;
              }

              td {
                height: 48px;
                padding: 0;
                font-size: 16px;
                font-weight: 400;
                font-family: "Microsoft YaHei";
                color: rgb(95, 101, 108);
                line-height: 24px;
              }
            }

            .name-cell {
              display: flex;
              align-items: center;

              .dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: rgb(206, 79, 81);
                margin-right: 16px;
                flex-shrink: 0;
              }

              .company-icon {
                width: 24px;
                height: 24px;
                margin-right: 12px;
                border-radius: 50%;
                flex-shrink: 0;
              }

              .company-name {
                font-size: 16px;
                font-weight: 700;
                line-height: 24px;
                font-family: "Microsoft YaHei";
                color: rgba(59, 65, 75, 1);
              }
            }

            .tag {
              padding: 1px 8px;
              border-radius: 4px;
              font-size: 14px;
              display: inline-block;
              border: 1px solid transparent;
            }

            .subsidiary-link {
              cursor: pointer;
              font-size: 14px;
              color: rgb(59, 65, 75);

              .blue-text {
                color: rgb(5, 95, 194);
              }
            }

            .reason-box {
              padding: 12px 19px 14px 39px;
              background-color: #fff;
              border-top: 1px solid rgb(234, 236, 238);
              font-size: 16px;
              color: rgb(59, 65, 75);
              line-height: 28px;
              font-family: "Microsoft YaHei";
              text-align: left;
            }
          }
        }
      }
    }
  }
}

.title-com {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 14px 12px 16px 0;

  .box {
    width: 8px;
    height: 20px;
    background-color: rgb(5, 95, 194);
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    margin-right: 14px;
  }

  .text {
    font-size: 20px;
    font-weight: 700;
    font-family: "Microsoft YaHei";
    line-height: 26px;
    color: rgb(5, 95, 194);
  }

  .btn {
    width: 60px;
    height: 28px;
    margin-left: auto;

    img {
      width: 28px;
      height: 28px;
      cursor: pointer;
    }

    img:first-child {
      margin-right: 4px;
    }
  }
}
</style>