<template>
  <div class="wrap">
    <div class="left">
      <div class="box1">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">科研仪器依赖</div>
          <div class="header-btn-box">
            <div class="btn" @click="handleClickBox1Btn(1)">
              <el-button type="primary" plain v-if="box1BtnActive === 1"
                >仪器数量</el-button
              >
              <el-button type="info" plain v-else>仪器数量</el-button>
            </div>
            <div class="btn" @click="handleClickBox1Btn(2)">
              <el-button type="primary" plain v-if="box1BtnActive === 2"
                >进口率</el-button
              >
              <el-button type="info" plain v-else>进口率</el-button>
            </div>
            <div class="btn" @click="handleClickBox1Btn(3)">
              <el-button type="primary" plain v-if="box1BtnActive === 3"
                >仪器类型</el-button
              >
              <el-button type="info" plain v-else>仪器类型</el-button>
            </div>
            <div class="btn" @click="handleClickBox1Btn(4)">
              <el-button type="primary" plain v-if="box1BtnActive === 4"
                >进口率变化</el-button
              >
              <el-button type="info" plain v-else>进口率变化</el-button>
            </div>
          </div>
          <div class="header-right">
            <img src="./assets/images/header-icon.png" alt="" />
          </div>
        </div>
        <div class="box1-main">
          <div
            id="chart1"
            class="box1-chart"
            v-show="box1BtnActive === 1"
          ></div>
          <div
            id="chart2"
            class="box1-chart"
            v-show="box1BtnActive === 2"
          ></div>
          <div
            id="chart3"
            class="box1-chart"
            v-show="box1BtnActive === 3"
          ></div>
          <div
            id="chart4"
            class="box1-chart"
            v-show="box1BtnActive === 4"
          ></div>
        </div>

        <div class="box1-footer">
          <div class="box-footer-left">
            <img src="../assets/icons/right-icon1.png" alt="" />
          </div>
          <div class="box-footer-center">
            通过“技术禁运+实体清单+关税壁垒”三重枷锁，短期严重制约中国高校获取高端科研设备的能力。
          </div>
          <div class="box-footer-right">
            <img src="../assets/icons/arrow-right.png" alt="" />
          </div>
        </div>
      </div>
      <div class="box2">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">国际合作情况</div>
          <div class="header-btn-box">
            <div class="btn" @click="handleClickBox2Btn(1)">
              <el-button type="primary" plain v-if="box2BtnActive === 1"
                >国际项目</el-button
              >
              <el-button type="info" plain v-else>国际项目</el-button>
            </div>
            <div class="btn" @click="handleClickBox2Btn(2)">
              <el-button type="primary" plain v-if="box2BtnActive === 2"
                >合著论文</el-button
              >
              <el-button type="info" plain v-else>合著论文</el-button>
            </div>
          </div>
          <div class="header-right">
            <img src="./assets/images/header-icon.png" alt="" />
          </div>
        </div>
        <div class="box2-main">
          <div class="box2-main-left" id="chart5"></div>
          <div class="box2-main-right" id="chart6"></div>
          <div class="select-box">
            <el-select
              v-model="curYear"
              placeholder="选择年份"
              style="width: 100px"
            >
              <el-option
                v-for="item in yearList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="box2-footer">
          <div class="box-footer-left">
            <img src="../assets/icons/right-icon1.png" alt="" />
          </div>
          <div class="box-footer-center">
            通过经费限制、技术封锁、签证壁垒三重机制，系统性削弱中美科研合作基础，显著冲击科研合作项目。
          </div>
          <div class="box-footer-right">
            <img src="../assets/icons/arrow-right.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="box3">
        <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="box3-main">
          <div class="box3-main-box1">
            <div class="box3-main-box1-header">
              <div class="box3-main-box1-title">
                <div class="icon">
                  <img src="./assets/images/title-icon1.png" alt="" />
                </div>
                <div class="text">{{ "领域人才交流" }}</div>
              </div>
              <div class="box3-main-box1-btn-box">
                <div class="btn" @click="handleClickBox3Btn(1)">
                  <el-button type="primary" plain v-if="box3BtnActive === 1"
                    >华裔科学家回流</el-button
                  >
                  <el-button type="info" plain v-else>华裔科学家回流</el-button>
                </div>
                <div class="btn" @click="handleClickBox3Btn(2)">
                  <el-button type="primary" plain v-if="box3BtnActive === 2"
                    >赴美STEM专业申请</el-button
                  >
                  <el-button type="info" plain v-else
                    >赴美STEM专业申请</el-button
                  >
                </div>
                <div class="btn" @click="handleClickBox3Btn(3)">
                  <el-button type="primary" plain v-if="box3BtnActive === 3"
                    >高端人才引进</el-button
                  >
                  <el-button type="info" plain v-else>高端人才引进</el-button>
                </div>
                <div class="btn" @click="handleClickBox3Btn(4)">
                  <el-button type="primary" plain v-if="box3BtnActive === 4"
                    >STEM专业拒签率</el-button
                  >
                  <el-button type="info" plain v-else>STEM专业拒签率</el-button>
                </div>
                <div class="btn" @click="handleClickBox3Btn(5)">
                  <el-button type="primary" plain v-if="box3BtnActive === 5"
                    >H-1B中签率</el-button
                  >
                  <el-button type="info" plain v-else>H-1B中签率</el-button>
                </div>
              </div>
            </div>
            <div class="box3-main-box1-main">
              <div class="box3-main-box1-main-left" id="chart7"></div>
              <div class="box3-main-box1-main-right" id="chart8"></div>
            </div>
          </div>
          <div class="box3-main-box2">
            <div class="box3-main-box2-header">
              <div class="box3-main-box2-title">
                <div class="icon">
                  <img src="./assets/images/title-icon2.png" alt="" />
                </div>
                <div class="text">{{ "高被引学者数量" }}</div>
              </div>
              <div class="select-box">
                <el-select
                  v-model="curYear"
                  placeholder="选择年份"
                  style="width: 100px"
                >
                  <el-option
                    v-for="item in yearList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <div class="box3-main-box2-main" id="chart9"></div>
          </div>
        </div>
        <div class="box3-footer">
          <div class="box-footer-left">
            <img src="../assets/icons/right-icon1.png" alt="" />
          </div>
          <div class="box-footer-center">
            法案以218:214​（众议院）和51:50​微弱优势强行通过，暴露两党极端对立、党内倒戈频发的特点。
          </div>
          <div class="box-footer-right">
            <img src="../assets/icons/arrow-right.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 getPieChart from "./utils/piechart";
import getMultiLineChart from "./utils/multiLineChart";
import getBarChart1 from "./utils/barChart1";
import getPieChart1 from "./utils/pieChart1";
import getLineChart from "./utils/lineChart";
import getMultiBarChart from "./utils/multiBarChart";

const box1BtnActive = ref(1);
const box2BtnActive = ref(1)
const box3BtnActive = ref(1);

const handleClickBox2Btn = (index) => {
  box2BtnActive.value = index
}

const handleClickBox3Btn = (index) => {
  box3BtnActive.value = index;
};

const handleClickBox1Btn = (index) => {
  box1BtnActive.value = index;
  if (index === 2) {
    setTimeout(() => {
      let chart2 = getBarChart(chart2Data.value.name, chart2Data.value.value, true);
      setChart(chart2, "chart2");
    });
  } else if (index === 3) {
    setTimeout(() => {
      let chart3 = getPieChart(chart3Data.value);
      setChart(chart3, "chart3");
    });
  } else if (index === 4) {
    setTimeout(() => {
      let chart4 = getMultiLineChart(
        chart4Data.value.dataX,
        chart4Data.value.value
      );
      setChart(chart4, "chart4");
    });
  } else {
    setTimeout(() => {
      let chart1 = getBarChart(chart1Data.value.name, chart1Data.value.value, false);
      setChart(chart1, "chart1");
    });
  }
};

// 绘制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 curYear = ref("2025年");

const yearList = ref([
  {
    label: "2025年",
    value: "2025年",
  },
  {
    label: "2024年",
    value: "2024年",
  },
  {
    label: "2023年",
    value: "2023年",
  },
  {
    label: "2022年",
    value: "2022年",
  },
]);

const chart1Data = ref({
  name: [
    "清华大学",
    "北京大学",
    "浙江大学",
    "上海交通大学",
    "复旦大学",
    "中国科学技术大学",
    "南京大学",
    "西北工业大学",
    "北京理工大学",
    "哈尔滨工业大学",
  ],
  value: [109, 95, 79, 66, 61, 54, 50, 48, 34, 32],
});

const chart2Data = ref({
  name: [
    "分析仪器",
    "医学科研仪器",
    "核仪器",
    "激光器",
    "电子测量仪器",
    "地球探测仪器",
    "计量仪器",
    "物理性能测试仪器",
    "海洋仪器",
    "特种检测仪器",
  ],
  value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79],
});

const chart3Data = ref([
  {
    name: "大气探测仪器",
    value: 24,
    // per: 8,
  },
  {
    name: "空间与天文仪器",
    value: 24,
    // per: 8,
  },
  {
    name: "医学诊断仪器",
    value: 24,
    // per: 8,
  },
  {
    name: "核仪器",
    value: 30,
    // per: 11,
  },
  {
    name: "工艺试验设备",
    value: 31,
    // per: 12,
  },
  {
    name: "特种检测仪器",
    value: 31,
    // per: 12,
  },
  {
    name: "计算机及配套设备",
    value: 31,
    // per: 12,
  },
  {
    name: "激光器",
    value: 32,
    // per: 14,
  },
  {
    name: "分析仪器",
    value: 38,
    // per: 21,
  },
  {
    name: "物理性能测试仪器",
    value: 48,
    // per: 21,
  },
  {
    name: "计量仪器",
    value: 52,
    // per: 18,
  },
  {
    name: "电子测量仪器",
    value: 43,
    // per: 18,
  },
  {
    name: "海洋仪器",
    value: 28,
    // per: 16,
  },
  {
    name: "地球探测仪器",
    value: 35,
    // per: 16,
  },
]);

const chart4Data = ref({
  dataX: ["2020", "2021", "2022", "2023", "2024", "2025"],
  value: [
    {
      name: "大气探测仪器",
      dataY: [23, 35, 53, 42, 21, 12],
    },
    {
      name: "空间与天文仪器",
      dataY: [34, 42, 46, 37, 26, 18],
    },
    {
      name: "医学诊断仪器",
      dataY: [46, 55, 68, 72, 42, 33],
    },
    {
      name: "激光器",
      dataY: [52, 56, 71, 44, 31, 18],
    },
    {
      name: "核仪器",
      dataY: [14, 32, 45, 32, 27, 11],
    },
    {
      name: "工艺实验设备",
      dataY: [35, 66, 78, 88, 53, 32],
    },
    {
      name: "特种检测仪器",
      dataY: [28, 33, 56, 41, 32, 16],
    },
    {
      name: "计算机及配套设备",
      dataY: [26, 45, 66, 52, 44, 25],
    },
    {
      name: "分析仪器",
      dataY: [20, 54, 72, 66, 71, 55],
    },
    {
      name: "物理性能测试仪器",
      dataY: [66, 54, 72, 55, 44, 23],
    },
    {
      name: "计量仪器",
      dataY: [72, 33, 55, 21, 44, 18],
    },
    {
      name: "电子测量仪器",
      dataY: [56, 31, 46, 12, 43, 23],
    },
    {
      name: "海洋仪器",
      dataY: [55, 31, 48, 69, 42, 22],
    },
    {
      name: "地球探测仪器",
      dataY: [24, 56, 72, 52, 36, 25],
    },
  ],
});
const chart5Data = ref({
  name: [
    "清华大学",
    "中国科学技术大学",
    "深圳大学",
    "上海交通大学",
    "中山大学",
    "华中科技大学",
    "北京大学",
    "南京大学",
    "南开大学",
    "天津大学",
  ],
  value: [35, 32, 28, 19, 17, 17, 17, 17, 17, 17],
});

const chart6Data = ref([
  { name: "能源", value: 32 },
  { name: "集成电路", value: 28 },
  { name: "生物科技", value: 22 },
  { name: "人工智能", value: 29 },
  { name: "材料学", value: 18 },
  { name: "机器人", value: 41 },
  { name: "生命科学", value: 19 },
  { name: "自然科学", value: 14 },
  { name: "生物化学", value: 28 },
]);

const chart7Data = ref({
  dataX: ["2020", "2021", "2022", "2023", "2024", "2025"],
  dataY: [456, 292, 298, 335, 316, 248],
});

const chart8Data = ref([
  { name: "生命科学", value: 24 },
  { name: "自然科学", value: 31 },
  { name: "生物化学", value: 14 },
  { name: "能源", value: 22 },
  { name: "集成电路", value: 26 },
  { name: "生物科技", value: 18 },
  { name: "人工智能", value: 31 },
  { name: "材料学", value: 33 },
  { name: "机器人", value: 25 },
]);

const chart9Data = ref({
  dataX: ["交叉学科", "临床医学", "材料科学", "生物学与生物化学", "化学"],
  value: [
    {
      name: "美国",
      value: [77, 46, 56, 84, 72],
    },
    {
      name: "中国",
      value: [58, 65, 72, 80, 76],
    },
    {
      name: "德国",
      value: [53, 39, 47, 49, 30],
    },
    {
      name: "日本",
      value: [28, 35, 29, 29, 44],
    },
    {
      name: "英国",
      value: [27, 44, 32, 36, 35],
    },
  ],
});

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

  let chart5 = getBarChart1(chart5Data.value.name, chart5Data.value.value);
  setChart(chart5, "chart5");

  let chart6 = getPieChart1(chart6Data.value, '40%', '52%', '30%');
  setChart(chart6, "chart6");

  let chart7 = getLineChart(chart7Data.value);
  setChart(chart7, "chart7");

  let chart8 = getPieChart1(chart8Data.value, '50%', '50%');
  setChart(chart8, "chart8");

  let chart9 = getMultiBarChart(chart9Data.value.dataX, chart9Data.value.value);
  setChart(chart9, "chart9");
});
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  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: 20px;
      height: 16px;
      line-height: 16px;
      color: var(--color-main-active);
      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: 20px;
      }
    }
    .header-right {
      position: absolute;
      top: 14px;
      right: 12px;
      width: 32px;
      height: 32px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .left {
    .box1 {
      margin-top: 16px;
      width: 860px;
      height: 415px;
      background: rgba(255, 255, 255);
      border-radius: 10px;
      box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
      .box1-main {
        height: 300px;
        width: 820px;
        margin: 5px 20px;
        .box1-chart {
          width: 100%;
          height: 100%;
        }
      }

      .box1-footer {
        width: 830px;
        height: 40px;
        display: flex;
        box-sizing: border-box;
        margin: 0 auto;
        margin-top: 6px;
        background: rgba(246, 251, 255, 1);
        border: 1px solid rgba(231, 241, 255, 1);
        border-radius: 4px;
        .box-footer-left {
          margin-top: 10px;
          margin-left: 12px;
          width: 19px;
          height: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .box-footer-center {
          margin-left: 13px;
          margin-top: 8px;
          width: 749px;
          height: 24px;
          color: var(--color-main-active);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
        }
        .box-footer-right {
          margin-left: 5px;
          margin-top: 8px;
          width: 24px;
          height: 24px;
          background: rgba(231, 241, 255, 1);
          border-radius: 12px;
          background: #e7f1ff;
          box-sizing: border-box;
          padding: 3px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .box2 {
      margin-top: 16px;
      width: 860px;
      height: 415px;
      background: rgba(255, 255, 255);
      border-radius: 10px;
      box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);

      .box2-main {
        height: 300px;
        width: 820px;
        margin: 5px 20px;
        display: flex;
        position: relative;
        .box2-main-left {
          width: 500px;
        }
        .box2-main-right {
          width: 320px;
        }
        .select-box {
          position: absolute;
          right: 32px;
          top: 2px;
        }
      }
      .box2-footer {
        width: 830px;
        height: 40px;
        display: flex;
        box-sizing: border-box;
        margin: 0 auto;
        margin-top: 6px;
        background: rgba(246, 251, 255, 1);

        border: 1px solid rgba(231, 241, 255, 1);
        border-radius: 4px;
        .box-footer-left {
          margin-top: 10px;
          margin-left: 12px;
          width: 19px;
          height: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .box-footer-center {
          margin-left: 13px;
          margin-top: 8px;
          width: 749px;
          height: 24px;
          color: var(--color-main-active);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
        }
        .box-footer-right {
          margin-left: 5px;
          margin-top: 8px;
          width: 24px;
          height: 24px;
          background: rgba(231, 241, 255, 1);
          border-radius: 12px;
          background: #e7f1ff;
          box-sizing: border-box;
          padding: 3px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .right {
    margin-left: 16px;
    .box3 {
      margin-top: 16px;
      width: 860px;
      height: 847px;
      background: rgba(255, 255, 255);
      border-radius: 10px;
      box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
      .box3-main {
        height: 730px;
        width: 820px;
        margin: 5px 20px;
        .box3-main-box1 {
          height: 350px;
          .box3-main-box1-header {
            display: flex;
            justify-content: space-between;
            .box3-main-box1-title {
              display: flex;
              .icon {
                width: 16px;
                height: 16px;
                margin-top: 7px;
                margin-right: 8px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .text {
                height: 30px;
                color: rgba(95, 101, 108, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 700;
                line-height: 30px;
              }
            }
            .box3-main-box1-btn-box {
              display: flex;
              justify-content: flex-end;
              .btn {
                margin-left: 8px;
              }
            }
          }
          .box3-main-box1-main {
            margin-top: 5px;
            height: 320px;
            display: flex;
            .box3-main-box1-main-left {
              width: 500px;
            }
            .box3-main-box1-main-right {
              width: 360px;
            }
          }
        }
        .box3-main-box2 {
          margin-top: 20px;
          height: 350px;
          .box3-main-box2-header {
            height: 30px;
            display: flex;
            justify-content: space-between;
            .box3-main-box2-title {
              display: flex;
              .icon {
                width: 16px;
                height: 16px;
                margin-top: 7px;
                margin-right: 8px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .text {
                height: 30px;
                color: rgba(95, 101, 108, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 700;
                line-height: 30px;
              }
            }
          }
          .box3-main-box2-main {
            height: 310px;
            margin-top: 10px;
          }
        }
      }
      .box3-footer {
        width: 830px;
        height: 40px;
        display: flex;
        box-sizing: border-box;
        margin: 0 auto;
        margin-top: 6px;
        background: rgba(246, 251, 255, 1);

        border: 1px solid rgba(231, 241, 255, 1);
        border-radius: 4px;

        .box-footer-left {
          margin-top: 10px;
          margin-left: 12px;
          width: 19px;
          height: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .box-footer-center {
          margin-left: 13px;
          margin-top: 8px;
          width: 749px;
          height: 24px;
          color: var(--color-main-active);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
        }
        .box-footer-right {
          margin-left: 5px;
          margin-top: 8px;
          width: 24px;
          height: 24px;
          background: rgba(231, 241, 255, 1);
          border-radius: 12px;
          background: #e7f1ff;
          box-sizing: border-box;
          padding: 3px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>




