<template>
  <div class="wrap">
    <el-row>
      <CardCustom
        @more-click="moreClick"
        title="风险信号"
        :style="{ width: '986px', height: '540px' }"
        title-background-color="rgba(206, 79, 81, 1)"
      >
        <template #icon>
          <div class="icon icon1"></div>
        </template>
      </CardCustom>
      <CardCustom
        @more-click="moreClick"
        title="安全速递"
        :style="{ width: '600px', height: '540px', marginLeft: '14px' }"
        title-background-color="rgba(206, 79, 81, 1)"
      >
        <template #icon>
          <div class="icon icon1"></div>
        </template>
        <div
          class="item"
          v-for="(item, index) in securityExpressList"
          :key="index"
        >
          <span class="itemLevel" :class="levelMap[item.level].class">
            {{ levelMap[item.level].text }}
          </span>
          <div class="itemText">{{ item.title }}</div>
          <span class="itemTime">{{ item.time }}</span>
          <span
            class="itemFlag"
            :style="{ backgroundImage: 'url(' + item.flag + ')' }"
          ></span>
        </div>
      </CardCustom>
    </el-row>
    <el-card class="gap">
      <el-row>
        <PieProgress v-for="item in List" :data="item" />
      </el-row>
    </el-card>
    <el-row class="gap">
      <CardCustom
        @more-click="moreClick"
        title="科技动态"
        :style="{ width: '792px', height: '360px' }"
        title-background-color="rgba(10, 87, 166, 1)"
        line-color="rgba(10, 87, 166, 1)"
      >
        <template #icon>
          <div class="icon icon2"></div>
        </template>
        <div
          class="itemTrends"
          v-for="(item, index) in trendsList"
          :key="index"
        >
          <span class="itemTrendsIcon"> </span>
          <div class="itemTrendsText">{{ item.title }}</div>
          <span class="itemTrendsTime">{{ item.time }}</span>
        </div>
      </CardCustom>
      <CardCustom
        @more-click="moreClick"
        title="科技政策"
        :style="{ width: '792px', height: '360px', marginLeft: '16px' }"
        title-background-color="rgba(10, 87, 166, 1)"
        line-color="rgba(10, 87, 166, 1)"
      >
        <template #icon>
          <div class="icon icon3"></div>
        </template>
        <div
          class="itemTrends"
          v-for="(item, index) in policyList"
          :key="index"
        >
          <span class="itemTrendsIcon"> </span>
          <div class="itemTrendsText">{{ item.title }}</div>
          <span class="itemTrendsTime">{{ item.time }}</span>
        </div>
      </CardCustom>
    </el-row>
    <div class="gap">
      <el-row class="cardContainer">
        <div class="itemCard">
          <span class="itemCardIcon itemCardIcon1"></span>
          <div class="itemCardTitle">业务协同</div>
        </div>
        <div class="itemCard">
          <span class="itemCardIcon itemCardIcon2"></span>
          <div class="itemCardTitle">专题研判</div>
        </div>
        <div class="itemCard">
          <span class="itemCardIcon itemCardIcon3"></span>
          <div class="itemCardTitle">数据直报</div>
        </div>
        <div class="itemCard">
          <span class="itemCardIcon itemCardIcon4"></span>
          <div class="itemCardTitle">专家库</div>
        </div>
      </el-row>
    </div>
    <el-row class="gap">
      <CardCustom
        @more-click="moreClick"
        title="最新报告"
        :style="{ width: '1600px', height: '360px' }"
        title-background-color="rgba(10, 87, 166, 1)"
        line-color="rgba(10, 87, 166, 1)"
      >
        <template #icon>
          <div class="icon icon4"></div>
        </template>
        <template #right>
          <div class="moreWrap">
            <el-button text @click="moreClick" :style="{ marginLeft: '515px' }">
              <span class="moreText">更多</span>
              <el-icon :size="14"> <Plus /> </el-icon>
            </el-button>
            <el-button text @click="moreClick">
              <span class="moreText">换一批</span>
              <span class="shuaxinIcon"></span>
            </el-button>
          </div>
        </template>
        <el-row>
          <div :style="{ width: '750px' }">
            <div
              class="itemTrends"
              v-for="(item, index) in policyList"
              :key="index"
            >
              <span class="itemTrendsIcon"> </span>
              <div class="itemTrendsText">{{ item.title }}</div>
              <span class="itemTrendsTime">{{ item.time }}</span>
            </div>
          </div>
          <div class="CardCustomRight">
            <div class="itemCard1" v-for="item in 3">
              <div class="itemCard1Img">
                <div class="itemCard1Footer">
                  国内外技术创新合作模式探索与实践
                </div>
              </div>
            </div>
          </div>
        </el-row>
      </CardCustom>
    </el-row>
    <el-row class="gap spaceBetween">
      <el-card v-for="(item, index) in catdList" class="itemCard2" :key="index">
        <div
          class="itemCard2Line"
          :style="{ backgroundColor: item.bgColor }"
        ></div>
        <div class="itemCard2Container">
          <div class="itemCard2BigTextWrap" :style="{ color: item.bgColor }">
            {{ item.title }}
          </div>
          <div
            class="itemCard2TextWrap"
            v-for="(itemText, inde) in item.list"
            :key="index"
          >
            <div class="temCard2Title">{{ itemText.title }}</div>
            <div class="temCard2Text">{{ itemText.text }}</div>
          </div>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script setup>
import CardCustom from "./components/CardCustom.vue";
import PieProgress from "./components/PieProgress.vue";
import flag1 from "./assets/img/flag1.png";
import flag2 from "./assets/img/flag2.png";
import flag3 from "./assets/img/flag3.png";

import { ref } from "vue";
const levelMap = {
  L1: { text: "特别重大", class: "level1" },
  L2: { text: "重大风险", class: "level2" },
  L3: { text: "一般风险", class: "level3" },
};
const securityExpressList = ref([
  {
    title:
      "美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实",
    level: "L1",
    time: "一天前",
    flag: flag1,
  },
  {
    title: "美国加强对华AI芯片出口限制，考虑制...",
    level: "L1",
    time: "一天前",
    flag: flag1,
  },
  {
    title: "日本出台《半导体材料出口管制令》...",
    level: "L1",
    time: "一天前",
    flag: flag2,
  },
  {
    title: "日本对GAAFET技术、EUV光刻设备等...",
    level: "L1",
    time: "一天前",
    flag: flag2,
  },
  {
    title: "欧盟签署协议限制高端AI芯片对华出口",
    level: "L2",
    time: "一天前",
    flag: flag3,
  },
  {
    title: "欧盟第18轮制裁中首次将3家中资企业...",
    level: "L2",
    time: "一天前",
    flag: flag3,
  },
  {
    title: "美国发布《保障信息和通信技术与服务...",
    level: "L2",
    time: "一天前",
    flag: flag1,
  },
  {
    title: "日本将42家中国实体列入出口管制“...",
    level: "L3",
    time: "一天前",
    flag: flag2,
  },
  {
    title: "美国政府放慢向英伟达和超威等芯片...",
    level: "L3",
    time: "一天前",
    flag: flag1,
  },
  {
    title: "七国集团成员国就人工智能发表了以...",
    level: "L3",
    time: "一天前",
    flag: flag3,
  },
]);

const trendsList = ref([
  {
    title: "韩研制用于存内计算的小型低功耗神经形态模块",
    time: "08-16",
  },
  {
    title: "中国科学院大学等在有机太阳能电池领域取得重要突破",
    time: "08-16",
  },
  {
    title: "德国于利希研究中心成功制造并实验验证全球首个二维半金属材料",
    time: "08-16",
  },
  {
    title: "浙江大学开发“女娲”AI模型，精准预测基因组调控序列",
    time: "08-16",
  },
  {
    title: "我国基于碳量子点材料制备出高效低成本有机太阳能电池",
    time: "08-16",
  },
  {
    title: "谷歌Gemini 2.5系列模型更新，实现高速推理与极致性价比",
    time: "08-16",
  },
  {
    title: "上海理工大学联合杜克大学在AI赋能仿生视觉技术领域实现突破",
    time: "08-16",
  },
]);
const policyList = ref([
  {
    title:
      "美国发布《2025财年国防授权法案》，拨款替换华为、中兴设备；禁止国防...",
    time: "08-16",
  },
  {
    title:
      "美国发布对华投资限制新规，限制美资在半导体、AI、量子技术等领域的对...",
    time: "08-16",
  },
  {
    title:
      "欧盟发布《网络弹性法案》（CRA），要求数字产品全生命周期安全合规，...",
    time: "08-16",
  },
  {
    title:
      "欧盟发布对外投资审查建议，要求成员国审查在半导体、AI、量子技术等领...",
    time: "08-16",
  },
  {
    title:
      "日本出台《半导体出口管制修正》加强对十余种半导体相关物项的出口管制...",
    time: "08-16",
  },
  {
    title:
      "日本拟出台“许可制”，限制外国留学生（特别提及中国）学习半导体、机...",
    time: "08-16",
  },
  {
    title: "日本通过并实施《经济安全保障推进法案》相关措施",
    time: "08-16",
  },
]);
const List = ref([
  {
    title: "当月/总数",
    titleSub: "较上月+4",
    progress: 90,
    slope: "add",
    total: 8,
    current: 7,
  },
  {
    title: "人工智能",
    titleSub: "较上月+4",
    progress: 50,
    slope: "add",
    total: 26,
    current: 3,
  },
  {
    title: "生物技术",
    titleSub: "较上月+4",
    progress: 60,
    slope: "add",
    total: 13,
    current: 3,
  },
  {
    title: "航空航天",
    titleSub: "较上月+4",
    progress: 40,
    slope: "add",
    total: 15,
    current: 3,
  },
  {
    title: "新一代信息技术",
    titleSub: "较上月+4",
    progress: 50,
    slope: "add",
    total: 12,
    current: 3,
  },
  {
    title: "量子科技",
    titleSub: "较上月+4",
    progress: 20,
    slope: "add",
    total: 8,
    current: 3,
  },
  {
    title: "新能源",
    titleSub: "较上月+4",
    progress: 90,
    slope: "add",
    total: 18,
    current: 3,
  },
  {
    title: "集成电路",
    titleSub: "较上月+4",
    progress: 20,
    slope: "add",
    total: 16,
    current: 3,
  },
  {
    title: "海洋",
    titleSub: "较上月+4",
    progress: 50,
    slope: "add",
    total: 8,
    current: 3,
  },
  {
    title: "先进制造",
    titleSub: "较上月+4",
    progress: 50,
    slope: "add",
    total: 15,
    current: 3,
  },
  {
    title: "新材料",
    titleSub: "较上月+4",
    progress: 50,
    slope: "add",
    total: 8,
    current: 3,
  },
]);
const catdList = ref([
  {
    title: "数据资源管理",
    bgColor: "rgba(206, 79, 81, 1)",
    list: [
      {
        title: "数据资源目录",
        text: "平台各类数据资源汇总导航",
      },
      {
        title: "数据统计分析",
        text: "查看资源发布量、各部门资源注册情况",
      },
      {
        title: "信息空间",
        text: "对数据资源的全生命周期进行管理",
      },
    ],
  },
  {
    title: "信息发布与管理",
    bgColor: "rgba(19, 168, 168, 1)",
    list: [
      {
        title: "信息编辑",
        text: "信息的内容导入、格式编辑",
      },
      {
        title: "信息审核",
        text: "发布前内容自动审核、词库屏蔽",
      },
      {
        title: "信息发布",
        text: "提供点到点以及点到面的消息发送",
      },
    ],
  },
  {
    title: "应用支撑平台",
    bgColor: "rgba(250, 140, 22, 1)",
    list: [
      {
        title: "应用功能目录",
        text: "快速访问和使用系统功能",
      },
      {
        title: "应用工具目录",
        text: "各项应用工具的使用方法和应用场景",
      },
      {
        title: "应用功能与工具管理",
        text: "实现功能及工具快捷访问配置入口",
      },
    ],
  },
  {
    title: "后台服务管理",
    bgColor: "rgba(10, 87, 166, 1)",
    list: [
      {
        title: "界面配置管理",
        text: "支持界面布局、样式定制化修改",
      },
      {
        title: "数据接口管理",
        text: "实现数据接口的访问调用、权限控制等",
      },
      {
        title: "系统配置管理",
        text: "支持各分系统配置的定制与调整",
      },
    ],
  },
]);
function moreClick(n) {
  alert(n);
}
</script>

<style lang="scss" scoped>
.wrap {
  width: 1600px;
  margin: 30px auto;
}
.gap {
  margin-top: 24px;
}
.icon {
  width: 24px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
}
.icon1 {
  background-image: url("./assets/img/icon1.png");
}
.icon2 {
  background-image: url("./assets/img/icon2.png");
}
.icon3 {
  background-image: url("./assets/img/icon3.png");
}
.icon4 {
  background-image: url("./assets/img/icon4.png");
}
.item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 7px;
}
.itemLevel {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  padding: 6px 4px;
  text-align: center;
  margin-right: 5px;
}
.itemTime {
  color: rgba(132, 136, 142, 1);
}
.itemFlag {
  width: 20px;
  height: 20px;
  background-size: cover;
  background-repeat: no-repeat;
  margin-left: 10px;
}
.itemTrends {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}
.itemTrendsIcon {
  width: 4px;
  height: 4px;
  background-color: rgba(206, 79, 81, 1);
  border-radius: 50%;
  margin-right: 14px;
  margin-left: 20px;
}
.itemTrendsText {
  flex: 1;
}
.itemTrendsTime {
  margin-right: 6px;
}
.level1 {
  background: rgb(255, 241, 240);
  color: rgb(245, 34, 45);
}
.level2 {
  color: rgb(250, 140, 22);
  background: rgb(255, 247, 230);
}
.level3 {
  color: rgb(82, 196, 26);
  background: rgb(246, 255, 237);
}
.itemText {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cardContainer {
  justify-content: space-between;
}
.itemCardWrap {
  width: 400px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.itemCard {
  width: 388px;
  height: 80px;
  border-radius: 4px;
  background-image: url("./assets/img/cardBg.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .itemCardIcon {
    width: 30px;
    height: 30px;
    background-size: contain;
    margin-right: 7px;
  }
  .itemCardIcon1 {
    background-image: url("./assets/img/cardIcon1.png");
  }
  .itemCardIcon2 {
    background-image: url("./assets/img/cardIcon2.png");
  }
  .itemCardIcon3 {
    background-image: url("./assets/img/cardIcon3.png");
  }
  .itemCardIcon4 {
    background-image: url("./assets/img/cardIcon4.png");
  }
  .itemCardTitle {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
  }
}
.moreWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  height: 100%;
  padding-left: 10px;
  padding-right: 10px;
  flex: 1;
  .moreText {
    margin-right: 3px;
  }
  .shuaxinIcon {
    width: 16px;
    height: 16px;
    background-image: url("./assets/img/shuaxin.png");
    background-size: contain;
  }
}
.CardCustomRight {
  flex: 1;
  padding-left: 50px;
  padding-right: 50px;
  margin-left: 30px;
  display: flex;
  justify-content: space-between;
}
.itemCard1 {
  .itemCard1Img {
    position: relative;
    width: 204px;
    height: 266px;
    background-image: url("./assets/img/book.png");
    background-size: contain;
    .itemCard1Footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 204px;
      height: 64px;
      padding: 10px;
      background-color: #000;
      color: #fff;
    }
  }
}
.spaceBetween {
  justify-content: space-between;
}
.itemCard2 {
  width: 388px;
  height: 360px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  :deep(.el-card__body) {
    padding-top: 0;
  }
  .itemCard2Line {
    /* 矩形 214 */
    width: 320px;
    height: 4px;
    background-color: rgba(206, 79, 81, 1);
    position: absolute;
    top: 0;
    left: 34px;
  }
  .itemCard2Container {
    width: 320px;
    height: 360px;
    .itemCard2BigTextWrap {
      color: rgba(206, 79, 81, 1);
      font-size: 24px;
      font-weight: 700;
      height: 83px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-bottom: 1px solid #ddd;
    }
    .itemCard2TextWrap {
      height: 83px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-bottom: 1px solid #ddd;
    }
    .temCard2Title {
      color: rgba(59, 65, 75, 1);
      font-size: 20px;
      font-weight: 700;
    }
    .temCard2Text {
      color: rgba(95, 101, 108, 1);
      font-size: 16px;
      font-weight: 400;
    }
  }
}
</style>
