<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <schema-table
      ref="table"
      :schema="schema"
    />
    <confirm-dialog
      ref="editDialog"
      :title="dialogTitle"
      @confirm="onConfirm"
    >
      <div class="c-grid-form u-align-self--center">
        <span class="c-grid-form__label required">厂商：</span>
        <schema-select
          v-model="transmitter.manufacturerKey"
          placeholder="请选择厂商"
          :schema="manufacturerSelectSchema"
        />
        <span class="c-grid-form__label required">设备名称：</span>
        <el-input
          v-model.trim="transmitter.name"
          placeholder="最多50个字符"
          maxlength="50"
          clearable
        />
        <span class="c-grid-form__label required">设备型号：</span>
        <el-input
          v-model.trim="transmitter.type"
          placeholder="最多50个字符"
          maxlength="50"
          clearable
        />
        <span class="c-grid-form__label">异步盒：</span>
        <div class="l-flex--row c-grid-form__option">
          <el-switch
            v-model="flag.async"
            class="c-sibling-item"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
          <span class="c-sibling-item far">支持设备监测：</span>
          <el-switch
            v-model="flag.detection"
            class="c-sibling-item"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
          <span class="c-sibling-item far">支持内容保护：</span>
          <el-switch
            v-model="flag.contentProtection"
            class="c-sibling-item"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </div>
        <span class="c-grid-form__label">备注：</span>
        <el-input
          v-model.trim="transmitter.remark"
          type="textarea"
          maxlength="100"
          :rows="3"
          show-word-limit
        />
      </div>
    </confirm-dialog>
  </wrapper>
</template>

<script>
import {
  getSendingCardManufacturers,
  getSendingCards,
  addSendingCard,
  updateSendingCard,
  deleteSendingCard
} from '@/api/external'
import { Transmitter } from '@/constant'

export default {
  name: 'TransmitterList',
  data () {
    const manufacturerSelectSchema = {
      remote: getSendingCardManufacturers,
      value: 'manufacturerKey',
      label: 'manufacturerName'
    }

    return {
      protocols: [
        { value: 'net', label: '网络' },
        { value: 'sdk', label: 'SDK' }
      ],
      transmitter: {},
      flag: {},
      manufacturerSelectSchema,
      schema: {
        condition: { manufacturerKey: void 0 },
        list: getSendingCards,
        buttons: [
          { type: 'add', on: this.onAdd }
        ],
        filters: [
          { key: 'manufacturerKey', type: 'select', placeholder: '全部厂商', ...manufacturerSelectSchema }
        ],
        cols: [
          { prop: 'manufacturerName', label: '厂商' },
          { prop: 'name', label: '设备名称' },
          { prop: 'type', label: '设备型号' },
          { label: '设备类型', render ({ flag }) { return flag & Transmitter.IS_ASYNC ? '异步盒' : '非异步盒' } },
          { label: '特性', type: 'tag', render ({ flag }) {
            const tags = []
            if (flag & Transmitter.SUPPORT_DETECTION) {
              tags.push({ type: 'success', label: '设备监测' })
            }
            if (flag & Transmitter.SUPPORT_CONTENT_PROTECTION) {
              tags.push({ type: 'success', label: '内容保护' })
            }
            return tags
          }, on: this.onClickTag },
          { prop: 'remark', label: '备注' },
          { type: 'invoke', render: [
            { label: '编辑', on: this.onEdit },
            { label: '删除', on: this.onDel }
          ] }
        ]
      }
    }
  },
  computed: {
    dialogTitle () {
      return this.transmitter.id ? '添加发送控制设备' : '修改发送控制设备'
    }
  },
  methods: {
    onAdd () {
      this.transmitter = {
        manufacturerKey: '',
        name: '',
        type: '',
        remark: ''
      }
      this.flag = {
        async: false,
        detection: false,
        contentProtection: false
      }
      this.$refs.editDialog.show()
    },
    onEdit ({ id, manufacturerKey, manufacturerName, name, type, flag, remark }) {
      this.manufacturerSelectSchema.option = { value: manufacturerKey, label: manufacturerName }
      this.transmitter = { id, manufacturerKey, name, type, remark }
      this.flag = {
        async: !!(flag & Transmitter.IS_ASYNC),
        detection: !!(flag & Transmitter.SUPPORT_DETECTION),
        contentProtection: !!(flag & Transmitter.SUPPORT_CONTENT_PROTECTION)
      }
      this.$refs.editDialog.show()
    },
    onConfirm (done) {
      if (!this.transmitter.manufacturerKey) {
        this.$message({
          type: 'warning',
          message: '请选择厂商'
        })
        return
      }
      if (!this.transmitter.name) {
        this.$message({
          type: 'warning',
          message: '请填写设备名称'
        })
        return
      }
      if (!this.transmitter.type) {
        this.$message({
          type: 'warning',
          message: '请填写设备型号'
        })
        return
      }
      const { async: isAsync, detection, contentProtection } = this.flag
      let flag = 0
      if (isAsync) {
        flag |= Transmitter.IS_ASYNC
      }
      if (detection) {
        flag |= Transmitter.SUPPORT_DETECTION
      }
      if (contentProtection) {
        flag |= Transmitter.SUPPORT_CONTENT_PROTECTION
      }
      const transmitter = {
        ...this.transmitter,
        flag
      }
      if (transmitter.id) {
        this.onConfirmEdit(transmitter, done)
      } else {
        this.onConfirmAdd(transmitter, done)
      }
    },
    onConfirmAdd (transmitter, done) {
      addSendingCard(transmitter).then(() => {
        done()
        this.$refs.table.resetCondition({ manufacturerKey: this.transmitter.manufacturerKey })
      })
    },
    onConfirmEdit (transmitter, done) {
      updateSendingCard(transmitter).then(() => {
        done()
        this.$refs.table.pageTo()
      })
    },
    onDel (item) {
      deleteSendingCard(item).then(() => {
        this.$refs.table.decrease(1)
      })
    }
  }
}
</script>
