<template>
  <el-card class="iccard-card">
    <div class="block-title">
      {{ currentType.name }}（请刷IC卡）
    </div>
    <ElTable
      width="100%"
      class="iccard-table"
      :data="tableData">
      <ElTableColumn
        label="#"
        type="index">
      </ElTableColumn>
      <ElTableColumn
        label="IC卡号">
        <template slot-scope="scope">
          {{ scope.row }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="操作">
        <template slot-scope="scope">
          <span
            class="el-button el-button--primary el-button--mini"
            @click="delRow(scope.$index)">
            <i class="el-icon-delete"></i>
            删除
          </span>
        </template>
      </ElTableColumn>
    </ElTable>
    <div class="btn-wrap">
      <div>
        <span></span>
        <span v-show="tableData.length">
          共计
          <b class="strong">
            {{ tableData.length }}
          </b>
        </span>
      </div>
      <div>
        <el-button
          type="default"
          @click="reset">
          重置
        </el-button>
        <el-button
          type="primary"
          @click="submit">
          确认入库
        </el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import { iccardStorage } from '@/api/member'
import { getComName } from '@/api/ZTKReaderApi'
export default {
  props: {
    currentType: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      baseUrl: 'http://127.0.0.1:24010/ZKIDROnline/MFCard?OP-DEV=1&CMD-URL=1&iPort=1',
      tableData: [],
      finished: false,
      tableHeight: 300
    }
  },
  async mounted () {
    await this.getComName()
    this.getIcInfo()
  },
  beforeDestroy () {
    this.timer && clearTimeout(this.timer)
    this.finished = true
  },
  methods: {
    // 获取读卡器端口
    getComName () {
      getComName().then(res => {
        if (res.data.ret !== 0) {
          this.$message.error('获取设备信息失败')
        } else {
          let comName = res.data.data.name.slice(3)
          this.baseUrl = 'http://127.0.0.1:24010/ZKIDROnline/MFCard?OP-DEV=1&CMD-URL=1&iPort=' + comName
        }
      })
    },
    delRow (index) {
      this.tableData.splice(index, 1)
    },
    getIcInfo () {
      if (this.finished) return
      this.timer && clearTimeout(this.timer)
      this.$http.post(this.baseUrl).then(res => {
        switch (res.data.ret) {
          case 0:
            this.$message.success('读取成功！')
            console.log(res.data.data.ICSnr)
            this.addTableData(res.data.data.ICSnr)
            break
          case 1:
            this.$message.error('未连接读卡器，请检查设备后重试。')
            break
          case 11:
            this.$message.error('读卡失败。')
            break
        }
        this.timer = setTimeout(() => {
          this.getIcInfo()
        }, 300)
      }).catch(e => {
        e && console.log(e)
        this.$message.error('未连接读卡器，请检查设备后重试。')
      })
    },
    addTableData (data) {
      if (this.tableData.some(ic => data === ic)) {
        this.$message.error('重复')
      } else {
        this.tableData.unshift(data)
      }
    },
    reset () {
      this.tableData = []
    },
    submit () {
      let params = {
        list: this.tableData,
        memberTypeId: this.currentType.id
      }
      iccardStorage(params).then(res => {
        this.$message.success('入库成功')
        this.reset()
      })
    }
  }
}
</script>

<style lang="scss">
.iccard-card {
  margin: 20px;
  height: calc(100% - 40px);
  .el-card__body {
    height: 100%;
  }
  .iccard-table {
    height: calc(100% - 140px);
  }
  .btn-wrap {
    margin: 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
