<template>
  <div class="l-settings">
    <button
      class="o-button"
      @click="onAttributeConfig"
    >
      属性
    </button>
    <button
      class="o-button"
      @click="onContentProtectionConfig"
    >
      内容保护配置
    </button>
    <attribute-config-dialog ref="attributeConfigDialog" />
    <content-protection-config-dialog ref="contentProtectionConfigDialog" />
  </div>
</template>

<script>
import AttributeConfigDialog from './AttributeConfigDialog'
import ContentProtectionConfigDialog from './ContentProtectionConfigDialog'

export default {
  name: 'DeviceNormalConfig',
  components: {
    AttributeConfigDialog,
    ContentProtectionConfigDialog
  },
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  methods: {
    onAttributeConfig () {
      this.$refs.attributeConfigDialog.show(this.device)
    },
    onContentProtectionConfig () {
      this.$refs.contentProtectionConfigDialog.show(this.device)
    }
  }
}
</script>

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