<template>
  <div :class="['dof-tag', isActive ? 'dof-tag--active' : 'dof-tag--normal']" @click="onClick">
    <text :class="['dof-tag-text', isActive ? 'dof-tag-text--active' : 'dof-tag-text--normal']">
      <slot></slot>
    </text>
  </div>
</template>

<script>
import { mixSelectableChild } from '../utils//mix-selectable-child.js'

export default {
  mixins: [mixSelectableChild('dof-tag-group')],
  props: {
    active: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'active',
    event: 'change'
  },
  computed: {
    isActive() {
      return this.active || this.isSelected
    }
  },
  methods: {
    onClick() {
      this.$emit('change', !this.active)
      this.triggerSelect()
    }
  }
}
</script>

<style scoped>
.dof-tag {
  height: 72px;
  border-radius: 36px;
  justify-content: center;
  align-items: center;
}

.dof-tag--normal {
  background-color: #f2f2f2;
}

.dof-tag--active {
  background-color: #00A4F2;
}

.dof-tag-text {
  font-family: PingFangSC-Regular;
  font-size: 28px;
  font-weight: 400;
}

.dof-tag-text--normal {
  color: #616C73;
}

.dof-tag-text--active {
  color: #ffffff;
}
</style>
