<template>
  <view class="qrcode-container" :style="viewColor">
    <view style="padding-top: var(--status-bar-height)"></view>
    <!-- <BackBar title="收款二维码" url="/pages/home/home"></BackBar> -->
    <view class="qrcode">
      <uni-popup ref="amountRef" type="center" round="10">
        <view class="qrcode-popup">
          <view class="qrcode-popup-title">设置金额</view>
          <view class="qrcode-popup-input-box">
            <input
              v-model="formData.amount"
              type="number"
              class="uni-input"
              placeholder="输入收款金额"
            />
          </view>
          <view class="qrcode-btn" @click="setAmountMethod">确定</view>
        </view>
      </uni-popup>
      <view class="qrcode-box">
        <view class="qrcode-line"></view>
        <view class="qrcode-title">扫一扫向我付款</view>
        <view class="qrcode-value">
          <view class="qrcode-value-bg">
            <view class="qrcode-value-box">
				<zb-code v-if="val" ref="qrcode" :show="codeShow" :cid="cid" :val="val" :size="size" :unit="unit" :background="background"
				 :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :onval="onval" :loadMake="loadMake"
				 @result="qrR" />
              <view v-else class="qrcode-btn" @click="showAmountPopup">设置金额</view>
            </view>
          </view>
        </view>
        <view
          v-if="itShow"
          class=""
          style="
            padding: 10rpx 5rpx 40rpx 0;
            font-size: 28rpx;
            font-weight: normal;
			text-align: center;
          "
          >
          已设置金额:<span style="color: red; font-size: 32rpx">{{formData.amount}}</span>
		  <view style="margin-top: 20rpx;" class="qrcode-btn" @click="showAmountPopup">设置金额</view>
		</view>
      </view>
    </view>
      
  </view>
</template>

<script>
	import zbCode from '@/components/zb-code/zb-code.vue'
	import {setOrderCreate} from '@/api/admin.js'
	import {mapGetters} from 'vuex'
	export default {
		components: {
			zbCode
		},
		data() {
			return {
				formData:{
					amount:''
				},
				amountUrl:'',
				amountInput:'',
				mer_id:'',
				itShow:false,
				//二维码参数
				codeShow: false,
				cid: '1',
				ifShow: true,
				val: "", // 要生成的二维码值
				size: 300, // 二维码大小
				unit: 'upx', // 单位
				background: '#FFF', // 背景色
				foreground: '#000', // 前景色
				pdground: '#32dbc6', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				codeSrc: "",
			}
		},
		onLoad(val) {
			this.mer_id = val.mer_id
		},
		computed:{
			...mapGetters(['viewColor'])
		},
		methods:{
			qrR(res) {
				this.codeSrc = res
			},
			async setAmountMethod(){
				let {data,status} = await setOrderCreate(this.mer_id,this.formData)
				if(status ==200){
					this.$refs.amountRef.close()
					this.itShow = true
					this.codeShow = true
					let params = {
						sn:data.order_no
					}
					this.val = JSON.stringify(params)
				}
			},
			showAmountPopup(){
				this.$refs.amountRef.open('center')
			}
		}
	}
</script>

<style scoped lang="scss">
	.qrcode-container {
	  box-sizing: border-box;
	}
	.bottom {
	  width: 90%;
	  margin-top: 20rpx;
	  background: white;
	  backdrop-filter: blur(40rpx);
	  padding: 36rpx 36rpx;
	  border-radius: 16rpx;
	  overflow: hidden;
	  top: -5%;
	  position: relative;
	  box-sizing: border-box;
	  &-remark {
	    background: #f2f2f7;
	    border-radius: 8rpx;
	    margin-top: 20rpx;
	    padding: 20rpx 8rpx;
	  }
	  &-title{
	    font-weight: 700;
	  }
	}
	.qrcode {
	  background: linear-gradient(var(--view-bntColor11) 5%, var(--view-bntColor12) 80%, var(--view-bntColor21) 100%);
	  height: calc(100vh - var(--status-bar-height));
	  overflow-y: scroll;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  padding: 0 36rpx;
	  position: relative;
	  flex-direction: column;
	  &-box {
	    width: 90%;
	    backdrop-filter: blur(40rpx);
	    padding: 60rpx 0;
	    box-sizing: border-box;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    background: white;
	    border-radius: 16rpx;
	    position: relative;
	    overflow: hidden;
	    top: -5%;
	    &::before {
	      content: "";
	      background: var(--view-bntColor11);
	      width: 40rpx;
	      height: 40rpx;
	      border-radius: 50%;
	      position: absolute;
	      left: -20rpx;
	      top: 240rpx;
	    }
	
	    &::after {
	      content: "";
	      background: var(--view-bntColor11);
	      width: 40rpx;
	      height: 40rpx;
	      border-radius: 50%;
	      position: absolute;
	      right: -20rpx;
	      top: 240rpx;
	    }
	  }
	
	  &-avatar {
	    width: 136rpx;
	    height: 136rpx;
	    border-radius: 50%;
	    background: black;
	    margin-bottom: 20rpx;
	    overflow: hidden;
	    &-image {
	      width: 136rpx;
	      height: 136rpx;
	    }
	  }
	
	  &-name {
	    font-size: 32rpx;
	    font-weight: 400;
	    color: #888888;
	    margin-bottom: 22rpx;
	  }
	
	  &-line {
	    width: 90%;
	    height: 1rpx;
	    border: 2rpx dashed rgba(242, 242, 247, 1);
	    margin-bottom: 20rpx;
	  }
	
	  &-title {
	    font-size: 32rpx;
	    font-weight: bold;
	    color: #4e4e4e;
	    margin-bottom: 16rpx;
	  }
	
	  &-value {
	    width: 400rpx;
	    height: 400rpx;
	    background: #fafafc;
	    border-radius: 24rpx;
	    padding: 14rpx;
	    box-sizing: border-box;
	    margin: 20rpx 0;
	    &-bg {
	      height: 100%;
	      background: white;
	      padding: 18rpx;
	      box-sizing: border-box;
	    }
	    &-box {
	      height: 100%;
	      background-color: rgb(242, 242, 247);
	      display: flex;
	      justify-content: center;
	      align-items: center;
	    }
	  }
	
	  &-amount {
	    font-size: 36rpx;
	    font-weight: bold;
	    color: #4e4e4e;
	  }
	
	  &-btn {
	    width: 284rpx;
	    height: 68rpx;
	    background: linear-gradient(180deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
	    border-radius: 16rpx;
	    font-size: 28rpx;
	    font-weight: 400;
	    color: #ffffff;
	    display: flex;
	    justify-content: center;
	    align-items: center;
		margin: 0 auto;
	  }
	
	  &-popup {
	    width: 660rpx;
	    height: 408rpx;
	    background: #ffffff;
	    border-radius: 16rpx;
	    padding: 36rpx 24rpx;
	    box-sizing: border-box;
	
	    &-title {
	      font-size: 34rpx;
	      font-weight: bold;
	      color: #333333;
	      text-align: center;
	      margin-bottom: 60rpx;
	      text-align: center;
	    }
	
	    &-input-box {
	      padding: 28rpx 40rpx;
	      box-sizing: border-box;
	      background: #f2f2f7;
	      border-radius: 8rpx;
	      margin-bottom: 40rpx;
	      uni-input{
	        font-size: 36rpx;
	      }
	    }
	  }
	}
	
</style>