<template>
  <div class="wrap">
    <div class="top">
      <div class="item">
        <div class="item-left-box">
          <div class="item-left1">{{ "总调查案件数" }}</div>
          <div class="item-left2">{{ "1980-2025" }}</div>
        </div>
        <div class="item-right">{{ "452项" }}</div>
      </div>
      <div class="item">
        <div class="item-left">{{ "仍在调查中的案件" }}</div>
        <div class="item-right">{{ "28项" }}</div>
      </div>
      <div class="item">
        <div class="item-left">{{ "涉及中企数量" }}</div>
        <div class="item-right">{{ "326家" }}</div>
      </div>
      <div class="item">
        <div class="item-left">{{ "胜诉/和解率" }}</div>
        <div class="item-right">{{ "38%" }}</div>
      </div>
    </div>
    <div class="center">
      <div class="box1">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">美国对华337调查年度趋势</div>

          <div class="header-right">
            <img src="../assets/images/header-icon.png" alt="" />
          </div>
        </div>
        <div class="box1-main" id="chart1"></div>
      </div>
      <div class="box2">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">调查案件领域分布</div>

          <div class="header-right">
            <img src="../assets/images/header-icon.png" alt="" />
          </div>
        </div>
        <div class="box2-main" id="chart2"></div>
      </div>
    </div>
    <div class="footer">
      <div class="box3">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">中国公司受调查情况</div>
          <div class="header-btn-box">
            <div
              class="btn"
              :class="{ btnActive: btnActiveName === '调查次数' }"
              @click="handleClickBox3Btn('调查次数')"
            >
              调查次数
            </div>
            <div
              class="btn"
              :class="{ btnActive: btnActiveName === '注册地分布' }"
              @click="handleClickBox3Btn('注册地分布')"
            >
              注册地分布
            </div>
          </div>
          <div class="header-right">
            <img src="../assets/images/header-icon.png" alt="" />
          </div>
        </div>
        <div
          v-show="btnActiveName === '调查次数'"
          class="box3-main"
          id="chart3"
        ></div>
        <div v-show="btnActiveName === '注册地分布'" class="box3-main1">
          <div class="box3-main1-left">
            <div
              class="box3-main1-left-item"
              v-for="(item, index) in mapData"
              :key="index"
            >
              <div class="box3-main1-left-item-left">{{ index + 1 }}</div>
              <div class="box3-main1-left-item-center">{{ item.name }}</div>
              <div class="box3-main1-left-item-right">
                {{ item.value + "次" }}
              </div>
            </div>
          </div>
          <div class="box3-main1-right" id="chartMap"></div>
        </div>
      </div>
      <div class="box4">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">调查结果分布</div>

          <div class="header-right">
            <img src="../assets/images/header-icon.png" alt="" />
          </div>
        </div>
        <div class="box4-main" id="chart4"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";

import ChinaJson from "../assets/json/China.json";

import getMultiLineChart from "./utils/multiLineChart";
import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart";
import getMapChart from "./utils/mapChart";

// 绘制echarts图表
const setChart = (option, chartId) => {
  let chartDom = document.getElementById(chartId);
  chartDom.removeAttribute("_echarts_instance_");
  let chart = echarts.init(chartDom);
  chart.setOption(option);
  return chart;
};

const btnActiveName = ref("注册地分布");
const handleClickBox3Btn = (name) => {
  btnActiveName.value = name;
  if (name === "调查次数") {
    nextTick(() => {
      let chart3 = getBarChart(chart3Data.value.name, chart3Data.value.value);
      setChart(chart3, "chart3");
    });
  } else {
    nextTick(() => {
      let chartMap = getMapChart(mapData.value);
      setChart(chartMap, "chartMap");
    });
  }
};

const chart1Data = ref({
  title: [
    "2014",
    "2015",
    "2016",
    "2017",
    "2018",
    "2019",
    "2020",
    "2021",
    "2022",
    "2023",
    "2024",
    "2025",
  ],
  data: [
    {
      name: "提出法案",
      value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172],
    },
  ],
});

const chart2Data = ref([
  { name: "半导体", value: 50 },
  { name: "电子设备", value: 46 },
  { name: "显示技术", value: 40 },
  { name: "新能源", value: 32 },
  { name: "通信设备", value: 31 },
  { name: "汽车", value: 31 },
  { name: "轻工业制造", value: 30 },
  { name: "其他", value: 24 },
]);
const chart2ColorList = ref([
  "#69B1FF",
  "#FFC069",
  "#87E8DE",
  "#597EF7",
  "#D6E4FF",
  "#FF7875",
  "#B37FEB",
  "#FFA39E",
]);

const chart3Data = ref({
  name: [
    "华为技术有限公司",
    "大疆创新科技有限公司",
    "TCL科技集团股份有限公司",
    "中兴通讯股份有限公司",
    "联想集团",
    "比亚迪集团",
    "宁德时代新能源科技股份有限公司",
    "晶科智能科技有限公司",
  ],
  value: [42, 35, 28, 19, 15, 12, 11, 8],
});

const mapData = ref([
  { name: "北京", value: 10, coord: [116.46, 39.92] },
  { name: "上海", value: 9, coord: [121.48, 31.22] },
  { name: "广东", value: 15, coord: [113.23, 23.16] },
  { name: "江苏", value: 30, coord: [118.78, 32.04] },
  { name: "浙江", value: 20, coord: [120.19, 30.26] },
  { name: "四川", value: 4, coord: [104.06, 30.67] },
  { name: "陕西", value: 1, coord: [108.95, 34.27] },
  { name: "辽宁", value: 3, coord: [123.38, 41.8] },
  // { name: "湖北", value: 2, coord: [114.31, 30.52] },
  // { name: "山东", value: 12, coord: [117.0, 36.65] },
]);

const chart4Data = ref([
  { name: "和解/同意令", value: 50 },
  { name: "裁定不侵权", value: 46 },
  { name: "裁定侵权", value: 40 },
  { name: "申诉方撤诉", value: 31 },
  { name: "其他", value: 24 },
]);
const chart4ColorList = ref([
  "#69B1FF",
  "#FFC069",
  "#87E8DE",
  "#D6E4FF",
  "#FFA39E",
]);

onMounted(() => {
  let chart1 = getMultiLineChart(
    chart1Data.value.title,
    chart1Data.value.data[0].value
  );
  setChart(chart1, "chart1");

  let chart2 = getPieChart(chart2Data.value, chart2ColorList.value);
  setChart(chart2, "chart2");

  let chart3 = getBarChart(chart3Data.value.name, chart3Data.value.value);
  setChart(chart3, "chart3");

  let chartMap = getMapChart(mapData.value);
  setChart(chartMap, "chartMap");

  let chart4 = getPieChart(chart4Data.value, chart4ColorList.value);
  setChart(chart4, "chart4");
});
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .top {
    display: flex;
    justify-content: space-between;
    margin: 16px 160px;
    .item {
      width: 388px;
      height: 80px;
      border-radius: 4px;
      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
      background: rgba(255, 255, 255, 1);
      position: relative;
      display: flex;
      justify-content: space-between;
      &::before {
        position: absolute;
        content: "";
        width: 4px;
        height: 49px;
        background: rgba(10, 87, 166, 1);
        left: 0;
        top: 15px;
      }
      .item-left {
        margin-left: 30px;
        margin-top: 25px;
        height: 24px;
        color: rgba(59, 65, 75, 1);
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
      }
      .item-right {
        margin-top: 28px;
        margin-right: 35px;
        height: 24px;
        color: rgba(10, 87, 166, 1);
        font-family: Microsoft YaHei;
        font-size: 30px;
        font-weight: 700;
        line-height: 24px;
      }
      .item-left-box {
        margin-left: 30px;
        .item-left1 {
          margin-top: 13px;
          height: 24px;
          color: rgba(59, 65, 75, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 700;
          line-height: 24px;
        }
        .item-left2 {
          height: 2px;
          color: rgba(95, 101, 108, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
        }
      }
    }
  }
  .box-header {
    height: 56px;
    display: flex;
    position: relative;
    .header-left {
      margin-top: 20px;
      width: 8px;
      height: 16px;
      border-radius: 0 4px 4px 0;
      background: rgba(10, 87, 166, 1);
    }
    .title {
      margin-left: 22px;
      margin-top: 20px;
      height: 16px;
      line-height: 16px;
      color: rgba(10, 87, 166, 1);
      font-family: Microsoft YaHei;
      font-size: 16px;
      font-weight: 600;
      line-height: 16px;
    }
    .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 rgba(10, 87, 166, 1);
        background: rgba(246, 250, 255, 1);
        color: rgba(10, 87, 166, 1);
      }
    }
    .header-right {
      position: absolute;
      top: 14px;
      right: 12px;
      width: 32px;
      height: 32px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .center {
    display: flex;
    justify-content: space-between;
    margin: 0 160px;
    .box1 {
      width: 792px;
      height: 360px;
      border-radius: 4px;
      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
      background: rgba(255, 255, 255, 1);
      .box1-main {
        height: 300px;
      }
    }
    .box2 {
      width: 792px;
      height: 360px;
      border-radius: 4px;
      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
      background: rgba(255, 255, 255, 1);
      .box2-main {
        height: 300px;
        // width: 752px;
        box-sizing: border-box;
        padding: 0 20px;
      }
    }
  }
  .footer {
    margin: 16px 160px;
    display: flex;
    justify-content: space-between;
    .box3 {
      width: 792px;
      height: 360px;
      border-radius: 4px;
      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
      background: rgba(255, 255, 255, 1);
      .box3-main {
        height: 300px;
      }
      .box3-main1 {
        height: 300px;
        display: flex;
        .box3-main1-left {
          width: 380px;
          height: 300px;
          overflow-y: auto;
          overflow-x: hidden;
          .box3-main1-left-item {
            display: flex;
            height: 36px;
            margin-left: 20px;
            .box3-main1-left-item-left {
              width: 24px;
              height: 24px;
              border-radius: 12px;
              margin-left: 12px;
              margin-top: 6px;
              background: #e7f3ff;
              color: #0a57a6;
              text-align: center;
              line-height: 24px;
            }
            .box3-main1-left-item-center {
              height: 36px;
              line-height: 36px;
              width: 220px;
              margin-left: 12px;
            }
            .box3-main1-left-item-right {
              width: 80px;
              box-sizing: border-box;
              padding-right: 10px;
              text-align: right;
            }
          }
        }
        .box3-main1-right {
          width: 390px;
          height: 300px;
        }
      }
    }
    .box4 {
      width: 792px;
      height: 360px;
      border-radius: 4px;
      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
      background: rgba(255, 255, 255, 1);
      .box4-main {
        height: 300px;
        box-sizing: border-box;
        padding: 0 20px;
      }
    }
  }
}
</style>