<template>
  <el-dialog title="支付二维码" v-model="visible" width="800px" height="80%" @close="handleClose">
    <el-table :data="tableData" border>
      <el-table-column label="唯一号" prop="serialNumber" align="center"></el-table-column>
      <el-table-column label="姓名" prop="name" align="center"></el-table-column>
      <el-table-column label="家长手机号" prop="parentTelOne" align="center"></el-table-column>
      <el-table-column label="操作" prop="" align="center">
        <template #default>
          <el-button @click="handleUpdateFS" icon="el-icon-search" type="danger" size="small">立即查询</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding-top: 20px;">
      <div id="payQrcode1" style="display: inline-block;">
        {{ payQrcode1Msg }}
      </div>
      <vue-qr :text="payQrcode1" :size="200" v-if="showPrise1" style="display: inline-block"></vue-qr>

      <div id="payQrcode2" style="display: inline-block">
        {{ payQrcode2Msg }}
      </div>
      <vue-qr :text="payQrcode2" :size="200" v-if="showPrise2" style="display: inline-block"></vue-qr>

      <div id="payQrcode3" style="display: inline-block">
        {{ payQrcode3Msg }}
      </div>
      <vue-qr :text="payQrcode3" :size="200" v-if="showPrise3" style="display: inline-block"></vue-qr>
    </div>
    <span style="color: red;padding-top: 20px;">** 此界面为查询学生缴款二维码，如有收不到微信推送，或手机号填错的，可直接在此扫码支付，支付成功后，请手动点击"立即查询"按钮，查询该生的缴费情况;因财政收费系统有一定的滞后性，如点击"立即查询"后任显示未交费，请稍后再继续查询，或重新点击"立即查询"按钮 **</span>
  </el-dialog>
</template>

<script>
import { ref } from 'vue'
import { ElNotification } from 'element-plus'
import { updateFs } from '/@/api/finance/financenormalstu'

export default {
  name: 'PayQrcodeDialog',
  emits: ['refresh'],
  setup(props, { emit }) {
    const visible = ref(false)
    const tableData = ref([])
    const payQrcode1 = ref('')
    const showPrise1 = ref(false)
    const payQrcode1Msg = ref('')
    const payQrcode2 = ref('')
    const payQrcode2Msg = ref('')
    const showPrise2 = ref(false)
    const payQrcode3 = ref('')
    const payQrcode3Msg = ref('')
    const showPrise3 = ref(false)

    const init = (row) => {
      showPrise1.value = false
      showPrise2.value = false
      showPrise3.value = false

      // 置空
      payQrcode1.value = ''
      payQrcode2.value = ''
      payQrcode3.value = ''

      if (row.clfPayCode == '' || row.clfPayCode == undefined) {
        payQrcode1Msg.value = ''
        showPrise1.value = false
      } else {
        payQrcode1Msg.value = '材料费、代办费'
        showPrise1.value = true
        payQrcode1.value = 'https://jscz.govpay.ccb.com/online/fsjf?PyF_BillNo=' + row.clfPayCode + '&Verf_CD=blank&Admn_Rgon_Cd=320400'
      }

      if (row.xfPayCode == '' || row.xfPayCode == undefined) {
        payQrcode2Msg.value = ''
        showPrise2.value = false
      } else {
        payQrcode2Msg.value = '学费'
        showPrise2.value = true
        payQrcode2.value = 'https://jscz.govpay.ccb.com/online/fsjf?PyF_BillNo=' + row.xfPayCode + '&Verf_CD=blank&Admn_Rgon_Cd=320400'
      }

      if (row.zdbPayCode == '' || row.zdbPayCode == undefined) {
        payQrcode3Msg.value = ''
        showPrise3.value = false
      } else {
        payQrcode3Msg.value = '中德班学费'
        showPrise3.value = true
        payQrcode3.value = 'https://jscz.govpay.ccb.com/online/fsjf?PyF_BillNo=' + row.zdbPayCode + '&Verf_CD=blank&Admn_Rgon_Cd=320400'
      }

      tableData.value = []
      tableData.value.push(row)
      visible.value = true
    }

    const handleUpdateFS = () => {
      if (tableData.value.length === 0) return
      updateFs({ "serialNumber": tableData.value[0].serialNumber.substring(1, tableData.value[0].serialNumber.length) }).then(() => {
        ElNotification.success('已提交查询请求，请等待1分钟后重新查询')
        visible.value = false
        emit('refresh')
      })
    }

    const handleClose = () => {
      visible.value = false
    }

    return {
      visible,
      tableData,
      payQrcode1,
      showPrise1,
      payQrcode1Msg,
      payQrcode2,
      showPrise2,
      payQrcode2Msg,
      payQrcode3,
      showPrise3,
      payQrcode3Msg,
      init,
      handleUpdateFS,
      handleClose
    }
  }
}
</script>

<style scoped>
</style>

