<template>
  <div
    v-loading="loading"
    class="l-flex--col"
  >
    <template v-if="!loading">
      <warning
        v-if="error"
        @click="getSendingCard"
      />
      <template v-else>
        <template v-if="info">
          <div class="c-info">
            <div class="l-flex--row has-bottom-padding u-bold">
              <span class="c-sibling-item">发送控制设备信息</span>
              <span
                v-if="isSuperAdmin"
                class="c-sibling-item c-info__edit u-pointer"
                @click="onUnbind"
              >
                <i class="el-icon-edit" />
                解绑
              </span>
            </div>
            <div class="l-flex--row c-info__block">
              <div class="l-flex--row l-flex__fill c-info__item">
                <div class="l-flex__none c-info__title">设备名称</div>
                <auto-text
                  class="l-flex__fill c-info__value"
                  :text="transmitter.name"
                />
              </div>
              <div class="l-flex--row l-flex__fill c-info__item">
                <div class="l-flex__none c-info__title">厂家名称</div>
                <div class="l-flex__fill c-info__value">{{ transmitter.manufacturerName }}</div>
              </div>
            </div>
            <div class="l-flex--row c-info__block">
              <div class="l-flex--row l-flex__fill c-info__item">
                <div class="l-flex__none c-info__title">设备型号</div>
                <auto-text
                  class="l-flex__fill c-info__value"
                  :text="transmitter.type"
                />
              </div>
              <div class="l-flex--row l-flex__fill c-info__item">
                <div class="l-flex__none c-info__title">设备类型</div>
                <div class="l-flex__fill c-info__value">{{ type }}</div>
              </div>
            </div>
            <div class="l-flex--row c-info__block">
              <div class="l-flex--row l-flex__fill c-info__item">
                <div class="l-flex__none c-info__title">支持设备监测</div>
                <div class="l-flex__fill c-info__value">{{ supportDetection }}</div>
              </div>
              <div class="l-flex--row l-flex__fill c-info__item">
                <div class="l-flex__none c-info__title">支持内容保护</div>
                <div class="l-flex__fill c-info__value">{{ supportContentProtection }}</div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="l-flex__fill l-flex--row center u-color--info">
            <div class="l-flex--col center">
              <div class="has-padding">未绑定发送控制设备，请联系管理员</div>
              <button
                v-if="isSuperAdmin"
                class="o-button"
                @click="onBind"
              >
                绑定设备
              </button>
            </div>
          </div>
        </template>
      </template>
    </template>
    <table-dialog
      ref="chooseDialog"
      title="发送控制设备选择"
      :schema="schema"
      @choosen="onChoose"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getSendingCard,
  getSendingCardManufacturers,
  getSendingCards,
  bindSendingCard,
  unbind
} from '@/api/external'
import { Transmitter } from '@/constant'
import { createListOptions } from '@/utils'

export default {
  name: 'Transmitter',
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      error: false,
      info: null,
      options: createListOptions({ manufacturerKey: void 0 }),
      schema: {
        condition: { manufacturerKey: void 0 },
        filters: [
          { key: 'manufacturerKey', type: 'select', placeholder: '全部厂家', value: 'manufacturerKey', label: 'manufacturerName', invoke: getSendingCardManufacturers }
        ],
        list: getSendingCards,
        cols: [
          { prop: 'manufacturerName', label: '厂商' },
          { prop: 'name', label: '设备名称' },
          { prop: 'type', label: '设备型号' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['isSuperAdmin']),
    transmitter () {
      return this.info?.thirdPartyDevice
    },
    type () {
      return this.transmitter && this.transmitter.flag & Transmitter.IS_ASYNC ? '异步盒' : '非异步盒'
    },
    supportDetection () {
      return this.transmitter && this.transmitter.flag & Transmitter.SUPPORT_DETECTION ? '是' : '否'
    },
    supportContentProtection () {
      return this.transmitter && this.transmitter.flag & Transmitter.SUPPORT_CONTENT_PROTECTION ? '是' : '否'
    }
  },
  activated () {
    !this.info && this.getSendingCard()
  },
  methods: {
    getSendingCard () {
      if (this.loading) {
        return
      }
      this.info = null
      this.loading = true
      this.error = false
      getSendingCard(this.device.id).then(
        data => {
          this.info = data
        },
        () => {
          this.error = true
        }
      ).finally(() => {
        this.loading = false
      })
    },
    onBind () {
      this.$refs.chooseDialog.show()
    },
    onChoose ({ value, done }) {
      bindSendingCard(this.device.id, value.id).then(() => {
        done()
        this.getSendingCard()
      })
    },
    onUnbind () {
      this.$confirm(
        '解绑发送控制设备？',
        { type: 'warning' }
      ).then(() => {
        unbind(this.info.id).then(this.getSendingCard)
      })
    }
  }
}
</script>
