<template>
  <div
    v-loading="loading"
    class="l-flex--col"
  >
    <template v-if="!loading">
      <warning
        v-if="error"
        @click="getSendingCard"
      />
      <div
        v-else
        class="c-info"
      >
        <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 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">{{ recoveryCard }}</div>
          </div>
          <div class="l-flex--row l-flex__fill c-info__item" />
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { getSendingCard } from '@/api/external'
import { Transmitter } from '@/constant'

export default {
  name: 'DeviceSendingCard',
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      error: false,
      info: null
    }
  },
  computed: {
    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 ? '支持' : '不支持'
    },
    recoveryCard () {
      return this.transmitter && this.transmitter.flag & Transmitter.RECOVERY_CARD ? '包含' : '不包含'
    }
  },
  created () {
    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
      })
    }
  }
}
</script>
