<template>
  <a-drawer
    v-model:visible="vdata.visible"
    title="新建接收人"
    width="40%"
    :maskClosable="true"
    @close="onClose"
  >
    <a-steps direction="vertical" :current="-1">
      <a-step title="第一步，使用【微信扫一扫】扫描下列二维码并点击 [确认授权] 按钮" disabled status="process">
        <template #description>
          <img :src="vdata.wxmpConfig.authQr" alt="扫码授权" style="width: 200px;">
        </template>
      </a-step>
      <a-step title="第二步，页面提示 [授权成功]。 按照手机端的提示关注公众号完成消息推送的开启操作。" disabled status="process">
        <template #description>
          <img :src="vdata.wxmpConfig.wxmpQr" alt="关注微信公众号" style="width: 200px;">
        </template>
      </a-step>
    </a-steps>

    <a-descriptions style="margin-bottom: 50px;">
      <a-descriptions-item label="提示">若未关注公众号则无法正确接收到提示信息！</a-descriptions-item>
    </a-descriptions>

    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" @click="onClose"><close-outlined />关闭</a-button>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import { $getWxmpInfo } from '@/api/manage'
import { reactive, ref } from 'vue'

  const infoFormModel  =ref()
  const vdata =  reactive({
    visible: false, // 抽屉开关
    wxmpConfig: {} as any
  })

  defineExpose({show})

    // 抽屉显示
  function  show () {

    // 拉取详情
    $getWxmpInfo().then(res => {
      vdata.wxmpConfig = res
    })
    vdata.visible = true // 展示弹层信息~
  }
  function  onClose () {
    vdata.visible = false
  }
</script>

<style lang="less" scoped>
</style>
