<template>
  <div class="wrapper">
    <div class="top">
      <div class="box1 box">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">同领域调查案件数量</div>
          <div class="header-btn-box">
            <div class="btn btnActive">{{ "半导体" }}</div>
          </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" id="chart1"></div>
        <div class="box1-footer">
          <div class="icon1">
            <img src="./assets/images/icon1.png" alt="" />
          </div>
          <div class="text">
            {{
              "近年来美对华半导体337调查呈现案件频发、聚焦专利壁垒、力图阻断产业链升级的特点。"
            }}
          </div>
          <div class="icon2">
            <img src="./assets/images/icon2.png" alt="" />
          </div>
        </div>
      </div>
      <div class="box2 box">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">同领域调查涉及公司</div>
          <div class="header-btn-box">
            <div class="btn btnActive">{{ "半导体" }}</div>
          </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="box2-main" id="chart2"></div>
        <div class="box2-footer">
          <div class="icon1">
            <img src="./assets/images/icon1.png" alt="" />
          </div>
          <div class="text">
            {{
              "主要集中在存储、芯片设计及通信领域，如长江存储、长鑫存储、华为、中兴等"
            }}
          </div>
          <div class="icon2">
            <img src="./assets/images/icon2.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="box3 box">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">关联企业</div>
          <div class="header-btn-box">
            <div
              class="btn"
              :class="{ btnActive: item.isActive }"
              v-for="(item, index) in box3BtnList"
              :key="index"
              @click="handleClickBox3Btn(index)"
            >
              {{ item.name }}
            </div>
          </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="box3-main">
          <div id="chart3"></div>
          <div id="chart4"></div>
        </div>
        <div class="box3-footer">
          <div class="icon1">
            <img src="./assets/images/icon1.png" alt="" />
          </div>
          <div class="text">
            {{
              "近年来美对华半导体337调查呈现案件频发、聚焦专利壁垒、力图阻断产业链升级的特点。"
            }}
          </div>
          <div class="icon2">
            <img src="./assets/images/icon2.png" alt="" />
          </div>
        </div>
      </div>
      <div class="box4 box">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">和解可能性分析</div>
          <div class="header-btn-box">
            <div class="btn btnActive">{{ "半导体" }}</div>
          </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="box4-main">
          <div id="chart5"></div>
          <div class="box4-info-box">
            <div class="item" v-for="(item, index) in infoList" :key="index">
              <div class="item-left"></div>
              <div class="item-right">
                <div class="title">{{ item.title }}</div>
                <div class="content">{{ item.content }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="box4-footer">
          <div class="icon1">
            <img src="./assets/images/icon1.png" alt="" />
          </div>
          <div class="text">
            {{
              "近年来美对华半导体337调查呈现案件频发、聚焦专利壁垒、力图阻断产业链升级的特点。"
            }}
          </div>
          <div class="icon2">
            <img src="./assets/images/icon2.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import getBarChart from "./utils/barChart";
import getBarChart1 from "./utils/barChart1";
import getPieChart from "./utils/pieChart";

const box3BtnList = ref([
  {
    name: "全部",
    isActive: true,
  },
  {
    name: "一加",
    isActive: false,
  },
  {
    name: "联想",
    isActive: false,
  },
  {
    name: "TCL",
    isActive: false,
  },
  {
    name: "其他",
    isActive: false,
  },
]);

const handleClickBox3Btn = (index) => {
  box3BtnList.value.forEach((item) => {
    item.isActive = false;
  });
  box3BtnList.value[index].isActive = true;
};

// 绘制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 chart1Data = ref({
  title: [
    "2014",
    "2015",
    "2016",
    "2017",
    "2018",
    "2019",
    "2020",
    "2021",
    "2022",
    "2023",
    "2024",
    "2025",
  ],
  data: [32, 32, 41, 33, 29, 31, 16, 31, 37, 31, 27, 27],
});

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

const chart3Data = ref([
  {
    name: "子公司",
    value: 7,
  },
  {
    name: "关联公司",
    value: 7,
  },
  {
    name: "合作伙伴",
    value: 6,
  },
  {
    name: "其他",
    value: 4,
  },
]);

const colorList1 = ref(["#4096FF", "#FFA39E", "#D6E4FF", "#FFC069"]);
const colorList2 = ref(["#69B1FF", "#FFC069", "#87E8DE", "#D6E4FF", "#FFA39E"]);

const chart4Data = ref([
  {
    name: "中国香港",
    value: 7,
  },
  {
    name: "美国",
    value: 7,
  },
  {
    name: "芬兰",
    value: 6,
  },
  {
    name: "中国大陆",
    value: 4,
  },
]);

const chart5Data = ref([
  {
    name: "和解/同意令",
    value: 50,
  },
  {
    name: "裁定不侵权",
    value: 46,
  },
  {
    name: "裁定侵权",
    value: 40,
  },
  {
    name: "申诉方撤诉",
    value: 31,
  },
  {
    name: "其他",
    value: 24,
  },
]);

const infoList = ref([
  {
    title: "专利无效宣告",
    content: "被告企业可能通过证明Pantech专利无效来赢得案件",
  },
  {
    title: "交叉许可协议",
    content: "双方达成专利交叉许可协议，结束争端",
  },
  {
    title: "和解协议",
    content: "被告企业支付专利使用费以换取市场准入",
  },
  {
    title: "有限排除令",
    content: "如果侵权成立，ITC可能发布有限排除令，禁止涉案产品进入美国市场",
  },
]);

onMounted(() => {
  let chart1 = getBarChart(chart1Data.value.title, chart1Data.value.data);
  setChart(chart1, "chart1");

  let chart2 = getBarChart1(chart2Data.value.title, chart2Data.value.data);
  setChart(chart2, "chart2");

  let chart3 = getPieChart(chart3Data.value, colorList1.value);
  setChart(chart3, "chart3");

  let chart4 = getPieChart(chart4Data.value, colorList1.value);
  setChart(chart4, "chart4");

  let chart5 = getPieChart(chart5Data.value, colorList2.value);
  setChart(chart5, "chart5");
});
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100%;
  // padding: 0 160px;
  overflow-y: auto;
  .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: 116px;
      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-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%;
        }
      }
		}
  }
  .box {
    width: 792px;
    height: 410px;
    border-radius: 4px;
    box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
    background: rgba(255, 255, 255, 1);
  }
  .top {
    display: flex;
    margin: 0 160px;
    margin-top: 16px;

    .box1 {
      .box1-main {
        height: 280px;
      }
      .box1-footer {
        height: 40px;
        margin: 0 auto;
        margin-top: 19px;
        width: 759px;
        height: 40px;
        box-sizing: border-box;
        border: 1px solid rgba(231, 243, 255, 1);
        border-radius: 4px;
        background: rgba(246, 251, 255, 1);
        display: flex;
        .icon1 {
          margin-left: 12px;
          margin-top: 10px;
          width: 19px;
          height: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          margin-left: 12px;
          line-height: 40px;
          width: 666px;
          height: 40px;
          color: var(--color-main-active);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 400;
        }
        .icon2 {
          margin-left: 13px;
          margin-top: 8px;
          width: 24px;
          height: 24px;
          background: rgba(231, 243, 255, 1);
          border-radius: 12px;
          img {
            width: 12px;
            height: 12px;
            margin-top: 6px;
            margin-left: 6px;
          }
        }
      }
    }
    .box2 {
      margin-left: 16px;
      .box2-main {
        height: 280px;
      }
      .box2-footer {
        height: 40px;
        margin: 0 auto;
        margin-top: 19px;
        width: 759px;
        height: 40px;
        box-sizing: border-box;
        border: 1px solid rgba(231, 243, 255, 1);
        border-radius: 4px;
        background: rgba(246, 251, 255, 1);
        display: flex;
        .icon1 {
          margin-left: 12px;
          margin-top: 10px;
          width: 19px;
          height: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          margin-left: 12px;
          line-height: 40px;
          width: 666px;
          height: 40px;
          color: var(--color-main-active);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 400;
        }
        .icon2 {
          margin-left: 13px;
          margin-top: 8px;
          width: 24px;
          height: 24px;
          background: rgba(231, 243, 255, 1);
          border-radius: 12px;
          img {
            width: 12px;
            height: 12px;
            margin-top: 6px;
            margin-left: 6px;
          }
        }
      }
    }
  }
  .footer {
    margin: 0 160px;
    margin-top: 16px;
    display: flex;
    .box3 {
      .box3-main {
        height: 280px;
        display: flex;
        #chart3 {
          width: 396px;
        }
        #chart4 {
          width: 396px;
        }
      }
      .box3-footer {
        height: 40px;
        margin: 0 auto;
        margin-top: 19px;
        width: 759px;
        height: 40px;
        box-sizing: border-box;
        border: 1px solid rgba(231, 243, 255, 1);
        border-radius: 4px;
        background: rgba(246, 251, 255, 1);
        display: flex;
        .icon1 {
          margin-left: 12px;
          margin-top: 10px;
          width: 19px;
          height: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          margin-left: 12px;
          line-height: 40px;
          width: 666px;
          height: 40px;
          color: var(--color-main-active);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 400;
        }
        .icon2 {
          margin-left: 13px;
          margin-top: 8px;
          width: 24px;
          height: 24px;
          background: rgba(231, 243, 255, 1);
          border-radius: 12px;
          img {
            width: 12px;
            height: 12px;
            margin-top: 6px;
            margin-left: 6px;
          }
        }
      }
    }
    .box4 {
      margin-left: 16px;
      .box4-main {
        height: 280px;
        display: flex;
        #chart5 {
          width: 396px;
        }
        .box4-info-box {
          width: 385px;
          .item {
            min-height: 66px;
            display: flex;
            .item-left {
              width: 6px;
              height: 6px;
              border-radius: 3px;
              background: rgba(255, 77, 79, 1);
              margin-top: 16px;
            }
            .item-right {
              margin-left: 10px;
              .title {
                margin-top: 5px;
                height: 24px;
                color: rgba(59, 65, 75, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px;
              }
              .content {
                color: rgba(95, 101, 108, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
              }
            }
          }
        }
      }
      .box4-footer {
        height: 40px;
        margin: 0 auto;
        margin-top: 19px;
        width: 759px;
        height: 40px;
        box-sizing: border-box;
        border: 1px solid rgba(231, 243, 255, 1);
        border-radius: 4px;
        background: rgba(246, 251, 255, 1);
        display: flex;
        .icon1 {
          margin-left: 12px;
          margin-top: 10px;
          width: 19px;
          height: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          margin-left: 12px;
          line-height: 40px;
          width: 666px;
          height: 40px;
          color: var(--color-main-active);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 400;
        }
        .icon2 {
          margin-left: 13px;
          margin-top: 8px;
          width: 24px;
          height: 24px;
          background: rgba(231, 243, 255, 1);
          border-radius: 12px;
          img {
            width: 12px;
            height: 12px;
            margin-top: 6px;
            margin-left: 6px;
          }
        }
      }
    }
  }
}
</style>