<template>
  <div class="qc-flags">
    <div class="qc-flags-item" v-for="conf in config" :key="conf.label">
      <span :class="'dot' + (data[conf.name] ? ' green' : '')"></span>
      {{ conf.label }}
    </div>
  </div>
</template>

<script>
// 配置
const config = [
  {
    label: 'Collection Time',
    name: 'collectionTime'
  },
  {
    label: 'Acq Time',
    name: 'acqTime'
  },
  {
    label: 'Decay Time',
    name: 'decayTime'
  },
  {
    label: 'SampVol',
    name: 'sampVol'
  },
  {
    label: 'Be7-FWHM',
    name: 'be7Fwhm'
  },
  {
    label: 'Ba140-MDC',
    name: 'ba140Mdc'
  },
  {
    label: 'Xe133-MDC',
    name: 'xe133Mdc'
  }
]

export default {
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  created() {
    this.config = config
  }
}
</script>

<style lang="less" scoped>
.qc-flags {
  display: flex;
  &-item {
    background-color: #46738e;
    display: flex;
    align-items: center;
    width: 150px;
    height: 30px;

    &:not(:last-child) {
      margin-right: 2px;
    }

    span {
      margin-left: 20px;
      margin-right: 5px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: radial-gradient(circle, #979797 0, #777a7c 100%);

      &.green {
        background: radial-gradient(circle, #00fe7f 0, #00d56a 100%);
      }
    }
  }
}
</style>
