<template>
    <a-carousel arrows>
      <template #prevArrow>
        <div class="custom-slick-arrow" style="left: 200px; z-index: 1">
          <left-circle-outlined />
        </div>
      </template>
      <template #nextArrow>
        <div class="custom-slick-arrow" style="right: 200px; z-index: 1">
          <right-circle-outlined />
        </div>
      </template>
      <div class="institution">
        <div class="line-title">机构概况</div>
        <a-card>
          <div class="ins-detail">
            <div class="ins-item" v-for="(item, index) in orgList" :key="index">
              <div class="icon" :class="item.defaultIcon"></div>
              <div>
                <span class="number">{{ item.defaultVal }}</span>
                <span class="unit">{{item.unit}}</span>
              </div>
              <div class="unit-title">{{item.showName}}</div>
            </div>
          </div>
        </a-card>
      </div>
      <div class="institution">
        <div class="line-title">科技概况</div>
        <a-card>
          <div class="ins-detail">
            <div class="ins-item" v-for="(item1, index1) in techList" :key="index1">
              <div class="icon" :class="item1.defaultIcon"></div> 
              <div>
                <span class="number">{{ item1.defaultVal }}</span>
                <span class="unit">{{item1.unit}}</span>
              </div>
              <div class="unit-title">{{item1.showName}}</div>
            </div>
          </div>
        </a-card>
      </div>
    </a-carousel>
</template>

<script lang="ts" setup>
  import { Carousel } from 'ant-design-vue';
  import { Ref, ref, watch, defineProps, onMounted, unref,nextTick } from 'vue';
  import { Card } from 'ant-design-vue';
  import { BellOutlined, ClockCircleOutlined, CaretRightOutlined, LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';


  import { getBaseInfoList } from './api.ts';

  const orgList = ref([]);
  const techList = ref([]);

  async function setFxcData() {
    await getBaseInfoList().then((res) => {
      orgList.value = res[1]
      techList.value = res[2]
    });
  }

  setFxcData();


</script>

<style scoped>
  :deep(.slick-slide) {
    text-align: center;
    /* height: 700px; */
    /* line-height: 160px; */
    background: #ffffff;
    overflow: hidden;
  }
  :deep(.slick-slide h3) {
    color: #1789f5;
  }
  :deep(.slick-arrow.custom-slick-arrow) {
    width: 60px;
    height: 60px;
    font-size: 60px;
    color: #f2f8fb;
    background-color: #fff;
    transition: ease all 0.3s;
    opacity: 1;
    z-index: 1;
  }
  :deep(.slick-arrow.custom-slick-arrow:before) {
    display: none;
  }
  :deep(.slick-arrow.custom-slick-arrow:hover) {
    color: #808080;
    opacity: 0.5;
  }
  .page-container {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 0px auto;
    margin: 0px auto;
    width: 100%;
    height: calc(80vh - 10px);
  }

  .card-container {
    display: flex;
    flex: 1;
    padding: 0 200px;
    background-color: #fff;
  }

  .top-container {
    margin: 25px 0;
    height: 300px;
    line-height: 40px;
    background-color: #fff;
    border: 1px dotted #7d7d7d;
  }

  .tab-container {
    flex: 1;
    background-color: #fff;
    margin-bottom: 5px;
  }
  .leftbox {
    width: 60%;
  }
  .rightbox {
    width: 40%;
  }
  .topbox {
    padding: 0 30px;
    text-align: left;
    color: #808080;
  }
  .toptitle {
    font-size: 30px;
    font-weight: 500;
    padding: 25px 0;
    border-bottom: 1px solid;
  }
  .todolist {
    padding: 0px 10px;
    font-size: 18px;
    color: #757575;
  }
  .infolist {
    padding: 20px;
    font-size: 18px;
    color: #757575;
  }
  .ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /* cursor: pointer; */
  }
  .institution {
    background-color: #fff;
  }
  .line-title {
    text-align: center;
    font-size: 30px;
    color: #808080;
    width: 30%;
    margin: 30px auto;
    position: relative;
  }
  .line-title:before {
    content: '';
    position: absolute;
    width: 25%; /*横线长度 */
    height: 1px;
    top: 50%;
    background: #1789f5;
    left: 0;
  }
  .line-title:after {
    content: '';
    position: absolute;
    width: 25%;
    height: 1px;
    top: 50%;
    background: #1789f5;
    right: 0%;
  }
  .ins-detail {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #808080;
    padding: 0 300px;
  }
  .ins-item {
    width: calc(90% / 4);
    padding: 30px;
    text-align: center;
  }
  .ins-item:nth-of-type(4n + 0) {
    margin-right: 0;
  }
  .icon {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #f2f8fb;
    background-repeat: no-repeat;
    background-position: center;
  }
  .iconAsset {
    background-image: url('./static/iconAsset.png');
  }
  .iconIns {
    background-image: url('./static/iconIns.png');
  }
  .iconCAccount {
    background-image: url('./static/iconCAccount.png');
  }
  .iconIAccount {
    background-image: url('./static/iconIAccount.png');
  }
  .iconCClient {
    background-image: url('./static/iconCClient.png');
  }
  .iconIClient {
    background-image: url('./static/iconIClient.png');
  }
  .iconEmp {
    background-image: url('./static/iconEmp.png');
  }
  .iconAgency {
    background-image: url('./static/iconAgency.png');
  }
  .iconASys {
    background-image: url('./static/iconASys.png');
  }
  .iconISys {
    background-image: url('./static/iconISys.png');
  }
  .iconAEvent {
    background-image: url('./static/iconAEvent.png');
  }
  .iconIEvent {
    background-image: url('./static/iconIEvent.png');
  }
  .iconProject {
    background-image: url('./static/iconProject.png');
  }
  .iconArea {
    background-image: url('./static/iconArea.png');
  }
  .number {
    font-family: 'PlayfairDisplay';
    font-size: 40px;
  }
  .unit {
    font-size: 20px;
  }
  .unit-title {
    margin-top: 5px;
    font-size: 20px;
    font-weight: 500;
  }
  .risk {
    background-color: #fff;
    color: #808080;
  }
  .riskbox {
    display: flex;
    padding: 0 300px;
    background-color: #f1f2f5;
  }
  .risk-data {
    width: 50%;
    height: 700px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 122px 100px;
  }
  .risk-num {
    width: calc(92% / 2);
    margin-bottom: 30px;
    border: 3px dotted #1789f5;
    text-align: center;
  }
  .rnum {
    font-size: 80px;
    font-family: 'PlayfairDisplay';
  }
  .runit {
    font-size: 30px;
  }
  .pie {
    padding: 100px;
  }
  .problemPie {
    margin: 0 auto;
    padding: 0 300px;
    padding-bottom: 50px;
    text-align: center;
    background-color: #f1f2f5;
  }
  .monitor {
    background-color: #fff;
    color: #808080;
  }
  .monitorPie {
    background-color: #fff;
    padding: 0 300px;
  }
</style>
