<template>
  <confirm-dialog
    ref="configDialog"
    title="告警设置"
    @confirm="onSave"
  >
    <div class="u-align-self--center">
      <div
        v-for="strategy in strategies"
        :key="strategy.level"
        class="c-sibling-item--v far"
      >
        <div class="c-sibling-item--v u-bold">{{ strategy.name }}</div>
        <div class="l-flex--row c-sibling-item--v">
          <div
            v-for="option in strategy.options"
            :key="option.key"
            class="c-sibling-item far"
          >
            <span class="c-sibling-item">{{ option.label }}</span>
            <el-switch
              v-model="option.value"
              class="c-sibling-item"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </div>
        </div>
      </div>
    </div>
  </confirm-dialog>
</template>

<script>
import {
  getInformStrategy,
  updateInformStrategy
} from '../api'

export default {
  name: 'AlarmStratConfigDialog',
  data () {
    return {
      strategies: []
    }
  },
  methods: {
    show (tenant) {
      this.$tenant = tenant
      getInformStrategy(tenant).then(data => {
        this.strategies = data
        this.$refs.configDialog.show()
      })
    },
    onSave (done) {
      const strategies = {}
      this.strategies.forEach(({ level, options }) => {
        const strategy = {}
        options.forEach(({ key, value }) => {
          strategy[key] = value
        })
        strategies[level] = strategy
      })
      updateInformStrategy(this.$tenant, strategies).then(done)
    }
  }
}
</script>

<style lang="scss" scoped>
.o-strategy-name {
  width: 60px;
}
</style>
