<template>
  <el-dialog
    class="common-dialog"
    title="扫码收款中..."
    :visible="showDialog"
    @close="submit"
    width="580px"
    destroy-on-close
  >
    <el-row>
      <el-col :span="24">
        <div class="main">
          <svg
            t="1666919356080"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3143"
            width="60"
            height="60"
            data-spm-anchor-id="a313x.7781069.0.i25"
          >
            <path
              d="M212.924 434.56h-60.881V71.908h60.881V434.56z m149.56-362.652h-86.03V434.56h86.03V71.908z m111.842 0H431.31V434.56h43.015l0.001-362.652z m151.544 0H525.28V434.56h100.59V71.908z m88.676 0h-25.148V434.56h25.148V71.908z m70.148 0h-33.089V434.56h33.089V71.908z m91.326 0h-64.854V434.56h64.854V71.908z m-6.285 394.083h-58.569V638.8h58.569V465.991z m121.27-31.431h-86.91v31.433h86.91V434.56zM211.77 461.949h-58.572v172.808h58.57V461.949h0.002z m-89.866-27.389H34.995v31.433h86.909V434.56z m600.584 126.252v34.613a270.753 270.753 0 0 1-48.906 155.214L600.72 854.782v93.31H419.4v-93.31l-72.862-104.143a270.76 270.76 0 0 1-48.906-155.214v-34.613c0-37.384 30.305-67.69 67.691-67.69h289.474c37.385 0.002 67.691 30.309 67.691 67.69z m-106.356 20.384H395.72c21.622 38.569 62.84 64.677 110.205 64.677s88.584-26.104 110.207-64.677z"
              p-id="3144"
              fill="#707070"
              data-spm-anchor-id="a313x.7781069.0.i28"
              class="selected"
            ></path>
          </svg>
          <div class="amount-info">
            <span class="amount">￥{{ payAmount.toFixed(2) }}</span>
          </div>
          <div class="tips">请使用扫码枪，扫描会员付款码！</div>
        </div>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit()">扫码完成</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { doPay } from '@/api/cashier'
export default {
  props: {
    showDialog: {
      type: [Boolean],
      default: () => false,
    },
    payAmount: {
      type: [Number],
      default: () => 0,
    },
    orderId: {
      type: [Number],
      default: () => 0,
    },
    payType: {
      type: [String],
      default: () => 'MICROPAY',
    },
  },
  data() {
    return {
      loading: false,
    }
  },
  methods: {
    submit(code) {
      const app = this
      if (code == undefined) {
        this.$emit('closeDialog', 'scanPayCodeDialog')
      } else {
        doPay({
          orderId: app.orderId,
          authCode: code,
          payType: app.payType,
        }).then((response) => {
          if (response.data.payment) {
            app.$emit('closeDialog', 'scanPayCodeDialog')
            app.$emit('showPayResult', {
              isSuccess: true,
              payAmount: app.payAmount,
              orderId: app.orderId,
            })
          } else {
            app.$emit('closeDialog', 'scanPayCodeDialog')
            app.$emit('showPayResult', {
              isSuccess: false,
              payAmount: app.payAmount,
              orderId: app.orderId,
            })
          }
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.main {
  height: 140px;
  padding-top: 2px;
  text-align: center;
  font-size: 16px;
  .amount-info {
    margin-bottom: 20px;
    .amount {
      font-size: 28px;
    }
  }
  .tips {
    font-size: 14px;
    color: #888888;
  }
}
</style>
