<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/components/ProgressBar/NumberProgressBarItem.vue
 * @Date: 2022-07-08 08:52:06
 * @Description: 
 * @LastEditTime: 2023-03-21 20:05:48
 * @LastEditors: 李佐宁
-->
<script setup lang="ts">
import ProgressBar from "./ProgressBar.vue";
// import CustomTooltip from '../CustomTooltip/CustomTooltip.vue'
import NumberPlate from "./NumberPlate.vue";
import { getThemeColor } from "@/components/chart/options/theme";
import { bigNumberTransform } from "@/utils/utils";
interface ProgressBarItemProps {
  number?: string | number;
  name: string;
  value: string | number;
  percentage: number;
  unit?: string;
  type?: string;
  color?: string;
}
const colorList = getThemeColor().colorList || [];
const {
  number = "",
  name = "",
  value = 0,
  percentage = 0,
  unit = "",
  type = "tradition",
  color,
} = defineProps<ProgressBarItemProps>();
</script>

<template>
  <div class="progress-center">
    <div class="progress-bar-box" v-if="type == 'tradition'">
      <div class="top">
        <NumberPlate
          class="number-plate-progress"
          v-if="number"
          :number="number"
        />
        <div class="name ya-parmty-color">
          <CustomTooltip :show="true" :text="name"></CustomTooltip>
        </div>
        <div class="count-show ya-text-color">
          {{ bigNumberTransform(value || 0) }}
        </div>
      </div>
      <div class="bottom">
        <ProgressBar :key="name" :percentage="percentage" :color="color" />
      </div>
    </div>
    <div v-if="type == 'other'">
      <div class="other-progress-bar-box">
        <div
          class="other-progress-bar-box-number"
          :class="[
            number < 4 ? 'other-active' : '',
            number > 3 ? 'ya-fill-color ya-primary-text' : '',
          ]"
        >
          {{ number }}
        </div>
        <div class="other-progress-bar-box-name ya-parmty-color">
          {{ name || "-" }}
        </div>
        <ProgressBar :key="name" :percentage="percentage" color="#4496C2" />
        <div class="other-progress-bar-box-value ya-text-color">
          {{ bigNumberTransform(value || 0) }}
        </div>
      </div>
      <div class="other-line">
        <img src="../../assets/image/attackScreen/border-bottom.png" alt="" />
      </div>
    </div>
    <div v-if="type == 'otherTwo'">
      <div class="otherTwo-progress-bar-box1">
        <div class="ya-progress-icon">
          <img
            v-if="number < 4"
            src="@/assets/image/screen/icon_round_yellow.png"
            alt=""
          />
          <img v-else src="@/assets/image/screen/icon_round_blue.png" alt="" />
          <span class="num">{{ number }}</span>
        </div>
        <div class="flex-one">
          <div class="otherTwo-progress-bar-box1-flex">
            <div class="ya-parmty-color">
              <CustomTooltip :show="true" :text="name || '-'"></CustomTooltip>
            </div>
            <div class="ya-text-color">
              {{ bigNumberTransform(value || 0) }}
            </div>
          </div>
          <div>
            <ProgressBar :key="name" :percentage="percentage" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.progress-center {
  height: 10%;
}
.progress-bar-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    .number-plate-progress {
      margin-right: 5px;
    }
    .name {
      cursor: default;
      width: 100%;
      max-width: 100%;
      font-size: 14px;
      color: rgba(141, 218, 241, 1);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 12px;
    }

    .count-show {
      text-align: right;
      flex-shrink: 0;
      margin-left: 8px;
      font-size: 16px;
      color: rgba(112, 216, 255, 1);
      font-family: YouSheBiaoTiHei;
    }
  }

  .bottom {
    margin-top: 5px;
    width: 100%;
  }
}
.other-progress-bar-box {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 12px;
  margin: 10px 0;
  // border-bottom: 1px dashed rgba(71, 116, 180, .2);
  .other-progress-bar-box-number {
    width: 44px;
    height: 14px;
    border-radius: 2px;
    text-align: center;
    margin-left: 13px;
    margin-right: 18px;
    background: rgba(255, 255, 255, 0.15);
  }
  .other-active {
    background: #a67337;
  }
  .other-progress-bar-box-name {
    width: 50%;
    text-align: left;
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-wrap;
  }
  .other-progress-bar-box-value {
    width: 30%;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-wrap;
  }
}
.other-line {
  width: 100%;
  margin-top: -10px;
  img {
    width: 96%;
    margin-left: 12px;
  }
}

.otherTwo-progress-bar-box {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 14px;
  // margin: 10px 0;
  margin-bottom: 32px;
  .otherTwo-progress-bar-box-number {
    width: 32px;
    height: 16px;
    border-radius: 50%;
    text-align: center;
    margin-left: 13px;
    margin-right: 18px;
    color: #fff;
    font-size: 12px;
  }
  .otherTwo-progress-bar-box-name {
    cursor: default;
    color: rgba(0, 0, 0, 0.65);
    width: 50%;
    text-align: left;
    width: 170px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .otherTwo-progress-bar-box-value {
    width: 30%;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-wrap;
    color: rgba(0, 0, 0, 0.4);
  }
}
:first-child.progress-center .otherTwo-progress-bar-box {
  margin-top: 10px;
}
:last-child.progress-center .otherTwo-progress-bar-box {
  margin-bottom: 0;
}

.otherTwo-progress-bar-box1 {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  font-size: 14px;
  .ya-progress-icon {
    position: relative;
    display: flex;
    .num {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 12px;
      font-family: YouSheBiaoTiHei;
      color: #ffffff;
    }
  }
  .flex-one {
    flex: 1;
    margin-left: 8px;
  }
  .otherTwo-progress-bar-box1-flex {
    display: flex;
    flex: 1;
    justify-content: space-between;
    margin-bottom: 5px;
  }
  .ya-text-color {
    font-family: YouSheBiaoTiHei;
  }
}
</style>
