/*扫码支付*/
<template>
  <div>
    <transition name="marsk-fade">
      <div v-show="payConfig.isShow" class="marsk" />
    </transition>
    <transition name="slide-fade">
      <div v-show="payConfig.isShow" class="action-pay">
        <div class="container">
          <div class="header">
            <!-- <p>收款方：{{ payConfig.Payee }}</p> -->
            <p>积分充值，请尽快完成支付。</p>
            <span>{{ payConfig.amount }}元</span>
          </div>
          <div class="content">
            <div class="operation">
              <i class="el-icon-circle-close" @click="close" />
            </div>
            <div class="qrcode">
              <vue-qr
                :size="200"
                :text="payConfig.payUrl"
                :margin="25"
                :logo-scale="0.1"
                :logo-src="payConfig.qrcode"
                :logo-margin="5"
              />
              <div class="scan">
                <el-image
                  class="image-scan"
                  :src="scan"
                  fit="cover"
                  alt="scan"
                />
              </div>
            </div>
            <p>
              打开{{
                payConfig.payType == 'WeChat' ? '微信' : '支付宝'
              }}，扫一扫付款
            </p>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import scan from '@/assets/img/scan.png'
import VueQr from 'vue-qr'
export default {
  name: 'Pay',
  components: { VueQr },
  props: {
    payConfig: {
      isShow: {
        type: Boolean,
        default: () => false,
      },
      Payee: {
        type: String,
        default: () => '',
      },
      qrcode: {
        type: String,
        default: () => '',
      },
      payType: {
        type: String,
        default: () => 'WeChat',
      },
      amount: {
        type: String,
        default: () => '0.00',
      },
      payUrl: {
        type: String,
        default: () => '',
      },
    },
  },
  data() {
    return {
      scan: scan,
    }
  },
  methods: {
    // 点击关闭
    close() {
      this.$emit('putPay', false)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';

.marsk-fade-enter-active,
.marsk-fade-leave-active {
  transition: all 0.5s;
}
.marsk-fade-enter,
.marsk-fade-leave-to {
  opacity: 0;
}
.marsk {
  @include position(fixed, 0, 0, 0, 0, 1000);
  background: rgba(244, 244, 244, 0.98);
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(7.48rem);
}
.action-pay {
  @include position(absolute, 0, 0, 0, 0, 1001);
  @include w_h(100%, 100%);
  min-width: 1000px;
  .container {
    padding: 50px 12%;
    .header {
      @include flex();
      p {
        font-size: 14px;
        color: $color_3;
      }
      span {
        font-size: 20px;
        color: $color_on;
      }
    }
    .content {
      @include w_h(100%);
      margin-top: 30px;
      position: relative;
      padding: 80px;
      font-size: 14px;
      text-align: center;
      color: $color_9;
      background: $color_f;
      .operation {
        @include position(absolute, 5px, auto, auto, 5px, 1);
        font-size: 24px;
        color: $color_9;
      }
      .operation:hover {
        cursor: pointer;
        color: $color_b;
      }
      .qrcode {
        @include w_h(200px, 200px);
        position: relative;
        margin: 15px auto;
        box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
        .scan {
          @include position(absolute, -50px, auto, auto, -110px, 1);
          @include w_h(100px, 100px);

          opacity: 0;
          transform: scale(1);
          animation-name: sacn;
          animation-duration: 2.5s;
          animation-timing-function: linear;
          animation-delay: 0.3s;
          animation-iteration-count: infinite;
          animation-fill-mode: forwards;
        }
        @keyframes sacn {
          0% {
            opacity: 1;
            transform: scale(1);
          }
          20% {
            opacity: 0.9;
            transform: scale(0.9);
          }
          40% {
            opacity: 0.8;
            transform: scale(0.8);
          }
          50% {
            opacity: 0.7;
            transform: scale(0.7);
          }
          60% {
            opacity: 0.8;
            transform: scale(0.8);
          }
          80% {
            opacity: 0.9;
            transform: scale(0.9);
          }
          100% {
            opacity: 1;
            transform: scale(1);
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';

.action-pay {
  .el-image {
    @include w_h(100%);
  }
}
</style>
