<template>
  <div class="garph-content">
    <div style="width: 75%;height: 100%;">
      <!-- 顶部标题与操作栏 -->
      <div class="sanction-header">
        <div class="section-header">
          <div class="section-icon"></div>
          <h3 class="section-title">供应链关系</h3>
        </div>



        <!-- 右侧操作图标 -->
        <div class="action-icons">
          <label class="checkbox-item" style="display: flex;align-items: center;">
            <input type="checkbox" v-model="rule" />
            <div style="width: 145px;"> 50%穿透规则影响</div>
          </label>
          <!-- 搜索框容器 -->
          <el-input v-model="searchKeyword" style="height: 28px;width: 200px;" placeholder="搜索内容">
            <template #suffix>
              <el-icon class="el-input__icon">
                <search />
              </el-icon>
            </template>
          </el-input> <img src="../../../assets/icons/download.png" alt="下载" class="action-icon" />
          <img src="../../../assets/icons/shoucang.png" alt="收藏" class="action-icon" />
        </div>
      </div>

      <!-- 主体内容：左侧图表 + 右侧筛选 -->
      <div class="main-container">
        <!-- 图表区域 -->
        <div class="garph-box" id="graphChart"></div>


      </div>

      <!-- 底部说明文字 -->
      <div class="chart-text">
        <img src="@/assets/icons/model.png" style="width: 19px;height: 20px;">
        <div>
          华为构建了覆盖全球的复杂供应链网络，以自身为核心，辐射芯片、显示、摄像头等关键领域。其供应链深度扎根中国，同时整合美国高通、韩国三星、日本索尼等国际顶尖供应商，形成多元化供应格局。面对外部技术封锁，华为通过扶持海思等子公司强化垂直整合，并积极拓展本土替代资源，在保持技术领先的同时增强供应链韧性，展现出卓越的全球资源调配与风险管控能力。
        </div>
        <div class="arrow-2">
          →
        </div>
      </div>

    </div>
    <div style="width: calc(25% - 20px);height: 100%;padding: 24px;">
      <!-- 右侧筛选面板 -->
      <div class="filter-panel">
        <!-- 领域筛选 -->
        <div class="filter-section">
          <h4 class="filter-title">领域</h4>
          <div class="checkbox-group">
            <label v-for="(item, index) in domainFilters" :key="'domain-' + index" class="checkbox-item">
              <input type="checkbox" v-model="item.checked" />
              <span>{{ item.label }}</span>
            </label>
          </div>
        </div>

        <!-- 国家/地区筛选（两栏） -->
        <div class="filter-section country-filter">
          <h4 class="filter-title">国家/地区</h4>
          <div class="checkbox-group two-columns">
            <label v-for="(item, index) in countryFilters" :key="'country-' + index" class="checkbox-item">
              <input type="checkbox" v-model="item.checked" />
              <span>{{ item.label }}</span>
            </label>
          </div>
        </div>

        <!-- 上下游筛选 -->
        <div class="filter-section">
          <h4 class="filter-title">上下游</h4>
          <div class="checkbox-group">
            <label v-for="(item, index) in upstreamFilters" :key="'upstream-' + index" class="checkbox-item">
              <input type="checkbox" v-model="item.checked" />
              <span>{{ item.label }}</span>
            </label>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import getGraphChart from '../js/graphChart.js'

const rule = ref('true')//
const searchKeyword = ref('')
const domainFilters = ref([
  { label: '工业软件领域 (36)', checked: true },
  { label: '供应链与物流服务领域 (36)', checked: false },
  { label: '人工智能领域 (56)', checked: false },
  { label: '半导体与集成电路领域 (19)', checked: false },
  { label: '航天遥感与量子技术领域 (51)', checked: false }
])

const countryFilters = ref([
  { label: '中国 (36)', checked: false },
  { label: '美国 (36)', checked: false },
  { label: '韩国 (56)', checked: false },
  { label: '日本 (19)', checked: false },
  { label: '中国台湾 (51)', checked: false },
  { label: '德国 (51)', checked: false },
  { label: '荷兰 (12)', checked: false },
  { label: '澳大利亚 (4)', checked: false }
])

const upstreamFilters = ref([
  { label: '核心企业 (36)', checked: false },
  { label: '控股子公司 (36)', checked: false },
  { label: '一级供应商 (56)', checked: false },
  { label: '二级供应商 (19)', checked: false },
  { label: '三级供应商 (51)', checked: false }
])

// === 左上角开关状态 ===
const penetrationRule = ref(false)
const affectNearby = ref(false)

// === 图表初始化（保留你的逻辑）===
const CompanyImg = "/icon/companyGraph.png"

const nodes = ref([
  {
    id: 0,
    name: "华为",
    symbolSize: 50,
    value: 10,
    symbol: `image://${CompanyImg}`,
  },
  {
    id: 1,
    name: "中芯国际",
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
  },
  {
    id: 2,
    name: "国轩高科",
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
  },
  {
    id: 3,
    name: "晶科能源",
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
  },
  {
    id: 4,
    name: "容百科技",
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
  },
  {
    id: 5,
    name: "德赛电池",
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
  },
  {
    id: 6,
    name: "英特尔",
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
  },
  {
    id: 7,
    name: "谷歌",
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
  },
  {
    id: 8,
    name: "华为数字能源",
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
  },
  {
    id: 9,
    name: "LG伊诺特",
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
  },
  {
    id: 10,
    name: "富士康",
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
  },
  {
    id: 11,
    name: "华为智能汽车",
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
  },
  {
    id: 12,
    name: "立讯精密",
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
  },
  {
    id: 13,
    name: "欧菲光",
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
  },
  {
    id: 14,
    name: "台积电",
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
  },
  {
    id: 15,
    name: "三星显示",
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
  },
  {
    id: 16,
    name: "德方纳米",
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
  },
]);

const links = ref([
  { source: 1, target: 0 },
  { source: 2, target: 0 },
  { source: 3, target: 0 },
  { source: 4, target: 0 },
  { source: 5, target: 0 },
  { source: 6, target: 0 },
  { source: 7, target: 0 },
  { source: 8, target: 0 },
  { source: 9, target: 0 },
  { source: 10, target: 0 },
  { source: 11, target: 0 },
  { source: 12, target: 0 },
  { source: 13, target: 0 },
  { source: 14, target: 0 },
  { source: 15, target: 0 },
  { source: 16, target: 0 },
]);

const setChart = (option, chartId) => {
  let chartDom = document.getElementById(chartId)
  if (!chartDom) return
  chartDom.removeAttribute("_echarts_instance_")
  let chart = echarts.init(chartDom)
  chart.setOption(option)
  return chart
}

onMounted(() => {
  // 假设你有 getGraphChart 函数
  const graphOption = getGraphChart(nodes.value, links.value)
  setChart(graphOption, "graphChart")

  // 临时占位：防止报错
  // const placeholderOption = {
  //   backgroundColor: 'transparent',
  //   tooltip: {},
  //   series: []
  // }
  // setChart(placeholderOption, "graphChart")
})
</script>

<style scoped>
.garph-content {
  width: calc(100% - 320px);
  height: calc(100vh - 220px);
  overflow: hidden;
  border-radius: 4px;
  margin: 16px 160px;
  box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
  background: #fff;
  display: flex;
}

.sanction-header {
  display: flex;
  align-items: baseline;
  height: 45px;
}

.section-header {
  display: flex;
  align-items: center;
}

.section-icon {
  width: 7px;
  height: 18px;
  border-radius: 0 4px 4px 0;
  background: #055fc2;
  margin-right: 17px;
}

.section-title {
  font-size: 18px;
  color: #055fc2;
  font-family: Microsoft YaHei;
  font-weight: 700;
  letter-spacing: 1px;
}

/* 左上方功能按钮 */
.left-buttons {
  display: flex;
  gap: 12px;
  margin-left: 24px;
}

.toggle-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 13px;
  color: #666;
  background: #f5f7fa;
  border: 1px solid #d9e1ec;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-button.active {
  background: #e6f0ff;
  border-color: #055fc2;
  color: #055fc2;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
}

.dot.active {
  background: #055fc2;
}

/* 右侧操作图标 */
.action-icons {
  display: flex;
  gap: 15px;
  margin-left: auto;
}

.action-icon {
  width: 28px;
  height: 28px;
  cursor: pointer;
}

/* 主体容器 */
.main-container {
  display: flex;
  height: calc(100% - 60px - 80px);
  padding: 20px 24px 0;
}

.garph-box {
  flex: 1;
  height: 100%;
  background-image: url("../../../assets//images/bg/companyGraph-bg.png");
  background-size: 40px 40px;
}

.filter-panel {
  width: 100%;
  background: rgba(246, 249, 250, 1);
  padding: 24px;
  font-size: 14px;
  color: rgba(95, 101, 108, 1);
  font-family: Microsoft YaHei;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: left;
}

.filter-section {
  margin-bottom: 24px;
}

.filter-title {
  font-size: 14px;
  color: #1d2129;
  font-weight: 600;
  margin: 0;
  font-family: Microsoft YaHei;
}




.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.country-filter .checkbox-group.two-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 1px solid #cbd5e0;
  border-radius: 3px;
  appearance: none;
  background: white;
}

.checkbox-item input[type="checkbox"]:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.checkbox-item input[type="checkbox"]:checked::after {
  content: '✓';
  color: white;
  font-size: 12px;
  font-weight: bold;
  display: block;
  text-align: center;
  line-height: 14px;
}


.chart-text {
  /* 大模型对话结果 */
  height: 80px;
  margin: 12px 20px;
  /* 自动布局 */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10;
  padding: 0px 12px 0px 12px;
  box-sizing: border-box;
  border: 1px solid rgba(231, 243, 255, 1);
  border-radius: 4px;
  background: rgba(246, 251, 255, 1);
  color: rgba(5, 95, 194, 1);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: justify;
  gap: 13px;
}

.arrow-2 {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 24px;
  background: rgba(231, 243, 255, 1);
}
</style>