<template>
  <div class="industry-wrap">
    <div class="left">
      <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="left-top" id="chart1"></div>
      <div class="left-center">
        <div class="left-center-btn-box">
          <div
            class="left-center-btn"
            :class="{ btnActive: box1BtnActive === index }"
            v-for="(item, index) in industryList"
            :key="index"
            @click="handleClickBox1Btn(item, index)"
          >
            {{ item.hylymc }}
          </div>
        </div>
      </div>
      <div class="left-footer">
        <div
          class="item"
          :class="{ itemActive: companyActiveIndex === idx }"
          @click="handleClickCompany(idx)"
          v-for="(val, idx) in companyList"
          :key="idx"
        >
          <div class="id">{{ idx + 1 }}</div>
          <div
            class="title"
            :class="{ titleActive: companyActiveIndex === idx }"
          >
            {{ val.name }}
          </div>
          <div class="icon">
            <img v-if="val.status === 'up'" :src="upIcon" alt="" />
            <img v-if="val.status === 'down'" :src="downIcon" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <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="right-main">
        <div class="right-main-content" id="chartGraph">
          <div class="right-main-content-header">
            <div class="header-item1">
              <div class="header-item1-top">{{ "基础支撑" }}</div>
              <div class="header-item1-bottom">
                <div class="icon">
                  <img src="./assets/images/warning.png" alt="" />
                </div>
                <div class="text">
                  {{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
                </div>
              </div>
            </div>
            <div class="header-item2">
              <div class="header-item2-top">{{ "软件算法" }}</div>
              <div class="header-item2-bottom">
                <div class="icon">
                  <img src="./assets/images/warning.png" alt="" />
                </div>
                <div class="text">
                  {{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
                </div>
              </div>
            </div>
            <div class="header-item3">
              <div class="header-item3-top">{{ "行业应用" }}</div>
              <div class="header-item3-bottom">
                <div class="icon">
                  <img src="./assets/images/warning.png" alt="" />
                </div>
                <div class="text">
                  {{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
                </div>
              </div>
            </div>
          </div>
          <div class="right-main-content-main">
            <Fishbone />
          </div>
        </div>
        <div class="box-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 class="company-dialog" v-if="isShowCompanyDialog">
        <div class="dialog-header">
          <div class="logo">
            <img :src="companyInfo.logo" alt="" />
          </div>
          <div class="company-title">{{ companyInfo.name }}</div>
          <div class="status-icon">
            <img v-if="companyInfo.status === 'up'" :src="upIcon" alt="" />
            <img v-if="companyInfo.status === 'down'" :src="downIcon" alt="" />
          </div>
          <div class="status-rate">
            {{ companyInfo.changeRate + "%" }}
          </div>
          <div class="close" @click="isShowCompanyDialog = false">
            <img :src="closeIcon" alt="" />
          </div>
        </div>
        <div class="dialog-main">
          <div class="dialog-box1">
            <div class="dialog-box1-header">
              <div class="icon">
                <img :src="companyInfo.data1.icon" alt="" />
              </div>
              <div class="dialog-box1-title">{{ companyInfo.data1.title }}</div>
            </div>
            <div class="dialog-box1-main">
              <div
                class="item"
                v-for="(val, idx) in companyInfo.data1.list"
                :key="idx"
              >
                <div class="item-left">
                  <!-- <img :src="uncheckIcon" alt=""> -->
                  <img :src="checkedIcon" alt="" />
                </div>
                <div class="item-right">{{ val }}</div>
              </div>
            </div>
          </div>
          <div class="dialog-box2">
            <div class="dialog-box2-header">
              <div class="icon">
                <img :src="companyInfo.data2.icon" alt="" />
              </div>
              <div class="dialog-box2-title">{{ companyInfo.data2.title }}</div>
            </div>
            <div class="dialog-box2-main" id="chart2"></div>
          </div>
          <div class="dialog-box3">
            <div class="dialog-box3-header">
              <div class="icon">
                <img :src="companyInfo.data3.icon" alt="" />
              </div>
              <div class="dialog-box3-title">{{ companyInfo.data3.title }}</div>
            </div>
            <div class="dialog-box3-main" id="chart3"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import { getCompanyList, getIndustryHyly, getHylyList } from "@/api/influence";
import getBarChart from "./utils/barChart";
import getLineChart from "./utils/lineChart";
import getBarChart1 from "./utils/barChart1";
import getGraph from "./utils/graph";

import downIcon from "./assets/images/down.png";
import upIcon from "./assets/images/up.png";
import CompanyLogo from "./assets/images/company-logo.png";
import icon1 from "./assets/images/icon1.png";
import icon2 from "./assets/images/icon2.png";
import icon3 from "./assets/images/icon3.png";
import uncheckIcon from "./assets/images/uncheck.png";
import checkedIcon from "./assets/images/checked.png";
import closeIcon from "./assets/images/close.png";

import Fishbone from "./components/fishbone.vue";

const isShowCompanyDialog = ref(false);

const box1BtnActive = ref(0);

const handleClickBox1Btn = (industry, index) => {
  box1BtnActive.value = index;
  curHylyId.value = industry.hylyid;
  handleGetCompanyListById();
};

// 绘制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({
  // name: ["新能源", "半导体", "跨境电商", "金融业", "军工", "贸易"],
  // value: [109, 95, 79, 25, 21, 50],
});

const industryActiveIndex = ref(0);
const companyActiveIndex = ref(0);

const handleClickCompany = (index) => {
  companyActiveIndex.value = index;
  isShowCompanyDialog.value = true;

  setTimeout(() => {
    const chart2Data = {
      dataX: [
        "2025-01",
        "2025-02",
        "2025-03",
        "2025-04",
        "2025-05",
        "2025-06",
        "2025-07",
        "2025-08",
      ],
      dataY: [1.2, 1.5, 1.4, 1.8, 1.3, 1.5, 1.6, 1.4],
    };

    let chart2 = getLineChart(chart2Data.dataX, chart2Data.dataY);
    setChart(chart2, "chart2");

    const chart3Data = {
      name: [
        "2023Q3",
        "2023Q4",
        "2024Q1",
        "2024Q2",
        "2024Q3",
        "2024Q4",
        "2025Q1",
        "2025Q2",
      ],
      value: [49, 53, 52, 54, 52, 50, 51, 54],
    };

    let chart3 = getBarChart1(chart3Data.name, chart3Data.value);
    setChart(chart3, "chart3");
  }, 100);
};

const companyList = ref([]);

const industryList = ref([
  //  {
  //     "id": 1,
  //     "hylyid": "0100",
  //     "hylymc": "风电"
  //   }
]);

const companyInfo = ref({
  logo: CompanyLogo,
  name: "宁德时代新能源科技股份有限公司",
  status: "down",
  changeRate: 0.16,
  data1: {
    icon: icon1,
    title: "影响条款",
    list: [
      "严格限制外国敏感实体（FEOC）参与补贴",
      "取消电动汽车补贴（2025年底生效）",
      "任何实体若与被禁止外国实体签订超100万美元的关键技术许可协议，则不得向其提供联邦补贴",
    ],
  },
  data2: {
    icon: icon2,
    title: "融资情况",
    data: {
      time: ["2025-06", "2025-07", "2025-08"],
      value: [1.12, 1.42, 1.5],
    },
  },
  data3: {
    icon: icon3,
    title: "研发投入",
    data: {
      time: [
        "2023Q3",
        "2023Q4",
        "2024Q1",
        "2024Q2",
        "2024Q3",
        "2024Q4",
        "2025Q1",
        "2025Q2",
      ],
      value: [50, 53, 52, 54, 58, 60, 51, 56, 64],
    },
  },
});

// 获取行业领域列表
const handleGetHylyList = async () => {
  try {
    const res = await getHylyList();
    console.log("行业领域字典列表", res);
    industryList.value = res.data;
    curHylyId.value = res.data[0].hylyid;
  } catch (error) {}
};

const curHylyId = ref("");

// 根据行业领域id获取公司列表
const handleGetCompanyListById = async () => {
  const params = {
    id: curHylyId.value,
  };
  try {
    const res = await getCompanyList(params);
    // console.log('根据行业id获取公司里列表', res);
    if (res.code === 200 && res.data.length) {
      companyList.value = res.data;
    } else {
      companyList.value = [];
    }
  } catch (error) {}
};

// 根据法案ID 获取行业领域统计
const handleGetIndustryHyly = async () => {
  const params = {
    id: 1,
  };
  try {
    const res = await getIndustryHyly(params);
    // console.log('行业领域统计', res);
    chart1Data.value.name = res.data.map((item) => {
      return item.hylyName;
    });
    chart1Data.value.value = res.data.map((item) => {
      return item.companyNum;
    });
  } catch (error) {}
};

onMounted(async () => {
  await handleGetHylyList();
  handleGetCompanyListById();
  await handleGetIndustryHyly();
  let chart1 = getBarChart(chart1Data.value.name, chart1Data.value.value);
  setChart(chart1, "chart1");
});
</script>

<style lang="scss" scoped>
.industry-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: 22px;
      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-right {
      position: absolute;
      top: 14px;
      right: 12px;
      width: 32px;
      height: 32px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .left {
    margin-top: 16px;
    width: 480px;
    height: 848px;
    background: rgba(255, 255, 255);
    border-radius: 4px;
    .left-top {
      margin: 0 auto;
      width: 446px;
      height: 200px;
      box-sizing: border-box;
      border: 1px solid rgba(231, 241, 255, 1);
      border-radius: 4px;
      background: linear-gradient(
        180deg,
        rgba(246, 251, 255, 1),
        rgba(246, 251, 255, 0) 100%
      );
    }
    .left-center {
      margin-top: 12px;
      height: 56px;
      margin-left: 17px;
      overflow-x: hidden;
      width: 445px;
      .left-center-btn-box {
        width: 1000px;
        margin-top: 10px;
        height: 28px;
        display: flex;
        flex-wrap: nowrap;
        .left-center-btn {
          margin-right: 4px;
          height: 28px;
          width: 60px;
          text-align: center;
          padding: 0 5px;
          box-sizing: border-box;
          border-radius: 4px;
          border: 1px solid var(--btn-plain-border-color);
          background: var(--btn-plain-bg-color);
          color: var(--btn-plain-text-color);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 28px;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .btnActive {
          border: 1px solid var(--btn-active-border-color);
          background: var(--btn-active-bg-color);
          color: var(--btn-active-text-color);
        }
      }
    }
    .left-footer {
      margin: 0 auto;
      margin-top: 5px;
      width: 446px;
      height: 520px;
      overflow: auto;
      .item {
        width: 100%;
        height: 40px;
        border-radius: 4px;
        border-bottom: 1px solid rgba(243, 243, 244, 1);
        display: flex;
        cursor: pointer;
        &:hover {
          background: rgba(246, 251, 255, 1);
        }
        .id {
          margin-left: 12px;
          margin-top: 8px;
          width: 24px;
          height: 24px;
          border-radius: 12px;
          background: rgba(231, 241, 255);
          text-align: center;
          line-height: 24px;
          color: rgba(95, 101, 108, 1);
          font-family: Microsoft YaHei;
          font-size: 12px;
          font-weight: 400;
        }
        .title {
          margin-top: 9px;
          margin-left: 10px;
          height: 22px;
          color: rgba(95, 101, 108, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 600;
          line-height: 22px;
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .icon {
          margin-left: 7px;
          margin-top: 6px;
          width: 8px;
          height: 6px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .itemActive {
        background: rgba(246, 251, 255, 1);
      }
      .titleActive {
        color: rgba(22, 119, 255, 1) !important;
      }
    }
  }
  .right {
    margin-top: 16px;
    margin-left: 16px;
    width: 1247px;
    height: 847px;
    background: rgba(255, 255, 255);
    border-radius: 4px;
    position: relative;
    .company-dialog {
      position: absolute;
      z-index: 9999999;
      right: 33px;
      top: 55px;
      width: 480px;
      height: 723px;
      box-sizing: border-box;
      border: 1px solid rgba(230, 231, 232, 1);
      border-radius: 4px;
      background: rgba(255, 255, 255, 1);
      .dialog-header {
        height: 54px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(243, 243, 244, 1);
        display: flex;
        position: relative;
        .logo {
          width: 48px;
          height: 48px;
          margin-left: 18px;
          margin-top: 3px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .company-title {
          margin-left: 16px;
          margin-top: 16px;
          height: 22px;
          color: rgba(59, 65, 75, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 600;
          line-height: 22px;
        }
        .status-icon {
          margin-left: 12px;
          margin-top: 12px;
          width: 8px;
          height: 6px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .status-rate {
          width: 41px;
          margin-left: 4px;
          margin-top: 16px;
          height: 22px;
          color: rgba(92, 181, 48, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
        }
        .close {
          position: absolute;
          right: 15px;
          top: 19px;
          width: 16px;
          height: 16px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .dialog-main {
        margin-top: 13px;
        .dialog-box1 {
          .dialog-box1-header {
            margin-top: 10px;
            display: flex;
            .icon {
              margin-left: 16px;
              width: 18px;
              height: 18px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .dialog-box1-title {
              margin-top: 2px;
              margin-left: 6px;
              height: 14px;
              color: rgba(95, 101, 108, 1);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-weight: 600;
              line-height: 14px;
              text-align: left;
            }
          }
          .dialog-box1-main {
            margin-top: 4px;
            margin-left: 18px;
            .item {
              display: flex;
              .item-left {
                margin-top: 13px;
                width: 14px;
                height: 14px;
                border-radius: 4px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .item-right {
                margin-top: 8px;
                margin-left: 9px;
                width: 420px;
                height: 22px;
                color: rgba(132, 136, 142, 1);
                font-family: Microsoft YaHei;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
              }
            }
          }
        }
        .dialog-box2 {
          margin-left: 16px;
          margin-top: 50px;
          .dialog-box2-header {
            margin-top: 10px;
            display: flex;
            .icon {
              margin-left: 16px;
              width: 18px;
              height: 18px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .dialog-box2-title {
              margin-top: 2px;
              margin-left: 6px;
              height: 14px;
              color: rgba(95, 101, 108, 1);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-weight: 600;
              line-height: 14px;
              text-align: left;
            }
          }
          .dialog-box2-main {
            margin-top: 16px;
            width: 446px;
            height: 180px;
            box-sizing: border-box;
            border: 1px solid rgba(231, 241, 255, 1);
            border-radius: 4px;
            background: linear-gradient(
              180deg,
              rgba(246, 251, 255, 1),
              rgba(246, 251, 255, 0) 100%
            );
          }
        }
        .dialog-box3 {
          margin-top: 16px;
          margin-left: 16px;
          .dialog-box3-header {
            margin-top: 10px;
            display: flex;
            .icon {
              margin-left: 16px;
              width: 18px;
              height: 18px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .dialog-box3-title {
              margin-top: 2px;
              margin-left: 6px;
              height: 14px;
              color: rgba(95, 101, 108, 1);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-weight: 600;
              line-height: 14px;
              text-align: left;
            }
          }
          .dialog-box3-main {
            margin-top: 16px;
            width: 446px;
            height: 180px;
            box-sizing: border-box;
            border: 1px solid rgba(231, 241, 255, 1);
            border-radius: 4px;
            background: linear-gradient(
              180deg,
              rgba(246, 251, 255, 1),
              rgba(255, 255, 255, 0) 100%
            );
          }
        }
      }
    }

    .right-main {
      width: 1218px;
      height: 784px;
      margin: 5px auto;
      .right-main-content {
        width: 1150px;
        height: 720px;
        margin: 4px 0 10px;
        .right-main-content-header {
          height: 84px;
          margin-left: 14px;
          margin-top: 16px;
          // background: orange;
          display: flex;
          .header-item1 {
            width: 408px;
            .header-item1-top {
              position: relative;
              z-index: 3;
              height: 28px;
              text-align: center;
              line-height: 28px;
              background: url("./assets/images/bg3.png");
              background-size: 100% 100%;
              color: rgba(22, 119, 255, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 28px;
            }
            .header-item1-bottom {
              display: flex;
              justify-content: center;
              .icon {
                margin-top: 9px;
                width: 16px;
                height: 16px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .text {
                margin-top: 7px;
                margin-left: 8px;
                height: 22px;
                color: rgba(206, 79, 81, 1);
                font-family: Microsoft YaHei;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
              }
            }
          }
          .header-item2 {
            margin-left: -8px;
            width: 408px;
            .header-item2-top {
              position: relative;
              z-index: 2;
              height: 28px;
              text-align: center;
              line-height: 28px;
              background: url("./assets/images/bg2.png");
              background-size: 100% 100%;
              color: rgba(19, 168, 168, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 28px;
            }
            .header-item2-bottom {
              display: flex;
              justify-content: center;
              .icon {
                margin-top: 9px;
                width: 16px;
                height: 16px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .text {
                margin-top: 7px;
                margin-left: 8px;
                height: 22px;
                color: rgba(206, 79, 81, 1);
                font-family: Microsoft YaHei;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
              }
            }
          }
          .header-item3 {
            margin-left: -8px;
            width: 408px;
            .header-item3-top {
              position: relative;
              z-index: 1;
              height: 28px;
              text-align: center;
              line-height: 28px;
              background: url("./assets/images/bg1.png");
              background-size: 100% 100%;
              color: rgba(146, 84, 222, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 28px;
            }
            .header-item3-bottom {
              display: flex;
              justify-content: center;
              .icon {
                margin-top: 9px;
                width: 16px;
                height: 16px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .text {
                margin-top: 7px;
                margin-left: 8px;
                height: 22px;
                color: rgba(206, 79, 81, 1);
                font-family: Microsoft YaHei;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
              }
            }
          }
        }
        .right-main-content-main {
          height: 600px;
          margin-top: 20px;
        }
        // background: orange;
      }
      .box-footer {
        width: 1218px;
        height: 40px;
        display: flex;
        box-sizing: border-box;
        margin: 0 auto;
        margin-top: 6px;
        background: rgba(246, 251, 255, 1);
        .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: 1119px;
          height: 24px;
          color: var(--color-main-active);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 24px;
        }
        .box-footer-right {
          margin-left: 13px;
          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>
