<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/screen/components/CenterTop.vue
 * @Date: 2022-07-27 11:04:15
 * @Description: 全省健康状态 中部顶部区域组件
 * @LastEditTime: 2023-09-01 15:20:30
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ref, } from 'vue';

import { ElRate } from 'element-plus'
const score = ref(4.5)

const list = [
  {
    name: '安全资产',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAclBMVEUAAAB896F8+KJ8+KJ8+aJ/9aZ8+KJ8+KN8+aJ8+KJ8+KN796N8+KJ8+KJ8+KJ7+KJ9+aJ+/6h8+KJ8+KJ9+KJ8+KF8+aJ896N8+qF996CA/6B8+KJ7+aF896J5+aR8+KF896J8+KN7+KGA+KN99qR8+KJstzr7AAAAJXRSTlMAgfn0nxP9zsm6RzfvwY9uVw3c1bCITj8xHQjmel8qsaiYkyQa6VLeOQAAAO5JREFUOMu10tcCgiAYhmEhMnPkyIa2x3f/txhi/uAAT+o5/npRzPufc8xFPrNJIQn3Jo/ROLoPg1K6NksZmk0xfN0coQU6kXW0A1nbNm8KOVIbYDZVcZgOk6MHepKpzUuFBJO21pSA5OfqJmypqw9pZd5EOBrd0diYVxoMN0f6MYXGqRLtI1GIDtcifUDEpATKvjdaQ2HdWywmUge0RJqmmTyxAMapBBqjrrTVmxCaX/U+dEajAFrpXUCM1B6GMOLARGoFrahO6ClqtclgYAEGLqMn4vRig2v34aZGMZxO9P+3oU9VCw4r/qy9H/oAQOZObgsQW8cAAAAASUVORK5CYII=',
    count: 14900
  },
  {
    name: '高危资产',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAdVBMVEUAAADmeHTmeHPmeHPmeHPnfXDmd3PmeHPmeHPmeHLmeHPmeHTneHLneHLneHPmd3Tmc3PmgIDmeHPneXPneHTodnLleXPmeXXmeHPmeXPmeHPnd3LneHLndnHneXPmeHLneHPmeXTneHLmd3LjeHHoeHPmeHOpkACqAAAAJnRSTlMAgfn0nw7OybpH78GwiW5XFAbVTj84MB3o3JB6XzUq4aiYk48kGt95Fm0AAADtSURBVDjLtdLZdoIwFEZhiEEGEYoT2mrn7vd/xEJcMUdDyE37Xbp+dzSQ/J+XSukssmkY6PlNVjE6zB+GUcdC0VQK0dTTAmsfHK25KUKbnyEUTT1DNNUrpN3k6IM7q6nNtwnpdLAJpjSjzNxEKPXKaClvovRG7+bztbzS/HFzsF92IT9VY2Q2ZA+XLu6ASzpYYWwTqcBI7b9YTKR2XOmmadrhtTqBn7rWba0rsDZuUyL0yRdOexvlOHVyBvzUFqHcK5hILXHe+iN3Tp3ZtAhpzoOz94tUgSPviggzqph1lO+/Tz6qTiuC1GeX/KFfqxNQ4XpcFsUAAAAASUVORK5CYII=',
    count: 20
  },
  {
    name: '中危资产',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAe1BMVEUAAADXmRPXmRPVmBLXmRPXmRPXmRPXmRPXmRPYmRPXmhLYmRPXmRPXmhPXmRLZmQ3XmRPYmRLYmhPWmRLWmhTXmRLXmBTWmBTWmRPXmRPYmhPXmRPXmhPVmBLQoBHXmRPXmRPXmRPXmRPYmRTXmRPYmRPWmhPVnBXXmRMsNgozAAAAKHRSTlMAgPkO88i6oJBJN+/BsBwU1c+IcFhRPzHczJqDXyoI9ejn4ah4aUQk5CKHfQAAAO5JREFUOMu10teWgjAUheGUgdBHB9vYu/v9n1A8lhwMITf6XbL2+oGA+B6ZK6MDmxMapn+jc9xMe0dHkDIUCqYkEEz9/uAp847+8BL7NtUGCKYSIJiqFLhJ52iOlqJrc6GQkY2BN2Vwo+kkfKkVhf75SaTO6EDXE36k0ftmCpKykJsq6arSLEQ35zJ7g0w2CpBxaxSDLJ5v8agN+WaCO1PX9UgIPQPcVAFLUvdhYDdntlFV60OPXqMIVimWANxUCibNFNCRGsLaVzu0zAQZg1lEeLN0nkjFYNhZIYBGOXpt2f/vJWm0nit4qWQtPugKP8ZUhUY6kCMAAAAASUVORK5CYII=',
    count: 30
  },
  {
    name: '低危资产',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAdVBMVEUAAABEpc9DpdBDpdBDpdBBqNJDpdBEpNBDpdFCptA/ps1DpdFCpdFDptBCpNBDpdFDpNFEp9BDpdFDpdFDpdBDptBDo9BDpNBDpdBDpc9EpNFCpc9DpM5NpsxDpdFEps9DpdBDpNBEpdBDptBAo81Ho8xDpdAWF/sNAAAAJnRSTlMAgPn0nw3OybpHE+/Bj25XNzHVsIhOPx3o3IRfKgbhsaiYk3okGeh8bm4AAADsSURBVDjLtdLZFoIgFIVhIUhNc8jK5rn9/o+YnaUeHJCb+i5du58ivf8RkVTasUlQUdMbHeErnxw9QQpXyJkSqF3tm8UMjcw6WqMV2DZvCjlSS8CZKiVM29HRHR3x2OZFISUqK2tK4UvTTdhSJwrNzZsIB6MbPV+aV+r3Nzl/mEKjqYKeSt2G2sNZxgfkohKDbDqjAOTQ/IrZSGoLEJUkSVqduAeGqRhMULe24k0IJsvOH522Ix+s8I5gnNrAEGYSjFNzsEu5Q8f+TJsUhoOPnuPgG8kAzLwrONAowqQdv/92gkZaSVjJx9n7oQ9OBFBgfaqBLgAAAABJRU5ErkJggg==',
    count: 50
  },
]
</script>

<template>
  <div class="custom-center-top upper-left-arrow lower-left-arrow">
    <div class="left-container custom-divider">
      <span class="title">全省资产健康状态</span>
      <div class="left-rate">
        <el-rate class="custom-rate" v-model="score" disabled />
      </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">
          <img class="icon" :src="item.icon" />
          <div class="name">{{ item.name }}</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 {
  margin-top: 24px;
  width: 100%;
  height: 75px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border: 1px solid rgba(95, 234, 252, .3);
  background: linear-gradient(87deg, rgba(35, 206, 255, .36), rgba(35, 206, 255, .1));
  position: relative;

  .left-container {
    width: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;


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


}

.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%;
}


.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: #FFFFFF;
      }
    }

    .count {
      font-size: 16px;
      font-weight: 400;
      color: #FFFFFF;
      margin-top: 2px;
    }
  }
}

.custom-rate {
  --el-rate-fill-color: #7CF8A2;
  --el-rate-disabled-void-color: #ddd;
  --el-rate-icon-size: 20px;
}
</style>
