<template>
  <div class="wrapper">
    <div class="left">
      <div class="box1">
        <div class="box-header">
          <div class="icon"></div>
          <div class="title">{{ "企业影响分析" }}</div>
          <div class="header-right1">
            <el-checkbox
              v-model="isChecked"
              label="只看中国企业"
              size="large"
            />
          </div>
					<div class="header-right">
						<div class="header-right-icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="header-right-icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
        </div>
        <div class="box1-top" id="chart1"></div>
        <div class="box1-tab-box">
          <div
            class="tab"
            :class="{ tabActive: tabActiveIndex === index }"
            v-for="(item, index) in tabList"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        <div class="box1-list-box">
          <div
            class="box1-item"
            v-for="(item, index) in companyList"
            :key="index"
          >
            <div class="id">{{ index + 1 }}</div>
            <div class="title">{{ item.name }}</div>
            <div class="icon">
              <img
                v-if="item.status === 'up'"
                src="./assets/images/up.png"
                alt=""
              />
              <img v-else src="./assets/images/down.png" alt="" />
            </div>
          </div>
        </div>
        <div class="box1-footer">
          <div class="box1-footer-left">{{ `共105家企业` }}</div>
          <div class="box1-footer-right">
            <el-pagination
              background
              layout="prev, pager, next"
              size="small"
              :total="105"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="box2">
        <div class="box-header">
          <div class="icon"></div>
          <div class="title">{{ "政令举措落实分析" }}</div>
          <div class="header-right1"></div>
					<div class="header-right">
						<div class="header-right-icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="header-right-icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
        </div>

        <div class="box2-main">
          <div class="box2-line-box"></div>
          <div
            class="box2-item"
            :class="{ box2ItemFooter: index % 2 }"
            v-for="(item, index) in timeLineList"
            :key="index"
          >
            <div class="point" :class="{ pointFooter: index % 2 }">
              <img src="./assets/images/point.png" alt="" />
            </div>
            <div class="box2-item-header">
              <div class="title">{{ item.time }}</div>
            </div>
            <div class="box2-item-content">
              {{ item.content }}
            </div>
          </div>
        </div>
        <div class="box2-footer">
          <div class="footer-left">
            <img src="./assets/images/footer-icon1.png" alt="" />
          </div>
          <div class="footer-center">
            {{
              `政令目前仍处于关键的执行框架搭建期。该政令旨在通过推动“全栈式”美国AI技术出口，巩固其技术霸权并减少国际社会对美国对手国家技术的依赖`
            }}
          </div>
          <div class="footer-right">
            <img src="./assets/images/footer-icon2.png" alt="" />
          </div>
        </div>
      </div>
      <div class="box3">
        <div class="box-header">
          <div class="icon"></div>
          <div class="title">{{ "历史相似举措及落实情况" }}</div>
          <div class="header-right1"></div>
					<div class="header-right">
						<div class="header-right-icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="header-right-icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
        </div>
        <div class="box3-main">
          <div class="box3-item" v-for="(item, index) in box3List" :key="index">
            <div class="box3-item-left">
              <div class="text">
                {{ item.type }}
              </div>
            </div>
            <div class="box3-item-right">
              <div class="right-top">
                <div class="title">{{ item.title }}</div>
                <div class="tag">{{ item.tag }}</div>
              </div>
              <div class="right-footer">
                <div class="content">{{ item.content }}</div>
                <div class="time">{{ item.time }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="box3-footer">
          <div class="footer-left">
            <img src="./assets/images/footer-icon1.png" alt="" />
          </div>
          <div class="footer-center">
            {{
              `中美经济深度交织，全面脱钩成本高昂且不现实。其核心揭示了三大纽带：生产网络相互依存使强行分离代价巨大；人才双向流动推动创新却成政策博弈焦点；能源领域合作与竞争并存，关乎全球气候治理与经济博弈。报告主张理性竞合，在竞争中找到合作路径。`
            }}
          </div>
          <div class="footer-right">
            <img src="./assets/images/footer-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";

const chart1Data = ref({
  title: ["集成电路", "新能源", "人工智能", "先进制造", "量子科技"],
  value: [109, 95, 79, 25, 11],
});

const tabActiveIndex = ref(0);
const tabList = ref(["集成电路", "新能源", "人工智能", "先进制造", "量子科技"]);

const companyList = ref([
  {
    name: "宁德时代新能源科技股份有限公司",
    status: "down",
  },
  {
    name: "比亚迪股份有限公司",
    status: "down",
  },
  {
    name: "隆基绿能科技股份有限公司",
    status: "down",
  },
  {
    name: "晶科能源控股有限公司",
    status: "down",
  },
  {
    name: "厦门海辰储能科技股份有限公司",
    status: "down",
  },
  {
    name: "国轩高科股份有限公司",
    status: "up",
  },
  {
    name: "远景科技集团",
    status: "down",
  },
  {
    name: "惠州亿纬锂能股份有限公司",
    status: "down",
  },
  {
    name: "天合光能股份有限公司",
    status: "down",
  },
  {
    name: "晶澳太阳能科技股份有限公司",
    status: "up",
  },
]);

const companyTotalNum = ref(105);

const isChecked = ref(true);

const box3List = ref([
  {
    type: "科技法案",
    title: "瓦森纳安排",
    content: "落实情况：持续有效，但面临技术快速迭代挑战。",
    time: "1996-至今",
    tag: "人工智能",
  },
  {
    type: "科技法案",
    title: "云计算出口管制",
    content: "落实情况：部分有效，但执行难度大。",
    time: "1996-至今",
    tag: "人工智能",
  },
  {
    type: "科技法案",
    title: "芯片与科学法案",
    content: "落实情况：正在实施，效果待观察。",
    time: "2022-至今",
    tag: "人工智能",
  },
  {
    type: "科技法案",
    title: "AI芯片出口管制",
    content: "落实情况：部分有效，但催生中国自主创新。",
    time: "1996-至今",
    tag: "人工智能",
  },
  {
    type: "科技法案",
    title: "瓦森纳安排",
    content: "落实情况：持续有效，但面临技术快速迭代挑战。",
    time: "1996-至今",
    tag: "人工智能",
  },
  {
    type: "科技法案",
    title: "瓦森纳安排",
    content: "落实情况：持续有效，但面临技术快速迭代挑战。",
    time: "1996-至今",
    tag: "人工智能",
  },
]);

const timeLineList = ref([
  {
    time: "2025年7月25日",
    content: "商务部已成立AI出口计划办公室，并开始招募专业人员。",
  },
  {
    time: "2025年7月31日",
    content: "英伟达、微软、谷歌等企业已提交初步技术栈提案。",
  },
  {
    time: "2025年8月5日",
    content: "国务院开始与盟友国家进行初步磋商。",
  },
  {
    time: "2025年8月9日",
    content:"国防部、能源部安全审查流程尚未最终确定。",
  },
  {
    time: "2025年8月12日",
    content: "商务部已成立AI出口计划办公室，并开始招募专业人员。",
  },
]);

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

onMounted(() => {
  let chart1 = getBarChart(chart1Data.value.title, chart1Data.value.value);
  setChart(chart1, "chart1");
});
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 879px;
  display: flex;
  .box-header {
    display: flex;
    height: 48px;
    position: relative;
    .icon {
      margin-top: 18px;
      width: 8px;
      height: 20px;
      border-radius: 0 4px 4px 0;
      background: var(--color-main-active);
    }
    .title {
      height: 26px;
      margin-left: 14px;
      margin-top: 14px;
      color: var(--color-main-active);
      font-family: Microsoft YaHei;
      font-size: 20px;
      font-weight: 700;
      line-height: 26px;
    }
		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
      display: flex;
      justify-content: flex-end;
			gap: 4px;
      .header-right-icon{
        width: 28px;
        height: 28px;
        img{
          width: 100%;
          height: 100%;
        }
      }
		}
    .header-right1 {
      position: absolute;
      top: 8px;
      right: 84px;
    }
  }
  .left {
    margin-left: 160px;
    margin-top: 16px;
    .box1 {
      width: 480px;
      height: 845px;
      border-radius: 4px;
      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
      background: rgba(255, 255, 255, 1);
      .box1-top {
        width: 446px;
        height: 188px;
        margin: 7px auto 0;
        box-sizing: border-box;
        border: 1px solid rgba(234, 236, 238, 1);
        border-radius: 4px;
        background: rgba(247, 248, 249, 1);
      }
      .box1-tab-box {
        height: 57px;
        width: 446px;
        margin: 0 auto;
        display: flex;
        .tab {
          margin-top: 18px;
          margin-right: 8px;
          padding: 0 8px;
          height: 28px;
          box-sizing: border-box;
          border: 1px solid rgba(230, 231, 232, 1);
          border-radius: 4px;
          background: rgba(255, 255, 255, 1);
          color: rgba(59, 65, 75, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 400;
          cursor: pointer;
          &:hover {
            background: var(--btn-active-bg-color);
            border: 1px solid var(--btn-active-border-color);
          }
        }
        .tabActive {
          color: var(--btn-active-text-color);
          background: var(--btn-active-bg-color);
          border: 1px solid var(--btn-active-border-color);
        }
      }
      .box1-list-box {
        height: 480px;
        width: 446px;
        margin: 0 auto;
        .box1-item {
          width: 446px;
          height: 48px;
          box-sizing: border-box;
          border-bottom: 1px solid rgba(234, 236, 238, 1);
          border-radius: 4px;
          display: flex;
          .id {
            width: 24px;
            height: 24px;
            margin-top: 12px;
            margin-left: 12px;
            border-radius: 12px;
            background: #e7f3ff;
            font-size: 14px;
            font-family: Microsoft YaHei;
            text-align: center;
            line-height: 24px;
            color: var(--color-main-active);
          }
          .title {
            margin-left: 10px;
            color: rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 48px;
          }
          .icon {
            width: 8px;
            height: 6px;
            margin-top: 14px;
            margin-left: 6px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .box1-footer {
        height: 65px;
        width: 446px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        .box1-footer-left {
          margin-top: 25px;
          height: 18px;
          color: rgba(95, 101, 108, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 18px;
        }
        .box1-footer-right {
          margin-top: 23px;
        }
      }
    }
  }
  .right {
    margin-left: 17px;
    margin-top: 16px;
    .box2 {
      width: 1103px;
      height: 415px;
      border-radius: 4px;
      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
      background: rgba(255, 255, 255, 1);
      .box2-main {
        margin: 0 auto;
        margin-top: 10px;
        height: 260px;
        width: 1054px;
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
        position: relative;
        padding-left: 120px;
        .box2-line-box {
          position: absolute;
          left: 0;
          top: 114px;
          height: 8px;
          width: 1556px;
          background: url("./assets/images/line-bg.png") repeat;
        }
        .box2-item {
          width: 300px;
          height: 120px;
          // background: pink;
          position: relative;
          box-sizing: border-box;
          padding-left: 13px;
          margin-left: -100px;
          border-left: 1px solid #0a57a6;
          .box2-item-header {
            display: flex;
            width: 240px;
            .title {
              color: rgba(10, 87, 166, 1);
              height: 26px;
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
            }
          }
          .box2-item-content {
            width: 210px;
            min-height: 48px;
            max-height: 96px;
            color: rgba(95, 101, 108, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            overflow: hidden;
          }
          .point {
            position: absolute;
            left: -8px;
            bottom: -7px;
            width: 15px;
            height: 15px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .pointFooter {
            position: absolute;
            left: -8px;
            top: -7px;
            width: 15px;
            height: 15px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .time {
            height: 24px;
            color: rgba(10, 87, 166, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
            position: absolute;
            bottom: -36px;
            left: 0;
          }
        }
        .box2ItemFooter {
          margin-top: 118px;
          margin-left: -120px;
          box-sizing: border-box;
          padding-top: 20px;
          // display: flex;
          // flex-direction: column;
          // justify-content: flex-end;
        }
      }
      .box2-footer {
        margin-top: 6px;
        width: 1057px;
        height: 64px;
        box-sizing: border-box;
        border: 1px rgba(231, 243, 255, 1);
        border-radius: 4px;
        background: rgba(246, 251, 255, 1);
        margin: 14px auto 0;
        padding: 6px 12px 6px 12px;
        display: flex;
        .footer-left {
          width: 19px;
          height: 20px;
          margin-top: 16px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .footer-center {
          margin-left: 13px;
          width: 964px;
          height: 48px;
          color: rgba(10, 87, 166, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
          display: flex;
          align-items: center;
        }
        .footer-right {
          margin-left: 13px;
          width: 24px;
          height: 24px;
          border-radius: 12px;
          background: rgba(231, 243, 255, 1);
          margin-top: 14px;
          img {
            margin: 6px;
            width: 12px;
            height: 12px;
          }
        }
      }
    }
    .box3 {
      margin-top: 15px;
      width: 1103px;
      height: 415px;
      border-radius: 4px;
      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
      background: rgba(255, 255, 255, 1);
      .box3-main {
        height: 264px;
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-left: 21px;
        margin-right: 26px;
        .box3-item {
          margin-top: 12px;
          width: 520px;
          height: 76px;
          box-sizing: border-box;
          border: 1px solid rgba(234, 236, 238, 1);
          border-radius: 4px;
          display: flex;
          .box3-item-left {
            width: 54px;
            height: 54px;
            border-radius: 27px;
            background: #e7f3ff;
            text-align: center;
            margin-top: 11px;
            margin-left: 14px;
            .text {
              width: 33px;
              height: 30px;
              color: rgba(10, 87, 166, 1);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-weight: 700;
              line-height: 18px;
              margin: 11px auto;
            }
          }
          .box3-item-right {
            margin-left: 8px;
            width: 433px;
            .right-top {
              display: flex;
              justify-content: space-between;
              .title {
                margin-top: 13px;
                height: 24px;
                color: rgba(59, 65, 75, 1);
                font-family: Microsoft YaHei;
                font-size: 18px;
                font-weight: 700;
                line-height: 24px;
              }
              .tag {
                margin-top: 11px;
                width: 72px;
                height: 24px;
                box-sizing: border-box;
                border: 1px solid rgba(255, 163, 158, 1);
                border-radius: 4px;
                background: rgba(255, 241, 240, 1);
                color: rgba(245, 34, 45, 1);
              }
            }
            .right-footer {
              margin-top: 2px;
              display: flex;
              justify-content: space-between;
              .content {
                height: 24px;
                color: rgba(95, 101, 108, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
                width: 353px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .time {
                height: 24px;
                color: rgba(95, 101, 108, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 400;
                width: 78px;
                line-height: 24px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      }
      .box3-footer {
        width: 1057px;
        height: 64px;
        box-sizing: border-box;
        border: 1px rgba(231, 243, 255, 1);
        border-radius: 4px;
        background: rgba(246, 251, 255, 1);
        margin: 14px auto 0;
        padding: 6px 12px 6px 12px;
        display: flex;
        .footer-left {
          width: 19px;
          height: 20px;
          margin-top: 16px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .footer-center {
          margin-left: 13px;
          width: 964px;
          height: 48px;
          color: rgba(10, 87, 166, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
          display: flex;
          align-items: center;
        }
        .footer-right {
          margin-left: 13px;
          width: 24px;
          height: 24px;
          border-radius: 12px;
          background: rgba(231, 243, 255, 1);
          margin-top: 14px;
          img {
            margin: 6px;
            width: 12px;
            height: 12px;
          }
        }
      }
    }
  }
}
</style>