<template>
  <div class="subPage">
    <div class="flex-h top">
      <div class="flex-item">
        <div>
          <i class="iconfont icon-qrcode"></i>
          <span>1</span>
          <span>请用户出示核销的二维码</span>
        </div>
      </div>
      <div class="flex-item">
        <div>
          <i class="iconfont icon-saoma"></i>
          <span>2</span>
          <span>点击“立即核销”按钮<br>使用扫码枪扫描客户二维码</span>
        </div>
      </div>
      <div class="flex-item">
        <div>
          <i class="iconfont icon-hexiao"></i>
          <span>3</span>
          <span>根据提示进行核销操作</span>
        </div>
      </div>
    </div>
    <div style="text-align:center;margin-top:40px;">
      <el-button type="danger" round @click="centerDialogVisible = true">立即核销</el-button>
    </div>
    <el-dialog
      title="核销"
      :visible.sync="centerDialogVisible"
      width="500px"
      @close="verificationCode = ''"
      center>
      <div v-if="centerDialogVisible">
        <el-input
          autofocus
          ref="input"
          placeholder="请输入核销码"
          v-model="verificationCode"
          clearable>
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toVerify">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions: mapVerificActions } = createNamespacedHelpers('verification')
export default {
  name: '',
  data () {
    return {
      centerDialogVisible: false, // 显隐核销弹窗
      verificationCode: '', // 核销码
    }
  },
  mounted () {
    this.$nextTick(function () { })
  },
  methods: {
    ...mapVerificActions([
      'drawVerifyList',
    ]),
    toVerify () {
      if (this.verificationCode !== '') {
        this.drawVerifyList({
          id: this.verificationCode
        }).then((res) => {
          // console.log(JSON.stringify(res))
          if (res !== null) {
            this.toVerificationList()
          }
        }).catch((msg) => {
          this.centerDialogVisible = false
          this.verificationCode = ''
        })
      } else {
        this.$message({
          message: '核销码为空！',
          type: 'error'
        })
      }
    },
    toVerificationList () { // 定向到核销列表
      this.$router.push({ name: 'drawVerificationList', query: { code: this.verificationCode } })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>
