<template>
    <div :class="classObj(value)" class="circle">
        <span :class="style(name)">{{name}}{{per}}</span>
    </div>
</template>

<script>
/**
 * 圆形
 */
export default {
  name: 'PtCircle',
  props: {
    // 显示的内容
    name: null,
    value: null,
    per: null
  },
  methods: {
    // 文字居中问题
    style(name) {
      if (name && name.length <= 4) {
        if (name === '完成率' && this.per !== '') {
          return 'marginTop-10'
        }
        return 'lineHeight-60'
      } else {
        return 'marginTop-10'
      }
    },
    // 颜色
    classObj(value) {
      switch (value) {
        case true:
          return 'blue-color'
        case false:
          return 'red-color'
        default:
          break
      }
    }
  }
}
</script>

<style scoped>
.circle {
  width: 60px;
  height: 60px;
  /*border: 1px solid #999;*/
  /*background: #999;*/
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  border-color: #eb6877;
  background-color: #eb6877;
}

.circle span {
  word-wrap: break-word;
  display: inline-block;
  width: 50px;
}

.lineHeight-60 {
  line-height: 60px;
}

.marginTop-10 {
  margin-top: 10px;
}

.blue-color {
  border-color: #00a0e9;
  background-color: #00a0e9;
  color: #fff;
}

.red-color {
  /*border-color: #eb6877;*/
  /*background-color: #eb6877;*/
  color: #fff;
  background: #999;
}
</style>
