<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/AttackComponents/CenterTop.vue
 * @Date: 2022-09-05 11:19:35
 * @Description: 
 * @LastEditTime: 2023-09-01 15:12:32
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { countryOptions } from '../constants'
import { mapMapping } from "../../../assets/map/provinceData";
const mapData = reactive(mapMapping())
const list = [
  {
    name: '发起访问数',
    count: 17032
  },
  {
    name: '香港',
    level: 1,
    count: 9485
  },
  {
    name: '贵州',
    level: 2,
    count: 9485
  },
  {
    name: '上海',
    level: 3,
    count: 9485
  },
]


const activeCountry = ref('国内')

</script>
  
<template>
  <div class="custom-center-top upper-left-arrow lower-left-arrow">
    <div class="left-container">
      <div class="title-box custom-divider">
        <div class="title ">{{ mapData.name }}内今日受访问统计</div>
      </div>
      <div class="left-card-list">
        <div class="left-card-list-item" :class="activeCountry === item.name && 'is-active'"
          v-for="item in countryOptions">
          <img :src="activeCountry === item.name ? item.activeIcon : item.icon" alt="" class="icon">
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="right-container upper-right-arrow lower-right-arrow">
      <div class="item" :class="index !== list.length - 1 ? 'custom-divider' : ''" v-for="(item, index) in list"
        :key="index">
        <div class="top">
          <div class="name">{{ item.name }}</div>
          <div class="level" v-if="item.level && item.level > 0">TOP{{ item.level }}</div>
        </div>
        <div class="count">{{ item.count }}</div>
      </div>
    </div>
  </div>
</template>
  
  
<style lang="scss" scoped>
.upper-left-arrow::before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: -1px;
  left: -1px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAABTzPuGvZrwAAAAAXRSTlMAQObYZgAAABNJREFUCNdj+P//AxgfYGCgBgYAsWsTXSaoCfQAAAAASUVORK5CYII=) no-repeat;
  background-size: 100% 100%;
}

.upper-right-arrow::before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: -1px;
  right: -1px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAABTzPuGvZrwAAAAAXRSTlMAQObYZgAAABNJREFUCNdj+P//AxgfYGCgBgYAsWsTXSaoCfQAAAAASUVORK5CYII=) no-repeat;
  background-size: 100% 100%;
  transform: rotate(90deg);
}


.lower-left-arrow::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: -1px;
  left: -1px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAABTzPuGvZrwAAAAAXRSTlMAQObYZgAAABNJREFUCNdjOMDAQBX8//8HEAYAd3wTXdo8pBwAAAAASUVORK5CYII=) no-repeat;
  background-size: 100% 100%;
}

.lower-right-arrow::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: -1px;
  right: -1px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAABTzPuGvZrwAAAAAXRSTlMAQObYZgAAABNJREFUCNdjOMDAQBX8//8HEAYAd3wTXdo8pBwAAAAASUVORK5CYII=) no-repeat;
  background-size: 100% 100%;
  transform: rotate(-90deg);
}


.custom-center-top {
  width: 100%;
  height: 75px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border: 1px solid rgba(95, 234, 252, .3);
  position: relative;

  .left-container {
    width: 305px;
    height: 100%;
    display: flex;
    background: #00527A;

    .title-box {
      width: 160px;
      padding: 16px 24px;
      height: 100%;
      box-sizing: border-box;
      position: relative;
      display: flex;
      align-items: center;
    }

    .title {
      color: #FFFFFF;
      font-size: 18px;
      font-weight: 400;
      color: #FFFFFF;
    }

    .left-card-list {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 8px 24px;
      box-sizing: border-box;
      justify-content: space-between;
    }

    .left-card-list-item {
      width: 100%;
      height: 26px;
      padding-left: 12px;
      box-sizing: border-box;
      background: rgba(153, 153, 153, 0.38);
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.5);
      display: flex;
      align-items: center;

      .icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        margin-right: 8px;
      }
    }

    .is-acitve {
      background: rgba(228, 218, 57, 0.2);
      color: #E4DA39;
    }
  }


}



.right-container {
  display: flex;
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;


  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;

    .top {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        position: absolute;
        top: 3px;
        left: -20px;
      }

      .name {
        font-size: 16px;
        font-weight: 400;
        color: #CCCCCC;
      }

      .level {
        padding: 3px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #A67337;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 400;
        color: #FFFFFF;
        margin-left: 8px;
      }
    }

    .count {
      margin-top: 8px;
      font-size: 26px;
      font-weight: 400;
      font-family: 'DIN';
      color: #EEE226;
    }
  }
}




.custom-divider::after {
  content: "";
  position: absolute;
  right: 0;
  width: 3px;
  height: 48px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAABgBAMAAADMTx48AAAAG1BMVEUAAABf6/1UzftTzPtZ2vxTzPtTy/xUy/xTzPv1pIQEAAAACHRSTlMAZvDmkudKSVP1sakAAAAhSURBVBjTYyjuUGGw6Ghi6OjooASDzUgFmsXAIDiKiccAlgkjQaSBLU8AAAAASUVORK5CYII=) no-repeat;
  background-size: 100% 100%;
}
</style>
  
