<template>
  <el-dialog v-model="show" width="400px" @close="close">
    <div class="weCodeBox">
      <p>订单编号：{{ qrObj.orderId }}</p>
      <p class="price">
        应付金额：¥<span>{{ qrObj.finalPrice }}</span>
      </p>
      <img src="@/assets/img/WePayLogo.png" style="width: 200px">
      <img class="code" :src="qrObj.qrCode">
      <img src="@/assets/img/sm.png">
    </div>
  </el-dialog>
</template>

<script setup>
import { onBeforeUnmount, toRefs, watch } from 'vue'
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['close'])
const { proxy } = getCurrentInstance()

const data = reactive({
  qrObj: {},
  show: false
})
const { qrObj, show } = toRefs(data)

const sockets = {
  payBack: (res) => {
    console.log(res)
    if (res === qrObj.value.orderId) {
      ElMessage.success('支付成功')
      close()
    }
  }
}

const open = (params) => {
  show.value = true
  qrObj.value = params
}

const close = () => {
  show.value = false
  emit('close')
}

watch(show, (val) => {
  if (val) {
    proxy.$socket.addListener(sockets, proxy)
  } else {
    proxy.$socket.removeListener(sockets, proxy)
  }
})

defineExpose({
  open
})

onBeforeUnmount(() => {
  proxy.$socket.disconnect()
})
</script>

<style scoped></style>