<template>
  <div :class="['card',getThemeVal()]">
    <div class="title">
      <div class="title-left">
        <div class="icon-class">
          <icon-font
            name="icon-term-exposure-fill"
            size="14"
            color="#fff"
          />
        </div>
        <div style="margin-left:12px;">VaR使用率</div>
      </div>
      <div class="title-right gray">
        99%置性水平
      </div>
    </div>
    <div class="content">
      <SemiCircleGauge />
    </div>

  </div>
</template>

<script>
import SemiCircleGauge from './semiCircleGauge.vue';
import { themeChangeMixin } from '@/mixins/themeChangeMixin';
export default {
  components: {
    SemiCircleGauge,
  },
  mixins: [themeChangeMixin],
  methods: {
    getThemeVal() {
      if (this.theme === 'default') {
        return 'default-bg';
      } else {
        return 'dark-bg';
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.default-bg{
  background-image: url('../../assets/default/default_bg_pink.png');
  background-repeat: no-repeat; /* 防止平铺 */
  background-position: center;   /* 居中显示 */
  background-size: cover;       /* 覆盖整个区域 */
}
.dark-bg{
  background-image: url('../../assets/dark/dark_bg_pink.png');
  background-repeat: no-repeat; /* 防止平铺 */
  background-position: center;   /* 居中显示 */
  background-size: cover;       /* 覆盖整个区域 */
}
.card{
  width: 100%;
  height: 100%;
  padding: 12px;
  overflow:hidden;
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-content: space-between;
  .title{
    width: 100%;
    display:flex;
    flex-wrap:nowrap;
    font-size: 14px;
    justify-content: space-between;
    align-items: center;
    .icon-class{
      min-width: 32px;
      min-height: 32px;
      border-radius: 16px;
      background-color: #FF6296;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .title-left{
      display: flex;
      line-height: 1;
      align-items: center;
    }
    .title-right{
      line-height: 1;
      font-size: 12px;
    }

  }
 .content{
  width: 100%;
  height: calc(100% - 25px);
  display:flex;
  flex:auto;
 }
  .line-graph{
    position:absolute;
    width: 112px;
    height: 62px;
    right:12px;
    top:12px;
  }
}
.gray{
  color: var(--desktop-text-color-2);
}
.raise{
  color:#E95652
}
.reduce{
  color:#20C98B
}
</style>
