<template>
    <div :class="classObj(value)" class="rect">
      <p :class="style(name)">{{name}}<br>{{num}}</p>
    </div>
</template>

<script>
/**
 * 矩形
 */
export default {
  name: 'PtRect',
  props: {
    // 显示的内容
    name: null,
    // 节点变色的依据（存在的变色）
    value: null,
    num: null
  },
  methods: {
    // 颜色
    classObj(value) {
      switch (value) {
        case true:
          return 'blue-color'
        case false:
          return 'red-color'
        default:
          break
      }
    },
    style(name) {
      if (name === '自校版' && this.num !== '') {
        return 'haveNum'
      } else {
        return 'noNum'
      }
    }
  }
}
</script>

<style scoped>
.rect {
  border: 1px solid #eb6877;
  /*background: #999;*/
  background: #eb6877;
  color: #fff;
  font-size: 12px;
  width: 80px;
  text-align: center;
}
.haveNum {
}
.noNum {
  margin-top: 10px;
  margin-bottom: 10px;
}
.blue-color {
  border-color: #00a0e9;
  background-color: #00a0e9;
  color: #fff;
}

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