<template>
  <div class="l-flex__auto o-settings">
    <button
      class="o-button"
      @click="onAlarmStratConfig"
    >
      告警策略
    </button>
    <button
      v-if="admin"
      class="o-button"
      @click="onAssetServiceConfig"
    >
      媒资AI审核
    </button>
    <button
      v-if="admin"
      class="o-button"
      @click="onTimingServiceConfig"
    >
      AI抽帧检测
    </button>
    <alarm-strat-config-dialog ref="alarmStratConfigDialog" />
    <service-config-dialog ref="serviceConfigDialog" />
  </div>
</template>

<script>
import AlarmStratConfigDialog from './AlarmStratConfigDialog'
import ServiceConfigDialog from './ServiceConfigDialog'

export default {
  name: 'SettingsList',
  components: {
    AlarmStratConfigDialog,
    ServiceConfigDialog
  },
  props: {
    group: {
      type: String,
      required: true
    },
    admin: {
      type: [Boolean, String],
      default: false
    }
  },
  methods: {
    onAlarmStratConfig () {
      this.$refs.alarmStratConfigDialog.show(this.group)
    },
    onAssetServiceConfig () {
      this.$refs.serviceConfigDialog.show(this.group, 2)
    },
    onTimingServiceConfig () {
      this.$refs.serviceConfigDialog.show(this.group, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.o-settings {
  align-self: flex-start;
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  grid-row-gap: $spacing;
  grid-column-gap: $spacing;
}
</style>
