<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :mask-closable="false"
    title="支付宝服务商代运营授权"
    :body-style="{ paddingBottom: '80px' }"
    width="40%"
    class="drawer-width"
    @close="vdata.visible = false"
  >
    <div style="background: #fff">
      <a-form ref="configFormModelRef" :model="vdata.alipayAuthData" layout="horizontal">
        <a-form-item label="授权方式" name="authType" :rules="[{ required: true, message: '请选择授权方式' }]">
          <a-radio-group v-model:value="vdata.alipayAuthData.authType">
            <a-radio value="qrcode">使用支付宝扫授权码</a-radio>
            <a-radio value="apply">发送支付宝授权消息</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="支付宝账号" name="alipayAccount" :rules="[{ required: true, message: '请输入支付宝账号' }]">
          <a-input v-model:value="vdata.alipayAuthData.alipayAccount" placeholder="请输入支付宝账号(一般为手机或邮箱)" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" :loading="vdata.btnLoading" @click="alipayAuthFunc"><check-circle-outlined />发起授权</a-button>
        </a-form-item>

        <div v-if="vdata.showAuthStatus">
          <a-form-item label="授权结果">
            <a-typography-text v-if="vdata.alipayAuthData.handleStatus == 'SUCCESS'" type="success">授权成功</a-typography-text>
            <a-typography-text v-else-if="vdata.alipayAuthData.handleStatus == 'PROCESS'" type="warning">待确认授权</a-typography-text>
            <a-typography-text v-else type="danger">未授权</a-typography-text>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" :loading="vdata.btnLoading" @click="queryAlipayAuthResultFunc"><check-circle-outlined />查询授权结果</a-button>
          </a-form-item>
        </div>
      </a-form>
    </div>
  </a-drawer>
  <!-- 扫码授权弹窗 -->
  <a-modal v-model:visible="vdata.showAuthQrCodeUrl" title="二维码" :footer="null" :width="350" @ok="() => vdata.showAuthQrCodeUrl = false">
    <span>请使用支付宝账号【{{ vdata.alipayAuthData.alipayAccount }}】绑定的支付宝扫码，根据页面指引完成授权</span>
    <img :src="vdata.authQrCodeUrl" style="width: 300px;height: 300px;text-align: center;">
  </a-modal>
</template>
<script setup lang="ts">
import { API_ALIPAY_SP_OPERATION, req, reqLoad } from '@/api/manage'
import { ref, reactive, getCurrentInstance } from 'vue'

  const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties
  const configFormModelRef = ref()

  const vdata : any = reactive ({
    recordId: null, // 更新对象ID
    visible: false, // 是否显示弹层/抽屉
    btnLoading: false,
    saveObject: {} as any, // 配置保存对象

    alipayAuthData: {}, // 支付宝代运营授权
    authQrCodeUrl: '',
    showAuthQrCodeUrl: false,
    showAuthStatus: false,
  })


  function show (recordId) { // 弹层打开事件
    vdata.recordId = recordId
    vdata.visible = true

    // 回显当前代运营授权信息
    queryAuthInfo().then(res => {
      if(res) {
        vdata.alipayAuthData = res
        vdata.showAuthStatus = true
      }
    })
  }


// 查询当前授权信息
function queryAuthInfo() {
  return req.getById(API_ALIPAY_SP_OPERATION, 'authInfo', { mchNo: vdata.recordId })
}

// 发起支付宝代运营授权
function alipayAuthFunc() {
  queryAuthInfo().then(res => {
    if (res && res.handleStatus == 'SUCCESS') {
      if (res.alipayAccount == vdata.alipayAuthData.alipayAccount) {
        $infoBox.message.success('当前支付宝账号已授权通过，无需再次授权')
        return
      }
      // 支付宝账号【' + res.alipayAccount + '】已授权成功。重新授权的同时，需要重新同步店铺，否则可能会导致无法绑定如意设备
      $infoBox.confirmDanger('授权', '确认授权？', () => {
        sendAuth()
      }, undefined, { okText: '确认授权？' })
    }else {
      sendAuth()
    }
  })
}
// 支付宝代运营授权请求
function sendAuth() {
  configFormModelRef.value.validate().then(valid =>{
    if (vdata.alipayAuthData.authType == 'qrcode') {
      reqLoad.getById(API_ALIPAY_SP_OPERATION, 'queryQrcode', { mchNo: vdata.recordId, alipayAccount: vdata.alipayAuthData.alipayAccount }).then(res => {
        vdata.authQrCodeUrl = decodeURIComponent(res.qrCodeUrl)
        vdata.showAuthQrCodeUrl = true
        vdata.showAuthStatus = true
      })
    }else if (vdata.alipayAuthData.authType == 'apply') {
      reqLoad.add(API_ALIPAY_SP_OPERATION + '/apply', { mchNo: vdata.recordId, alipayAccount: vdata.alipayAuthData.alipayAccount }).then(res => {
        vdata.showAuthStatus = true
        $infoBox.modalSuccess('发送成功', '授权消息已发送至支付宝：' + vdata.alipayAuthData.alipayAccount + '，请前往支付宝App处理')
      })
    }
  })
}

// 查询支付宝代运营授权结果
function queryAlipayAuthResultFunc() {
  return reqLoad.getById(API_ALIPAY_SP_OPERATION, 'queryResult', { mchNo: vdata.recordId }).then(res => {
    if (res ) {
      vdata.alipayAuthData.handleStatus =res.handleStatus
    }
  })
}

  defineExpose({
    show
  })
</script>
<style lang="less" scoped>
  .bottom-btn{
    /deep/ div{
      display: flex;
      justify-content: center;
    }
  }
  .typePopover {
  position: absolute;
  top: -30px;
  left: 93px;
}
</style>
