<template>
  <div class="temp-wrap">
    <div class="left">
      <div class="box-header">
        <div class="box-header-left"></div>
        <div class="box-header-title">主要条款</div>
        <div class="box-header-btn-box">
          <!-- <div class="btn" @click="handleSelectBtn(1)">
            <el-button type="primary" plain v-if="btnActiveIndex === 1"
              >涉华条款</el-button
            >
            <el-button type="info" plain v-if="btnActiveIndex === 2"
              >涉华条款</el-button
            >
          </div>
          <div class="btn" @click="handleSelectBtn(2)">
            <el-button type="primary" plain v-if="btnActiveIndex === 2"
              >全部条款</el-button
            >
            <el-button type="info" plain v-if="btnActiveIndex === 1"
              >全部条款</el-button
            >
          </div> -->
        </div>
        <div class="box-header-icon">
          <img src="./assets/icons/header-icon.png" alt="" />
        </div>
      </div>
      <div class="left-top">
        <el-select
          v-model="curBill"
          placeholder="请选择"
          style="width: 240px"
          @change="handleChangeBill"
        >
          <el-option
            v-for="item in billList"
            :key="item.value"
            :label="item.label"
            :value="item.id"
          />
        </el-select>
        <el-checkbox
          style="margin-left: 30px"
          v-model="checkedValue"
          label="只看涉华条款"
          size="large"
        />
        <div class="search" style="width: 240px; margin-left: 475px">
          <el-input
            v-model="searchValue"
            style="width: 240px"
            placeholder="搜索条款"
          />
          <div class="icon">
            <img src="./assets/icons/search-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div class="left-main">
        <div
          class="left-main-item"
          v-for="(term, index) in mainTermsList"
          :key="index"
        >
          <div class="id">{{ index + 1 }}</div>
          <div class="info">
            <div class="title">
              <span style="color: #1677ff">{{ term.header }}</span>
              {{ term.title }}
            </div>
            <div class="content">
              <span style="color: #1677ff">{{ term.headerEn }}</span>
              {{ term.content }}
            </div>
          </div>
          <div class="tags-box">
            <div
              class="tag"
              v-for="(val, idx) in term.tags"
              :key="idx"
              :class="{
                tag1: val.status === 1,
                tag2: val.status === 2,
                tag3: val.status === 3,
                tag4: val.status === 4,
                tag5: val.status === 5,
                tag6: val.status === 6,
              }"
            >
              {{ val.name }}
            </div>
          </div>
          <div class="open">
            <img src="./assets/icons/open-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div class="left-footer">
        <div class="left-footer-text">
          {{ "共96条涉华条款" }}
        </div>
        <div class="left-footer-right">
          <el-pagination background layout="prev, pager, next" :total="96" />
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-box1">
        <div class="box-header">
          <div class="box-header-left"></div>
          <div class="box-header-title">限制方式</div>
          <div class="box-header-icon">
            <img src="./assets/icons/header-icon.png" alt="" />
          </div>
        </div>
        <div class="right-box1-main" id="chart1"></div>
        <div class="right-box1-footer">
          <div class="right-box1-footer-left">
            <img src="./assets/icons/right-icon1.png" alt="" />
          </div>
          <div class="right-box1-footer-center">
            通过关税壁垒、技术脱钩、新能源打压、地缘捆绑遏制中国产业链发展
          </div>
          <div class="right-box1-footer-right">
            <img src="./assets/icons/arrow-right.png" alt="" />
          </div>
        </div>
      </div>
      <div class="right-box2">
        <div class="box-header">
          <div class="box-header-left"></div>
          <div class="box-header-title">涉及行业</div>
          <div class="box-header-icon">
            <img src="./assets/icons/header-icon.png" alt="" />
          </div>
        </div>
        <div class="right-box2-main" id="chart2"></div>
        <div class="right-box2-footer">
          <div class="right-box2-footer-left">
            <img src="./assets/icons/right-icon1.png" alt="" />
          </div>
          <div class="right-box2-footer-center">
            系统性挤压中国新能源、跨境电商及高端制造的在美生存空间。
          </div>
          <div class="right-box2-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 getPieChart from "./utils/piechart";
import {
  getBillContentId,
  getBillContentTk,
  getBillContentXzfs,
  getBillHyly,
} from "@/api/bill";

const curBill = ref("");
const curBillId = ref(null);
const billList = ref([
  {
    value: "公法（2025年7月4日）",
    label: "公法（2025年7月4日）",
  },
  {
    value: "公法（2025年7月8日）",
    label: "公法（2025年7月8日）",
  },
]);

const mainTermsList = ref([
  {
    id: 1,
    title:
      "废除价值800美元以下进口包裹的免税政策，改为征收30%关税或每件25-50美元费用。",
    header: "第51255条",
    headerEn: "Sec.51225",
    content: "Elimination of De Minimis Rule for imports valued below $800.",
    tags: [
      {
        name: "关税",
        status: 2,
      },
      {
        name: "跨境电商",
        status: 1,
      },
    ],
  },
  {
    id: 2,
    title: "对所有进口商品加征10%关税。",
    header: "第51255条",
    headerEn: "Sec.51225",
    content: "Imposing a 10% baseline tariff on all imported goods.",
    tags: [
      {
        name: "关税",
        status: 2,
      },
    ],
  },
  {
    id: 3,
    title:
      "第50404条：若美企与中企签订超100万美元技术许可协议，将丧失政府补贴资格。",
    header: "第51255条",
    headerEn: "Sec.51225",
    content:
      "Sec. 50404. If the taxpayer has entered into any technology licensing agreement with a FEOC exceeding $1,000,000...",
    tags: [
      {
        name: "技术封锁",
        status: 6,
      },
    ],
  },
  {
    id: 4,
    title: "第4502条：2025年9月30日后终止电动汽车消费者税收抵免。",
    header: "第51255条",
    headerEn: "Sec.51225",
    content:
      "Sec.4502. Termination of electric vehicle consumer tax credits after September 30, 2025.",
    tags: [
      {
        name: "税收",
        status: 2,
      },
      {
        name: "新能源",
        status: 1,
      },
    ],
  },
  {
    id: 5,
    title: "2026年1月1日起对使用进口组件的光伏项目征收15%消费税。",
    header: "第51255条",
    headerEn: "Sec.51225",
    content:
      "Imposition of 15% excise tax on solar projects using imported components after January 1, 2026.",
    tags: [
      {
        name: "供应链打压",
        status: 3,
      },
      {
        name: "光伏",
        status: 1,
      },
    ],
  },
  {
    id: 6,
    title:
      "若风电/光伏项目中受关注外国实体（FEOC）组件成本占比超标（如2026年太阳能为40%），则取消税收抵免。",
    header: "第51255条",
    headerEn: "Sec.51225",
    content:
      "Prohibiting tax credits for wind/solar projects if components from Foreign Entities of Concern (FEOC) exceed cost ratios ...",
    tags: [
      {
        name: "供应链打压",
        status: 3,
      },
      {
        name: "光伏",
        status: 1,
      },
    ],
  },
  {
    id: 7,
    title:
      "第50401条：2025年起，若电池中关键矿物由受关注外国实体（FEOC）提取、加工或回收，则该车辆无法享受税收抵免。",
    header: "第51255条",
    headerEn: "Sec.51225",
    content:
      "Sec. 50401. No tax credit shall be allowed for any vehicle placed in service after December 31, 2024, if any of the...",
    tags: [
      {
        name: "供应链打压",
        status: 3,
      },
      {
        name: "新能源",
        status: 1,
      },
    ],
  },
  {
    id: 8,
    title:
      "Sec. 50401. No tax credit shall be allowed for any vehicle placed in service after December 31, 2024, if any of the...",
    header: "第51255条",
    headerEn: "Sec.51225",
    content:
      "Sec. 50405. No credit shall be allowed under this chapter to any entity in which a foreign adversary holds 25% or more ...",
    tags: [
      {
        name: "新能源",
        status: 1,
      },
    ],
  },
  {
    id: 9,
    title:
      "第4501条：芯片企业税收抵免提至35%，但禁止在中国大陆扩大先进制程生产。",
    header: "第51255条",
    headerEn: "Sec.51225",
    content:
      "Sec. 4501. The advanced manufacturing investment credit under section 48D shall be increased to 35%, provided that ...",
    tags: [
      {
        name: "技术封锁",
        status: 5,
      },
      {
        name: "半导体",
        status: 4,
      },
    ],
  },
  {
    id: 10,
    title: "第20013条：授权拨款5亿美元用于向台湾提供防御物资、训练及其他服务。",
    content:
      "Sec. 20013. $500,000,000 is authorized to be appropriated for the provision of defense articles, training, and other ...",
    header: "第51255条",
    headerEn: "Sec.51225",
    tags: [
      {
        name: "拨款",
        status: 2,
      },
      {
        name: "军工",
        status: 6,
      },
    ],
  },
]);
const btnActiveIndex = ref(1);
const handleSelectBtn = (index) => {
  btnActiveIndex.value = index;
};

const chart1Data = ref([
  { name: "出口管制", value: 24 },
  { name: "金融制裁", value: 30 },
  { name: "资本管制", value: 31 },
  { name: "对台军售", value: 32 },
  { name: "关税贸易", value: 50 },
  { name: "技术封锁", value: 46 },
  { name: "供应链打压", value: 40 },
]);
const chart1ColorList = ref([
  "#4096ff",
  "#b37feb",
  "#ff7875",
  "#85a5ff",
  "#69b1ff",
  "#ffc069",
  "#87e8de",
]);

const chart2ColorList = ref([
  "#ff7875",
  "#85a5ff",
  "#95de64",
  "#ffc069",
  "#85e5db",
]);

const chart2Data = ref([
  // { name: "军工", value: 85 },
  // { name: "金融业", value: 98 },
  // { name: "新能源", value: 95 },
  // { name: "半导体", value: 80 },
  // { name: "跨境电商", value: 71 },
]);

// 绘制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 handleChangeBill = (val) => {
  curBillId.value = val;
};

// 获取法案id列表
const handleGetBillList = async () => {
  const params = {
    id: window.sessionStorage.getItem('billId'),
  };
  try {
    const res = await getBillContentId(params);
    console.log("法案id列表", res);
    billList.value = res.data.map((item) => {
      return {
        label: item.bbmc,
        value: item.bbmc,
        id: item.ywid,
      };
    });
    curBill.value = billList.value[0].label;
    curBillId.value = billList.value[0].id;
  } catch (error) {}
};

// 根据原文ID获取条款列表
const handleGetBillContentTk = async (cRelated) => {
  const params = {
    id: curBillId.value,
    cRelated: cRelated,
    currentPage: 0,
    pageSize: 10,
  };
  try {
    const res = await getBillContentTk(params);
    console.log("条款内容", res);
  } catch (error) {}
};

// 获取限制方式列表
const handleGetBillContentXzfs = async () => {
  const params = {
    id: window.sessionStorage.getItem('billId'),
  };

  try {
    const res = await getBillContentXzfs(params);
    console.log("限制方式", res);
    chart1Data.value = res.data.map((item) => {
      return {
        name: item.xzfsmc,
        value: item.countTk,
      };
    });
  } catch (error) {}
};

// 行业领域
const handleGetBillHyly = async () => {
  const params = {
    id: window.sessionStorage.getItem('billId'),
  };

  try {
    const res = await getBillHyly(params);
    console.log("行业领域", res.data);
    chart2Data.value = res.data.map(item => {
      return {
        name: item.hylymc,
        value: item.countTk,
      };
    });
    console.log('chart2Data', chart2Data.value);
    
    let chart2 = getPieChart(chart2Data.value, chart2ColorList.value);
    setChart(chart2, "chart2");
  } catch (error) {}
};

onMounted(async () => {
  await handleGetBillList();
  handleGetBillContentTk(false);
  await handleGetBillContentXzfs();
  await handleGetBillHyly();
  let chart1 = getPieChart(chart1Data.value, chart1ColorList.value);
  setChart(chart1, "chart1");
});
</script>

<style lang="scss" scoped>
.temp-wrap {
  display: flex;
  .box-header {
    display: flex;
    position: relative;
    height: 50px;
    .box-header-left {
      margin-top: 20px;
      width: 8px;
      height: 16px;
      border-radius: 0 4px 4px 0;
      background: rgba(22, 119, 255, 1);
    }
    .box-header-title {
      margin-left: 22px;
      margin-top: 20px;
      height: 16px;
      color: rgba(22, 119, 255, 1);
      font-family: Microsoft YaHei;
      font-size: 16px;
      font-weight: 600;
      line-height: 16px;
      letter-spacing: 0px;
      text-align: left;
    }
    .box-header-btn-box {
      position: absolute;
      top: 14px;
      right: 52px;
      display: flex;
      justify-content: flex-end;
      .btn {
        margin-left: 8px;
        padding: 0;
      }
    }
    .box-header-icon {
      position: absolute;
      top: 14px;
      right: 12px;
      width: 32px;
      height: 32px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .left {
    margin-top: 16px;
    width: 1150px;
    height: 845px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 1);
    .left-top {
      height: 45px;
      margin-top: 2px;
      margin-left: 22px;
      margin-right: 24px;
      display: flex;
      .search {
        position: relative;
        .icon {
          position: absolute;
          right: 10px;
          top: 5px;
          width: 16px;
          height: 16px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .left-main {
      .left-main-item {
        margin-left: 22px;
        width: 1104px;
        height: 65px;
        box-sizing: border-box;
        border-radius: 2px;
        background: rgba(255, 255, 255, 1);
        display: flex;
        .id {
          margin-top: 20px;
          margin-left: 15px;
          width: 24px;
          height: 24px;
          border-radius: 12px;
          background: rgba(231, 241, 255);
          color: #1677ff;
          font-size: 12px;
          text-align: center;
          line-height: 24px;
        }
        .info {
          margin-left: 13px;
          margin-top: 15px;
          width: 813px;
          .title {
            height: 14px;
            color: rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 14px;
            font-weight: 600;
            line-height: 14px;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .content {
            margin-top: 6px;
            height: 14px;
            color: rgba(132, 136, 142, 1);
            font-family: Microsoft YaHei;
            font-size: 14px;
            font-weight: 400;
            line-height: 14px;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .tags-box {
          margin-left: 20px;
          margin-top: 21px;
          width: 160px;
          height: 22px;
          display: flex;
          justify-content: flex-end;
          .tag {
            height: 18px;
            line-height: 18px;
            padding: 1px 8px 1px 8px;
            border-radius: 4px;
            margin-left: 5px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-size: 14px;
            font-weight: 400;
          }
          .tag1 {
            border: 1px solid rgba(217, 247, 190, 1);
            background: rgba(246, 255, 237, 1);
            color: rgba(82, 196, 26, 1);
          }
          .tag2 {
            border: 1px solid rgba(186, 224, 255, 1);
            background: rgba(230, 244, 255, 1);
            color: rgba(22, 119, 255, 1);
          }
          .tag3 {
            border: 1px solid rgba(135, 232, 222, 1);
            background: rgba(230, 255, 251, 1);
            color: rgba(19, 168, 168, 1);
          }
          .tag4 {
            border: 1px solid rgba(211, 173, 247, 1);
            background: rgba(249, 240, 255, 1);
            color: rgba(114, 46, 209, 1);
          }
          .tag5 {
            border: 1px solid rgba(255, 229, 143, 1);
            background: rgba(255, 251, 230, 1);
            color: rgba(250, 173, 20, 1);
          }
          .tag6 {
            border: 1px solid rgba(255, 163, 158, 1);
            background: rgba(255, 241, 240, 1);
            color: rgba(245, 34, 45, 1);
          }
        }
        .open {
          margin-left: 10px;
          margin-top: 22px;
          width: 20px;
          height: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .left-main-item:nth-child(2n-1) {
        background: rgba(249, 250, 252, 1);
      }
    }
    .left-footer {
      margin: 30px;
      height: 30px;
      display: flex;
      justify-content: space-between;
      .left-footer-text {
        margin-top: 6px;
        height: 18px;
        color: rgba(132, 136, 142, 1);
        font-family: Microsoft YaHei;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: 0px;
        text-align: left;
      }
    }
  }
  .right {
    margin-top: 16px;
    margin-left: 16px;
    .right-box1 {
      width: 576px;
      height: 415px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 1);
      .right-box1-main {
        width: 576px;
        height: 310px;
      }
      .right-box1-footer {
        width: 549px;
        height: 40px;
        display: flex;
        border: 1px solid rgba(231, 241, 255, 1);
        border-radius: 4px;
        background: rgba(246, 251, 255, 1);
        margin-left: 13px;
        .right-box1-footer-left {
          margin-top: 10px;
          margin-left: 12px;
          width: 19px;
          height: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right-box1-footer-center {
          margin-left: 13px;
          margin-top: 8px;
          width: 456px;
          height: 24px;
          color: rgba(22, 119, 255, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 24px;
        }
        .right-box1-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%;
          }
        }
      }
    }
    .right-box2 {
      margin-top: 15px;
      width: 576px;
      height: 415px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 1);
      .right-box2-main {
        width: 576px;
        height: 310px;
      }
      .right-box2-footer {
        width: 549px;
        height: 40px;
        display: flex;
        border: 1px solid rgba(231, 241, 255, 1);
        border-radius: 4px;
        background: rgba(246, 251, 255, 1);
        margin-left: 13px;
        .right-box2-footer-left {
          margin-top: 10px;
          margin-left: 12px;
          width: 19px;
          height: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right-box2-footer-center {
          margin-left: 13px;
          margin-top: 8px;
          width: 456px;
          height: 24px;
          color: rgba(22, 119, 255, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 24px;
        }
        .right-box2-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%;
          }
        }
      }
    }
  }
}

:deep(.el-checkbox__label) {
  font-size: 16px !important;
}
</style>
