<!--
 * @Author: 李佐宁
 * @Description: 
 * @Date: 2023-01-06 11:21:20
 * @LastEditTime: 2023-03-08 16:01:04
 * @LastEditors: 李佐宁
-->
<template>
  <div class="ya-box" :class="{ anhui: mapData?.en === 'anhui' }">
    <div class="ya-box-title">{{ title }}</div>
    <div class="ya-box-total">
      <span>{{ titleName }}</span>
      <div class="ya-box-total-num">
        {{ total }}
      </div>
    </div>
    <div class="ya-box-list">
      <div class="ya-item" v-for="(item, i) in list" :key="i">
        <div class="ya-item-top">
          <span v-if="item.top">TOP{{ item.top }}</span>
        </div>
        <div class="ya-item-name">
          <span>{{ item.name
          }}<sapn v-if="item.unit">（{{ item.unit }}）</sapn></span>
        </div>
        <div class="ya-item-num" style="">{{ item.num }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, withDefaults } from "vue";
import { mapMapping } from "../../../assets/map/provinceData";
const mapData = mapMapping();
interface listType {
  name: string;
  titleName: string;
  num: string;
  unit: string;
  top?: string;
}
interface propType {
  title: string;
  titleName: string;
  total: number;
  list: listType[];
}
const propsData = withDefaults(defineProps<propType>(), {
  list: () => [],
});
</script>

<style lang="scss" scoped>
.ya-box {
  width: 260px;
  height: 500px;
  background-image: url("../../../assets/image/screen/icon_bg_box.png");
  background-size: 100% 100%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 18px;

  &.anhui {
    background-image: url("../../../assets/image/screen/icon_bg_box_anhui.png");
  }

  .ya-box-title {
    width: 100%;
    text-align: center;
    padding-top: 20px;
  }

  .ya-box-total {
    text-align: right;
    padding-right: 13px;
    padding-top: 25px;

    .ya-box-total-num {
      color: #00effe;
      font-size: 32px;
    }
  }

  .ya-box-list {
    padding-right: 5px;
    margin-right: 9px;
    // text-align: right;
    margin-top: 20px;
    height: 320px;
    overflow: auto;

    .ya-item {
      padding-bottom: 20px;

      // display: flex;
      // flex-direction: column;
      // align-items: end;
      &:nth-last-child(1) {
        padding-bottom: 0;
      }
    }

    .ya-item-top {
      font-size: 12px;
      text-align: right;

      span {
        display: inline-block;
        background: rgba(255, 255, 255, 0.32);
        border-radius: 8px;
        padding: 2px 4px;
        margin-bottom: 3px;
      }
    }

    .ya-item-name {
      text-align: right;

      span {
        max-width: 147px;
        display: inline-block;
      }
    }

    .ya-item-num {
      font-size: 28px;
      color: #00effe;
      text-align: right;
    }
  }
}
</style>
