<script setup lang="ts">
import { commonApi } from '@/api/common'

import EditUserInfo from '@/components/EditUserInfo.vue'
import { useUserStore } from '@/stores/user'
import { formatDate } from '@/utils/index.ts'
import { Close } from '@vicons/ionicons5'
import { NConfigProvider, NMessageProvider } from 'naive-ui'
import { nextTick, onMounted, onUnmounted, ref } from 'vue'

import { useRouter } from 'vue-router'

const message = useMessage()

let pollingTimer: ReturnType<typeof setInterval> | undefined

const route = useRoute()
const { type, status } = route.query as { type: string, status: string }

const loading = ref(false)
const finished = ref(false)
const total = ref(0) // 总条数
const loadingTrigger = ref(null)

const router = useRouter()

const observer = ref<IntersectionObserver | null>(null)
definePageMeta({
  layout: 'default',
})
interface UserInfo {
  nickName?: string // 使用 ? 表示 nickName 是可选的
  avatar?: string
  name?: string
  brief?: string
}
const userStore = useUserStore()
const userInfo: UserInfo = userStore.userInfo

// 当前是发布还是点赞？
const currentState = ref('mallProduct')
// 当前是模型还是工作流还是图片？
const currentType = ref('0')

const orderOptions = ref([
  {
    dictLabel: '最新',
    dictValue: 'create_time',
  },
  {
    dictLabel: '最热',
    dictValue: 'like_num',
  },
])

const stateList = ref([
  { id: 'mallProduct', title: '发布' },
  { id: 'like', title: '点赞' },
])
const typeList = ref([
  { id: '0', title: '模型' },
  { id: '1', title: '工作流' },
  { id: '2', title: '图片' },
])

// 发布的form查询条件
const publishParams = ref({
  pageNum: 1,
  pageSize: 20,
  status: '0',
  orderByColumn: 'create_time',
  date: null,
  endTime: '',
  startTime: '',
})

function initPublishParams() {
  publishParams.value = {
    pageNum: 1,
    pageSize: 20,
    status: '0',
    orderByColumn: 'create_time',
    date: null,
    endTime: '',
    startTime: '',
  }
}

// 点赞form的查询条件
const likesParams = ref({
  pageNum: 1,
  pageSize: 20,
  orderByColumn: 'create_time',
})

function initLikesParams() {
  likesParams.value = {
    pageNum: 1,
    pageSize: 20,
    orderByColumn: 'create_time',
  }
}

const urlList = ref({
  mallProduct: {
    0: '/personalCenter/selectByUserIdModel',
    1: '/personalCenter/selectByUserIdWorkFlow',
    2: '/personalCenter/selectByUserIdImage',
  },
  like: {
    0: '/personalCenter/likeModel',
    1: '/personalCenter/likeWorkFlow',
    2: '/personalCenter/likeImage',
  },
})

const showInvitationModal = ref(false)
// 获取数据字典

const statusOptions = ref([])
async function getDictType() {
  try {
    const res = await commonApi.dictType({
      type: 'mall_product_status',
    })
    if (res.code === 200 && res.data.length > 0) {
      statusOptions.value = res.data
      publishParams.value.status = res.data[0].dictValue
    }
  }
  catch (error) {
    console.log(error)
  }
}
getDictType()

// 编辑用户信息
interface EditUserInfoType {
  isVisible: boolean
}
const editUserInfoRef = ref<EditUserInfoType | null>(null)
function onEditInfo() {
  if (editUserInfoRef.value) {
    editUserInfoRef.value.isVisible = true
  }
}

// 实名认证
interface AuthComponentType {
  isVisible: boolean
}
const authenticationRef = ref<AuthComponentType | null>(null)
function onAuth() {
  if (authenticationRef.value) {
    authenticationRef.value.isVisible = true
  }
}

function initChangeParams() {
  if (currentState.value === 'mallProduct') {
    initPublishParams()
  }
  else {
    initLikesParams()
  }
  finished.value = false // 重置加载完成状态
  getList()
}
// 切换发布/点赞
function changeTabs(id: string) {
  currentState.value = id
  currentType.value = '0'
  initChangeParams()
}

// 切换模型/工作流/图片
function changeType(id: string) {
  if (id === '2') {
    statusOptions.value.forEach((item) => {
      if (item.dictValue === '2') {
        item.disabled = true
      }
    })
  }
  else {
    statusOptions.value.forEach((item) => {
      if (item.dictValue === '2') {
        item.disabled = false
      }
    })
  }
  currentType.value = id
  initChangeParams()
}

function initPageNUm() {
  if (currentState.value === 'mallProduct') {
    publishParams.value.pageNum = 1
  }
  else {
    likesParams.value.pageNum = 1
  }
  finished.value = false // 重置加载完成状态
  getList()
}

// 切换select全部状态/已发布/
function changeStatus(value: string) {
  publishParams.value.status = value
  initPageNUm()
}

// 切换发布的最热/最新
function changeOrder(value: string) {
  publishParams.value.orderByColumn = value
  initPageNUm()
}

// 切换点赞的最热/最新
function changeLikeOrder(value: string) {
  likesParams.value.orderByColumn = value
  initPageNUm()
}

// 切换日期
async function changeDate(value: string[]) {
  publishParams.value.startTime = `${await formatDate(value[0] as string)} 00:00:00`
  publishParams.value.endTime = `${await formatDate(value[1] as string)} 23:59:59`
  initPageNUm()
}

// 获取用户点赞/粉丝/关注数量
interface SelectUserInfo {
  likeCount: number
  bean: number
  download: number
  attention: number
}
const selectUserInfo = ref<SelectUserInfo>({
  likeCount: 0,
  bean: 0,
  download: 0,
  attention: 0,
})
async function getAttention() {
  try {
    const res = await request.get('/attention/selectUserInfo')
    if (res.code === 200) {
      selectUserInfo.value = res.data
    }
  }
  catch (err) {
    console.log(err)
  }
}
getAttention()

// Banner 样式
const bannerStyle = {
  backgroundImage:
    'url(\'https://img.zcool.cn/community/special_cover/3a9a64d3628c000c2a1000657eec.jpg\')',
}

// 定义响应接口
interface ApiResponse<T> {
  code: number
  rows: T[]
  message: string
}
// 定义数据接口
interface UserData {
  id: number
  name: string
  email: string
  status: number
}
// 查询发布模型接口
const dataList = ref([])
async function getList() {
  if (loading.value || finished.value)
    return

  loading.value = true
  let params = {}
  if (currentState.value === 'mallProduct') {
    params = publishParams.value
  }
  else {
    params = likesParams.value
  }
  const url = urlList.value[currentState.value][currentType.value]
  try {
    const res = await request.post<ApiResponse<UserData>>(url, params)
    if (res.code === 200) {
      // 如果是第一页，直接赋值，否则追加数据
      if (params.pageNum === 1) {
        dataList.value = res.rows
      }
      else {
        dataList.value = [...dataList.value, ...res.rows]
      }

      total.value = res.total // 假设接口返回了总条数

      // 判断是否加载完所有数据
      if (dataList.value.length >= total.value) {
        finished.value = true
      }

      // 自动增加页码
      if (currentState.value === 'mallProduct') {
        publishParams.value.pageNum++
      }
      else {
        likesParams.value.pageNum++
      }
    }
  }
  catch (err) {
    dataList.value = []
    finished.value = true
    console.log(err)
  }
  finally {
    loading.value = false
  }
}

onMounted(() => {
  window.addEventListener('scroll', topedRefresh)
  observer.value = new IntersectionObserver(
    ([entry]) => {
      if (entry.isIntersecting && !loading.value && !finished.value) {
        getList()
      }
    },
    {
      threshold: 0.1,
    },
  )

  if (loadingTrigger.value) {
    observer.value.observe(loadingTrigger.value)
  }

  if (type && type === 'like') {
    currentState.value = type
  }
  if (status === '0' || status === '1' || status === '2') {
    currentType.value = status
  }
  getList()
})

onUnmounted(() => {
  window.removeEventListener('scroll', topedRefresh)
  if (observer.value) {
    observer.value.disconnect()
  }
})

async function topedRefresh() {
  if (import.meta.client) {
    await nextTick()
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    })
  }
  initPageNUm()
}

function onClearDate() {
  (publishParams.value.startTime = ''), (publishParams.value.endTime = ''), initPageNUm()
}

// 获取粉丝的列表
const isShowFan = ref(false)

const attentionFinished = ref(false)
const attentionList = ref([])
const attentionListParams = ref({
  pageNumber: 1,
  pageSize: 20,
})
async function getAttentionList() {
  try {
    if (attentionFinished.value)
      return
    const res = await request.post(`/attention/selectToAttention`, {
      ...attentionListParams.value,
    })
    if (res.code === 200) {
      if (attentionListParams.value.pageNumber === 1) {
        attentionList.value = res.data.list
      }
      else {
        attentionList.value = [...attentionList.value, ...res.data.list]
      }

      total.value = res.data.total // 假设接口返回了总条数
      // 判断是否加载完所有数据
      if (attentionList.value.length >= total.value) {
        attentionFinished.value = true
      }
      attentionListParams.value.pageNumber++
    }
  }
  catch (err) {
    attentionList.value = []
    attentionFinished.value = true
    console.log(err)
  }
}
getAttentionList()

// 获取关注的列表
const likeFinished = ref(false)
const likeList = ref([])
const likeListParams = ref({
  pageNumber: 1,
  pageSize: 20,
  type: null,
})
async function getLikeList() {
  try {
    if (likeFinished.value)
      return
    const res = await request.post(`/attention/selectAttentionList`, {
      ...likeListParams.value,
    })
    if (res.code === 200) {
      if (likeListParams.value.pageNumber === 1) {
        likeList.value = res.data.list
      }
      else {
        likeList.value = [...likeList.value, ...res.data.list]
      }

      total.value = res.data.total // 假设接口返回了总条数
      // 判断是否加载完所有数据
      if (likeList.value.length >= total.value) {
        likeFinished.value = true
      }
      likeListParams.value.pageNumber++
    }
  }
  catch (err) {
    likeList.value = []
    likeFinished.value = true
    console.log(err)
  }
}
getLikeList()

function closefanList() {
  isShowFan.value = false
}

// 去关注/取消关注当前用户
async function onAttention(item: any) {
  try {
    const userId = userStore.userInfo.userId
    if (userId === item.userId) {
      return message.warning('自己不能关注自己')
    }
    const res = await request.get(`/attention/addAttention?userId=${item.userId}`)
    if (res.code === 200) {
      if (res.data) {
        message.success('关注成功')
      }
      else {
        message.success('取消关注成功')
      }
      item.attention = !item.attention
    }
  }
  catch (err) {
    console.log(err)
  }
}
// 过去邀请码
const invitationCode = ref('')
async function getInvitation() {
  try {
    const res = await request.get(`/invitation/getInvitationCode`)
    if (res.code === 200) {
      invitationCode.value = res.msg
    }
  }
  catch (err) {
    console.log(err)
  }
}
getInvitation()

// 获取邀请列表
// async function getInvitationList() {

// }

// 复制到粘贴板
function copyToClipboard(text: string) {
  const textarea = document.createElement('textarea')
  textarea.value = text
  document.body.appendChild(textarea)
  textarea.select()
  const success = document.execCommand('copy')
  document.body.removeChild(textarea)

  if (success) {
    message.success('复制成功!')
  }
  else {
    message.success('复制成功!')
  }
}

// 复制到粘贴板
function handlePositiveClick() {
  copyToClipboard(invitationCode.value)
}

const activeTab = ref('like')

// 邀请码列表
const invitationList = ref({})
async function handleNegativeClick() {
  try {
    const res = await request.get(`/invitation/earningsDisplay`)
    if (res.code === 200) {
      invitationList.value = res.data
      showInvitationModal.value = true
    }
  }
  catch (err) {
    console.log(err)
  }
}
function showLike(type: string) {
  isShowFan.value = true
  activeTab.value = type
}
function toWallet() {
  router.push({
    path: `/wallet`,
  })
}

// 查询是否已绑定支付宝
const zfbStatus = ref('0')
async function getBindStatus() {
  const res = await request.get(`/ali/pay/queryBindStatus`)
  if (res.code === 200) { // '1 绑定 0不绑定
    zfbStatus.value = res.data
  }
}
getBindStatus()

// 绑定支付宝
const qrUrl = ref('')
const isShowBindingModal = ref(false)
async function showBinding() {
  try {
    const res = await request.get(`/ali/pay/generateQrCode`)
    if (res.code === 200) {
      qrUrl.value = res.data
      isShowBindingModal.value = true

      pollingTimer && clearTimeout(pollingTimer)
      pollingTimer = setInterval(async () => {
        try {
          const res2 = await request.get(`/ali/pay/queryBindStatus`)
          if (res2.data === '1') {
            await userStore.getUserInfo()
            closeBindingModal()
            message.success('绑定成功!')
            getBindStatus()
          }
        }
        catch (err) {
          closeBindingModal()
          message.warning('绑定失败，请稍后再试!')
        }
      }, 2000)
    }
  }
  catch (err) {
    console.log(err)
  }
}

function closeBindingModal() {
  pollingTimer && clearTimeout(pollingTimer)
  isShowBindingModal.value = false
}
</script>

<template>
  <div class="mx-auto relative">
    <!-- Banner Section -->
    <div class="banner-content h-32 bg-blue bg-cover bg-center" :style="bannerStyle" />
    <!-- User Info Section -->
    <div class="info-content mt-[-50px] p-5">
      <div class="edit-info-content flex items-center">
        <!-- Avatar -->
        <div
          class="mc-head mr-5 h-20 w-20 rounded-full bg-white shadow-lg flex items-center justify-center"
        >
          <div class="mc-head-inner h-18 w-18 m-1 rounded-full bg-blue-200">
            <client-only>
              <img
                class="head-img m-1 h-16 w-16 rounded-full bg-white"
                :src="userStore?.userInfo?.avatar"
                alt="User Avatar"
              >
            </client-only>
            <!-- {{ userStore.userInfo.avatar }} -->
          </div>
        </div>

        <!-- Edit Info Button -->
        <div
          class="edit-info mr-2 cursor-pointer rounded-full bg-white px-5 py-2 shadow-md"
          @click="onEditInfo()"
        >
          编辑资料
        </div>
        <!-- Real Name Verification -->
        <div
          v-if="userStore?.userInfo.name"
          class="edit-info rounded-full bg-white px-5 py-2 shadow-md"
        >
          已经实名
        </div>
        <div
          v-else
          class="edit-info cursor-pointer rounded-full bg-white px-5 py-2 shadow-md"
          @click="onAuth()"
        >
          去实名
        </div>
        <div>
          <n-popconfirm
            class="bg-white ml-2"
            positive-text="复制邀请码"
            negative-text="查看列表"
            :show-icon="false"
            @positive-click="handlePositiveClick"
            @negative-click="handleNegativeClick"
          >
            <template #trigger>
              <n-button class="ml-2 rounded-lg" type="info" round>
                获取邀请码
              </n-button>
            </template>
            邀请码: {{ invitationCode }}
          </n-popconfirm>
        </div>
        <div class="ml-4 cursor-pointer" @click="toWallet()">
          <img src="@/assets/img/wallet.png" alt="">
        </div>
        <div v-if="zfbStatus === '1'" class="bg-[#3875f6] rounded-full px-4 py-2 ml-4 text-white">
          已绑定支付宝
        </div>
        <div v-else class="text-xs px-3 py-2 border border-solid border-[#ccc] rounded-full ml-4 bg-white cursor-pointer" @click="showBinding">
          绑定支付宝
        </div>
      </div>

      <!-- User Details -->
      <div class="user-info mt-4">
        <div v-if="userStore.userInfo" class="nickname text-xl font-bold">
          {{ userStore.userInfo.nickName }}
          <!-- {{ userInfo.nickName }} -->
        </div>
        <div v-if="userStore.userInfo.brief" class="info-desc mt-1 text-sm text-gray-700">
          {{ userStore.userInfo.brief }}
        </div>
        <div class="production-state mt-4 flex text-sm text-gray-700">
          <div
            class="production-state-item mr-5 cursor-pointer"
            @click="showLike('like')"
          >
            <span class="production-state-number font-bold">{{
              selectUserInfo.bean ? selectUserInfo.bean : 0
            }}</span>
            粉丝
          </div>
          <div
            class="production-state-item mr-5 cursor-pointer"
            @click="showLike('attention')"
          >
            <span class="production-state-number font-bold">{{
              selectUserInfo.attention ? selectUserInfo.attention : 0
            }}</span>
            关注
          </div>
          <div class="production-state-item mr-5">
            <span class="production-state-number font-bold">{{
              selectUserInfo.modelDownloadNum + selectUserInfo.modelRunNum
            }}</span>
            作品被使用次数
          </div>
          <div class="production-state-item">
            <span class="production-state-number font-bold">{{
              selectUserInfo.imageLikeNum + selectUserInfo.modelLikeNum
            }}</span>
            作品被点赞次数
          </div>
        </div>
      </div>
    </div>

    <div class="mc-tabs flex px-5 pb-3" style="border-bottom: 1px solid #e0e0e0">
      <div
        v-for="(item, index) in stateList"
        :key="index"
        class="mc-tabs-btn mr-2 cursor-pointer rounded-full px-5 py-1"
        :class="{
          'bg-black text-white': currentState === item.id,
          'bg-white text-black': currentState !== item.id,
        }"
        @click="changeTabs(item.id)"
      >
        {{ item.title }}
      </div>
    </div>

    <div class="select-content mt-4 flex items-center justify-between px-5">
      <div class="flex items-center rounded-full bg-gray-100">
        <div
          v-for="(item, index) in typeList"
          :key="index"
          class="m-1 mr-2 cursor-pointer rounded-full px-4 py-1 text-sm"
          :class="{
            'bg-white': item.id === currentType,
          }"
          @click="changeType(item.id)"
        >
          {{ item.title }}
        </div>
      </div>

      <!-- Published Works Filters -->
      <div v-if="currentState === 'mallProduct'" class="flex items-center">
        <div>
          <n-select
            v-model:value="publishParams.status"
            :options="statusOptions"
            label-field="dictLabel"
            value-field="dictValue"
            placeholder="请选择"
            style="width: 180px"
            class="mr-2"
            @update:value="changeStatus"
          />
        </div>
        <div>
          <n-select
            v-model:value="publishParams.orderByColumn"
            :options="orderOptions"
            label-field="dictLabel"
            value-field="dictValue"
            placeholder="请选择"
            class="mr-2 w-28"
            @update:value="changeOrder"
          />
        </div>
        <div>
          <n-date-picker
            v-model:value="publishParams.date"
            type="daterange"
            style="width: 230px"
            format="yyyy-MM-dd"
            value-format="yyyy.MM.dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :on-clear="onClearDate"
            clearable
            @update:value="changeDate"
          />
        </div>
      </div>

      <!-- Liked Works Filters -->
      <div v-if="currentState === 'like'" class="flex items-center">
        <NSelect
          v-model:value="likesParams.orderByColumn"
          :options="orderOptions"
          label-field="dictLabel"
          value-field="dictValue"
          placeholder="请选择"
          class="w-32"
          @update:value="changeLikeOrder"
        />
      </div>
    </div>
    <NConfigProvider>
      <NMessageProvider>
        <Authentication ref="authenticationRef" />
        <EditUserInfo ref="editUserInfoRef" />
      </NMessageProvider>
    </NConfigProvider>
    <!-- Dialog Components -->
    <!-- grid grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 p-4 -->
    <div class="login-content my-4 grid xl:grid-cols-4 2xl:grid-cols-5 gap-4 px-5">
      <PersonalCenterCard
        v-for="(item, index) in dataList"
        :key="index"
        :item="item"
        :current-type="currentType"
        :current-state="currentState"
        @toped-refresh="topedRefresh"
      />
    </div>
    <div ref="loadingTrigger" class="h-10">
      <div v-if="loading" class="text-center text-gray-500">
        加载中...
      </div>
      <div v-if="finished" class="text-center text-gray-500">
        没有更多数据了
      </div>
    </div>
    <div v-if="isShowFan" class="fan-centent">
      <div
        class="w-[550px] h-[calc(100vh-100px)] max-h-[700px] m-auto py-0 px-8 pb-[43px] bg-[#fff] rounded-lg relative"
      >
        <n-icon
          size="20"
          class="mr-2 cursor-pointer absolute top-4 right-2"
          @click="closefanList"
        >
          <Close />
        </n-icon>
        <n-tabs
          v-model:value="activeTab"
          default-value="like"
          justify-content="space-evenly"
          type="line"
        >
          <n-tab-pane name="like" :tab="`粉丝${selectUserInfo.bean || 0}`">
            <n-infinite-scroll
              style="height: calc(100vh - 200px); padding: 0 10px"
              :distance="10"
              @load="getAttentionList"
            >
              <!-- <div class="overflow-y-auto h-[calc(100vh-200px)] px-2"> -->
              <div
                v-for="(item, index) in attentionList"
                :key="index"
                class="flex justify-between items-center p-2"
              >
                <div class="flex items-center">
                  <img
                    :src="item.avatar || ''"
                    alt=""
                    class="w-14 h-14 rounded-full mr-2"
                  >
                  {{ item.nickName }}
                </div>
                <div
                  class="bg-[#f4f5f9] px-4 py-2 rounded-full cursor-pointer"
                  @click="onAttention(item)"
                >
                  {{ item.attention ? "已关注" : "未关注" }}
                </div>
              </div>
              <div
                v-if="attentionList.length === 0"
                class="w-full text-center text-gray-500 font-bold mt-2"
              >
                暂无数据
              </div>
              <!-- </div> -->
            </n-infinite-scroll>
          </n-tab-pane>
          <n-tab-pane name="attention" :tab="`关注${selectUserInfo.attention || 0}`">
            <!-- <div class="overflow-y-auto h-[calc(100vh-200px)] px-2"> -->
            <n-infinite-scroll
              style="height: calc(100vh - 200px); padding: 0 10px"
              :distance="10"
              @load="getLikeList"
            >
              <div
                v-for="(item, index) in likeList"
                :key="index"
                class="flex justify-between items-center p-2"
              >
                <div class="flex items-center">
                  <img
                    :src="item.avatar || ''"
                    alt=""
                    class="w-14 h-14 rounded-full mr-2"
                  >
                  {{ item.nickName }}
                </div>
                <div
                  class="bg-[#f4f5f9] px-4 py-2 rounded-full cursor-pointer"
                  @click="onAttention(item)"
                >
                  {{ item.attention ? "已关注" : "未关注" }}
                </div>
              </div>
              <div
                v-if="attentionList.length === 0"
                class="w-full text-center text-gray-500 font-bold mt-2"
              >
                暂无数据
              </div>
              <!-- </div> -->
            </n-infinite-scroll>
          </n-tab-pane>
        </n-tabs>
      </div>
    </div>
    <n-modal v-model:show="showInvitationModal">
      <n-card
        style="width: 600px"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <!-- <template #header-extra>
          噢！
        </template> -->
        <div class="py-4 flex justify-between">
          <div class="text-xl font-bold">
            邀请列表
          </div>
          <div class="text-sm text-gray-600">
            总收益: {{ invitationList.totalAmount }}
          </div>
        </div>
        <div class="rounded-lg">
          <div class="flex w-[100%]">
            <div class="w-[180px] flex items-center py-2">
              头像
            </div>
            <div class="w-[180px] flex items-center py-2">
              邀请人购买数量
            </div>
            <div class="w-[180px] flex items-center py-2">
              邀请人名字
            </div>
          </div>
          <div class="max-h-[500px] overflow-y-auto">
            <div
              v-for="(item, index) in invitationList.earningsDisplayList"
              :key="index"
              class="flex w-[100%] hover:bg-[#f3f3f3] px-2"
            >
              <div class="w-[180px] flex items-center py-2">
                <img class="w-10 h-10 rounded-full" :src="item.user.avatar" alt="">
              </div>
              <div class="w-[180px] flex items-center py-2">
                {{ item.count }}
              </div>
              <div class="w-[180px] flex items-center py-2">
                {{ item.user.userName }}
              </div>
            </div>
          </div>
        </div>
      </n-card>
    </n-modal>
    <div v-if="isShowBindingModal" class="fan-centent">
      <div class="relative flex flex-col items-center">
        <div class="bg-[#000] bg-opacity-80 py-10 px-20 flex flex-col items-center justify-center rounded-lg">
          <div class="text-xl text-white mb-4">
            扫码绑定
          </div>
          <n-qr-code :value="qrUrl" :size="150" style="padding: 0;" />
          <div class="text-base text-white mt-4">
            请用手机支付宝扫码
          </div>
        </div>
        <n-icon
          size="30"
          class="cursor-pointer mt-4 text-white"
          @click="closeBindingModal"
        >
          <Close />
        </n-icon>
      </div>
    </div>
  </div>
</template>

<style scoped>
.fan-centent {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
}
.edit-info {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
}
</style>
