<template>
  <div>
    <div class="numerical-value aggressivity" :style="{ background: color }">
      <div
        class="numerical-left aggressivity-left"
        :style="{ background: definecolor }"
      >
        <img
          width="48px"
          height="41px"
          :src="require('@/assets/market/hero/' + progressImg + '.png')"
          alt=""
        />
      </div>
      <div class="numerical-right">
        <div class="progress" v-if="!isNaN(parseInt(curent))">
          <el-progress
            :text-inside="true"
            :show-text="false"
            color="#FFFFFF"
            define-back-color="#C1C1C1"
            :stroke-width="12"
            :percentage="curent"
            status="warning"
          ></el-progress>
        </div>
        <div class="progress-number">
          {{ min > 100 ? parseInt(min) : min > 10 ? parseFloat(min).toFixed(2) : min }}/{{
            max > 100 ? parseInt(max) : max > 10 ?   parseFloat(max).toFixed(2) : max
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProgressCard",
  props: ["color", "definecolor", "max", "min", "progressImg"],
  computed: {
    curent() {
      return (( this.min / this.max).toFixed(2))*100 ; ;
    },
  },
  created(){
    console.log( (( this.min / this.max).toFixed(2))*100 ,'selog');
  }
};
</script>

<style lang="scss" scoped>
.numerical-value {
  width: 309px;
  height: 65px;
  margin: 0 auto;
  display: flex;
  margin-top: 18px;
  margin-bottom: 14px;
  border-radius: 12px;
  .numerical-left {
    width: 55px;
    height: 57px;
    margin-top: 4px;
    margin-left: 5px;
    border-radius: 10px;
    text-align: center;
    img {
      margin-top: 9px;
    }
  }
  .numerical-right {
  }
  .progress {
    width: 217px;
    margin-top: 17px;
    margin-left: 15px;
  }
  .progress-number {
    font-size: 18px;
    font-family: "MEurostile";
    margin-top: 6px;
    font-weight: 400;
    font-style: italic;
    text-align: right;
    color: #ffffff;
  }
  ::v-deep .el-progress-bar__outer {
    background-color: #c1c1c1;
  }
}
</style>
