<template>
  <div>
    <el-dialog
      title="请扫码或刷卡"
      :visible.sync="visible"
      :close-on-click-modal="false"
      append-to-body
      width="50%"
      @close="closeQrcodeDialog">
      <div class="wrap">
        <el-input
          clearable
          v-model="qrcode"
          @blur="$refs.qrcodeInput.focus()"
          ref="qrcodeInput"></el-input>
        <el-button
          @click="reload"
          style="margin-left:10px">
          重新读卡
        </el-button>
        <el-button
          @click="submit"
          type="primary"
          style="margin-left:10px">
          确定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="发起支付"
      :visible.sync="showCardDetail"
      :close-on-click-modal="false"
      append-to-body
      width="50%"
      @close="closeDialog">
      <div
        class="cardDetail"
        style="padding:20px">
        <p><span>储值卡号:</span>{{ formatZero(qrcode) }}</p>
        <p><span>储值卡余额:</span>￥{{ balance }}</p>
        <p><span>储值卡折扣:</span>{{ discount / 100?discount / 100:'无' }}</p>
        <p><span>折后价格:</span>￥{{ orderPrice }}</p>
        <p>
          <span>储值卡密码:</span>
          <el-input
            placeholder="请输入密码"
            v-model="password"
            size="small"
            style="width:150px"
            show-password
            ref="passwordInput"></el-input>
          <el-button
            @click="pay"
            type="primary"
            :disabled="orderPrice >= balance"
            style="margin-left:10px">
            确定
          </el-button>
          <span
            v-if="orderPrice > balance"
            class="tip"> 余额不足</span>
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getICCardNo } from '@/api/icCard'
import { getValueCard } from '@/api/pay'
export default {
  data () {
    return {
      qrcode: '',
      visible: false,
      orderPrice: 0, // 订单总价
      balance: '', // 余额
      tickets: [], // 购买的门票
      discount: '', // 折扣
      password: '', // 储值卡密码
      payChannel: '',
      recharge_money: '', // 储值卡充值金额
      showCardDetail: false,
      resetQrcode: false,
      timer: null
    }
  },
  methods: {
    show (tickets, payChannel, recharge_money) {
      this.showCardDetail = false
      // 扫码时，不再重复触发弹窗初始化。
      this.tickets = tickets
      this.payChannel = payChannel
      this.recharge_money = recharge_money
      if (this.visible) return

      this.visible = true
      this.qrcode = ''

      this.$nextTick(() => {
        this.$refs.qrcodeInput.focus()

        getICCardNo(null, this).then(code => {
          if (code) {
            if (this.qrcode) return
            this.qrcode = code
          }
        })
      })
    },
    closeQrcodeDialog () {
      this.visible = false
      this.resetQrcode = true
      this.qrcode = ''
    },
    closeDialog () {
      this.showCardDetail = false
      this.password = ''
    },
    reload () {
      this.qrcode = ''
      this.resetQrcode = true
      this.$refs.qrcodeInput.focus()
      getICCardNo(null, this).then(code => {
        if (code) {
          if (this.qrcode) return
          this.qrcode = code
        }
      })
    },
    handleInput (e) {
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        if (this.qrcode.length > 10) {
          if (this.payChannel === '瑞通储值卡') {
            return this.submit()
          }

          this.$emit('getQrcode', this.qrcode)
          this.qrcode = ''
          this.visible = false
        }
      }, 200)
    },
    submit () {
      this.$refs.qrcodeInput.blur()
      if (this.payChannel === '瑞通储值卡') {
        getValueCard({
          cardNo: this.formatZero(this.qrcode),
          payChannel: '瑞通储值卡'
        }).then(res => {
          this.balance = res?.data.balance
          this.discount = res?.data.discount
          this.showCardDetail = true
          if (this.tickets) {
            this.orderPrice = this.tickets[0].total_money ? this.tickets[0].total_money : (this.tickets.reduce((pre, item) => {
              return pre + item.price * (item.is_discount ? (this.discount / 100) : 1)
            }, 0))
          } else {
            this.orderPrice = this.recharge_money
          }
        }).catch(e => {
          e && console.log(e)
          this.$message.error('出错了，请检查设备和驱动')
        })
      } else {
        this.pay()
      }
    },
    pay () {
      let cardInfo = {
        discount: this.discount,
        password: this.password
      }
      this.$emit('getQrcode', this.formatZero(this.qrcode), cardInfo)
      this.visible = false
      this.showCardDetail = false
    },
    formatZero (num, len = 12) {
      if (String(num).length > len) return num
      return (Array(len).join(0) + num).slice(-len)
    }
  },
  watch: {
    visible (val) {
      if (!val) {
        // 结束读卡进程
        this.process && this.process.kill()
      }
    },
    qrcode (newName, oldName) {
      this.showCardDetail = false
      this.handleInput()
      if (!this.resetQrcode && this.payChannel === '瑞通储值卡') {
        this.qrcode = this.formatZero(newName.replace(/^0+/, ''))
      } else {
        this.resetQrcode = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
    padding: 20px; display: flex;
}
.cardDetail{
  span{
    width: 90px;
    display: inline-block;
    font-weight: 600;
  }
  .tip{
    font-weight: normal;
    color: red;
    margin-left: 10px;
  }
}
</style>
