<template>
  <!-- 会员入库 -->
  <div class="sell-form">
    <div class="sell-form-inner">
      <div class="top-block">
        <div class="side-content">
          <TypeList v-model="currentType"></TypeList>
        </div>
        <div class="main-content">
          <div class="content-inner custom-scroll block-wrap">
            <div
              class="block-title"
              v-if="currentType">
              {{ currentType.name }}（请刷IC卡）

              <div class="side-wrap">
                <!-- <el-input
                  v-model="cardInput"
                  placeholder="输入IC卡号"
                  style="margin-right:10px"></el-input> -->
                <div style="display: flex;">
                  <ReaderInput
                    type="IC"
                    v-model="cardInput"
                    style="margin-right:10px">
                  </ReaderInput>

                  <el-button
                    @click="handleHandAdd"
                    type="primary">
                    添加
                  </el-button>
                </div>

                <!-- <el-button
                  :icon="finished?'':'el-icon-loading'"
                  :type="finished?'primary':'danger'"
                  @click="startRead">
                  {{ finished?'开始读取IC卡':'停止读卡' }}
                </el-button> -->
              </div>
            </div>
            <el-table
              border
              stripe
              width="100%"
              class="iccard-table"
              :data="tableData">
              <el-table-column
                label="#"
                type="index">
              </el-table-column>
              <el-table-column
                label="IC卡号">
                <template slot-scope="scope">
                  {{ scope.row }}
                </template>
              </el-table-column>
              <el-table-column 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>
              </el-table-column>
            </el-table>
          </div>

          <div class="footer block-wrap">
            <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"
                  size="medium"
                  @click="reset">
                  重置
                </el-button>
                <el-button
                  type="primary"
                  size="medium"
                  class="warn-btn"
                  @click="submit">
                  确认入库
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TypeList from './common/TypeList'

import { iccardStorage } from '@/api/member'
import { getComName } from '@/api/ZTKReaderApi'
import ReaderInput from '@/components/ReaderInput'

export default {
  components: {
    ReaderInput,
    TypeList
  },
  data () {
    return {
      cardInput: '',
      tableData: [],
      currentType: {},
      baseUrl: 'http://127.0.0.1:24010/ZKIDROnline/MFCard?OP-DEV=1&CMD-URL=1&iPort=1',
      finished: true,
      tableHeight: 300,
      showRepeatMessage: false
    }
  },
  methods: {
    async init () {

    },
    async startRead () {
      this.finished = !this.finished

      if (this.finished) return
      await this.getComName()
      this.getIcInfo()
    },
    // 获取读卡器端口
    getComName () {
      getComName().then(res => {
        if (res.data.ret !== 0) {
          this.$message.error('获取设备信息失败')
          this.finished = true
        } 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()
        }, 500)
      }).catch(e => {
        e && console.log(e)
        this.$message.error('未连接读卡器，请检查设备后重试。')
      })
    },
    addTableData (data) {
      if (this.tableData.some(ic => data === ic)) {
      } 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()
      })
    },
    // 清除定时器
    clearTimer () {
      this.timer && clearTimeout(this.timer)
      this.finished = true
    },
    handleHandAdd () {
      if (!this.cardInput) {
        this.$message.error('请输入卡号')
        return
      }
      // let cardNum = parseInt(this.cardInput) + ''
      // if (isNaN(cardNum)) {
      let cardNum = this.cardInput
      // }
      this.addTableData(cardNum)
      this.cardInput = ''
    }
  },
  mounted () {
    this.init()
  },
  beforeDestroy () {
    this.clearTimer()
  },
  watch: {
    // cardInput (val) {
    //   if (!val || this.lock) return
    //   this.lock = true
    //   setTimeout(() => {
    //     this.addTableData(this.cardInput)
    //     this.cardInput = ''
    //     this.lock = false
    //   }, 500)
    // }
  }
}
</script>
<style lang="scss" scoped>
  .member-sales {
    position: absolute; top: 0;right: 0;bottom: 0; left: 0;
  }
  .search-wrap {
    position: absolute;top: 0; z-index: 10; width: 340px; padding: 20px 0 0 20px;
    .search-input {
      width: 100%;
    }
  }
  .member-list {
    padding: 0 0 20px 20px;
    .el-table {
      height: calc(100% - 42px);  overflow-y: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
  .el-icon-loading {
    font-size: 35px;
  }

  .side-wrap{
    float: right;
    .el-button{
      float: none;
    }
  }
</style>
