<template>
  <confirm-dialog
    ref="configDialog"
    title="内容保护配置"
    @confirm="onSave"
  >
    <div class="c-grid-form mini u-align-self--center">
      <div class="l-flex--row c-grid-form__row">
        <span class="c-sibling-item c-grid-form__label u-bold">启用</span>
        <el-switch
          v-model="config.protect"
          class="c-sibling-item"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </div>
      <div class="c-grid-form__row">
        <button
          class="c-sibling-item o-button"
          @click="onAdd"
        >
          <i class="o-button__icon el-icon-circle-plus-outline" />
          新增
        </button>
        <span class="c-sibling-item u-color--info">卡号 0~255</span>
      </div>
      <div
        v-for="(item, index) in config.inputCards"
        :key="index"
        class="c-grid-form__row"
      >
        <div class="l-flex--row c-sibling-item--v u-bold">
          <span class="c-sibling-item c-grid-form__label c-grid-form__text">配置{{ index + 1 }}</span>
          <i
            v-if="hasMore"
            class="c-sibling-item far el-icon-delete has-active u-pointer"
            @click="onDel(index)"
          />
        </div>
        <div class="l-flex--row c-sibling-item--v">
          <span class="l-flex__none c-sibling-item c-grid-form__label">主卡</span>
          <div class="l-flex__auto c-sibling-item l-flex--row">
            <el-input-number
              v-model="item.cardId"
              :min="0"
              :max="255"
              step-strictly
            />
          </div>
          <span class="l-flex__none c-sibling-item far c-grid-form__label">子卡</span>
          <div class="l-flex__auto l-flex--row c-sibling-item c-grid-form__option">
            <el-input-number
              v-model="item.srcId"
              :min="0"
              :max="255"
              step-strictly
            />
          </div>
        </div>
      </div>
    </div>
  </confirm-dialog>
</template>

<script>
import {
  getContentProtection,
  updateContentProtection
} from '@/api/external'

export default {
  name: 'ContentProtectionConfigDialog',
  data () {
    return {
      config: {
        protect: false,
        inputCards: []
      }
    }
  },
  computed: {
    hasMore () {
      return this.config.inputCards.length > 1
    }
  },
  methods: {
    show ({ id }) {
      const loading = this.$showLoading()
      this.$deviceId = id
      getContentProtection(id).then(({ data }) => {
        if (data) {
          const { protect, inputCards } = data
          this.config = { protect, inputCards }
        } else {
          this.config = {
            protect: false,
            inputCards: [{ cardId: 0, srcId: 0 }]
          }
        }
        this.$refs.configDialog.show()
      }).finally(() => {
        this.$closeLoading(loading)
      })
    },
    onSave (done) {
      const { protect, inputCards } = this.config
      const map = {}
      const cards = []
      for (let i = 0; i < inputCards.length; i++) {
        const { cardId, srcId } = inputCards[i]
        const key = `${cardId}-${srcId}`
        if (map[key]) {
          this.$message({
            type: 'warning',
            message: `配置${i + 1}与配置${map[key]}相同`
          })
          return
        }
        map[key] = i + 1
        cards.push({ cardId, srcId })
      }
      updateContentProtection(this.$deviceId, {
        protect,
        inputCards: cards
      }).then(done)
    },
    onAdd () {
      this.config.inputCards.push({ cardId: 0, srcId: 0 })
    },
    onDel (index) {
      this.config.inputCards.splice(index, 1)
    }
  }
}
</script>
