<template>
  <div class="card">
    <div class="card-title">
      <div>当前内部等级</div>
      <div>评级日期：{{ comData.date }}</div>
    </div>
    <div class="grade">
      <van-slider v-model="value" disabled step="4.5" :active-color="color">
        <template #button>
          <div :style="grade_color" class="custom-button">{{ GradeValue }}</div>
        </template>
      </van-slider>
    </div>
  </div>
</template>

<script lang="ts">
import { Slider } from "vant";
import { Component, Vue, Prop, Watch } from "vue-property-decorator";

Vue.use(Slider);
/**
 *@description: 当前内部评价
 *@author: wanghang
 *@date: 2022-02-17
 */

@Component({
  name: "CurrentInternalRating",
})
export default class CurrentInternalRating extends Vue {
  @Prop({ default: {} }) comData: any | {}; // 当前选择器的值
  //n表示倍数
  n = 0;
  //默认等级
  value = 0;
  //默认等级颜色
  color = "#999999";
  grade_color: any = {};
  //默认等级(未评级)
  GradeValue = "未评级";
  mounted() {
    const vm = this;
    setTimeout(function(){
      vm.grade(vm.comData.gradeName);
    },500);
  }
  // @Watch("comData")
  // onData(value: any) {
  //   this.grade(this.comData.gradeName);
  // }
  grade(GradeValue: any) {
    if (GradeValue === "AAA") {
      this.n = 22;
      this.color = "#03bf16";
    } else if (GradeValue === "AA+") {
      this.n = 21;
      this.color = "#03bf16";
    } else if (GradeValue === "AA-") {
      this.n = 20;
      this.color = "#03bf16";
    } else if (GradeValue === "A+") {
      this.n = 19;
      this.color = "#03bf16";
    } else if (GradeValue === "A") {
      this.n = 18;
      this.color = "#03bf16";
    } else if (GradeValue === "A-") {
      this.n = 17;
      this.color = "#03bf16";
    } else if (GradeValue === "BBB+") {
      this.n = 16;
      this.color = "#FFDD56";
    } else if (GradeValue === "BBB") {
      this.n = 15;
      this.color = "#FFDD56";
    } else if (GradeValue === "BBB-") {
      this.n = 14;
      this.color = "#FFDD56";
    } else if (GradeValue === "BB+") {
      this.n = 13;
      this.color = "#FFDD56";
    } else if (GradeValue === "BB") {
      this.n = 12;
      this.color = "#FFDD56";
    } else if (GradeValue === "BB-") {
      this.n = 11;
      this.color = "#FFDD56";
    } else if (GradeValue === "B+") {
      this.n = 10;
      this.color = "#FFDD56";
    } else if (GradeValue === "B") {
      this.n = 9;
      this.color = "#FFDD56";
    } else if (GradeValue === "B-") {
      this.n = 8;
      this.color = "#FFDD56";
    } else if (GradeValue === "CCC+") {
      this.n = 7;
      this.color = "#FF9556";
    } else if (GradeValue === "CCC") {
      this.n = 6;
      this.color = "#FF9556";
    } else if (GradeValue === "CCC-") {
      this.n = 5;
      this.color = "#FF9556";
    } else if (GradeValue === "CC") {
      this.n = 4;
      this.color = "#FF9556";
    } else if (GradeValue === "C") {
      this.n = 3;
      this.color = "#FF9556";
    } else if (GradeValue === "RD") {
      this.n = 2;
      this.color = "#FF5656";
    } else if (GradeValue === "D") {
      this.n = 1;
      this.color = "#FF5656";
    }
    this.value = 4.5 * this.n;
    this.GradeValue = GradeValue;
    this.grade_color = {
      backgroundColor: this.color,
    };
  }
}
</script>

<style scoped>
.card {
  width: 100%;
  padding: 1.5% 2%;
  box-shadow: 0px 0px 6px rgba(249, 68, 88, 0.15);
  border: 1px solid white;
  margin-bottom: 3.5%;
}
.card-title {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.card-title > div:nth-child(1) {
  font-size: 18px;
  color: #333333;
  margin-right: 1%;
}
.card-title > div:nth-child(2) {
  font-size: 14px;
  color: #999999;
  font-family: "Arial Normal", "Arial";
}
.custom-button {
  width: 26px;
  color: #fff;
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 100px;
}
::v-deep .custom-button {
  width: 60px;
  height: 30px;
  line-height: 30px;
}
.grade {
  width: 95%;
  margin: 0 auto;
  margin-bottom: 1%;
  margin-top: 1%;
  /*margin-left: 3%;*/
}
::v-deep .grade {
  display: flex;
  align-items: center;
}
::v-deep .van-slider__bar {
  padding-top: 5px;
}
::v-deep .van-slider {
  height: 5px;
}
::v-deep .van-slider--disabled {
  opacity: 1;
}
</style>