<template>
  <a-card class="card">
    <a-space size="large">
      <a-statistic title="剩余乐跑次数" :value="userCount?.lepao_count" animation show-group-separator />
      <a-button type="primary" size="large" @click="$router.push('/store/goodsList')" style="margin-left: 20px;"
        v-if="props.type === 'lepao'">
        <span><icon-fire /> 去购买</span>
      </a-button>
      <a-button type="primary" size="large" @click="$router.push('/lepao/accountList')" style="margin-left: 20px;"
        v-else>
        <span><icon-thunderbolt /> 去乐跑</span>
      </a-button>
      <a-button type="primary" size="large" @click="SendCount()">
        <span><icon-gift /> 赠送次数</span>
      </a-button>
    </a-space>
  </a-card>

  <a-modal v-model:visible="visible" title="赠送乐跑次数" @cancel="handleCancel" @before-ok="handleBeforeOk" draggable
    :ok-loading="ok_loading" esc-to-close closable>
    <a-form :model="sendform">
      <a-form-item field="username" label="接收人">
        <a-input v-model="sendform.username" placeholder="请填写接收人用户名，如：用户adfg45g" :max-length="20" />
      </a-form-item>
      <a-form-item field="count" label="赠送次数">
        <a-input-number v-model="sendform.count" placeholder="请填写要赠送的次数" mode="button" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive, onUnmounted, onMounted } from 'vue'
import { getCount, sendCount } from '@/api/goods'
import { Notification, Message } from '@arco-design/web-vue'

const props = defineProps({
  "type": {
    type: String,
    default: 'lepao'
  }
})

const userCount = ref({
  lepao_count: 0
})
const loading = ref(false)

const visible = ref(false)
const ok_loading = ref(false)
const sendform = reactive({
  username: '',
  count: 1
})

const handleBeforeOk = async (done) => {
  try {
    ok_loading.value = true
    if (!sendform.username) {
      Message.error('请填写接收人用户名！')
      return false
    }

    if (!sendform.count || sendform.count < 1 || sendform.count > 9999) {
      Notification.error({
        title: '赠送次数失败！',
        content: '超出赠送的次数范围，请重新选择赠送次数！'
      })
      return false
    }

    const res = await sendCount({ username: sendform.username, count: sendform.count })
    if (!res || res.code !== 0) {
      Notification.error({
        title: '赠送次数失败！',
        content: res?.msg ?? '请稍后再试'
      })
      return false
    }

    Message.success('赠送成功！')
    done()
    GetCount()
  } catch (error) {
    Notification.error({
      title: '赠送次数失败！',
      content: error.message || '请稍后再试'
    })
    return false
  } finally {
    ok_loading.value = false
  }
}

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

const SendCount = async () => {
  sendform.username = ''
  sendform.count = 1
  visible.value = true
}

const GetCount = async () => {
  try {
    const res = await getCount()
    if (!res || res.code !== 0)
      return Notification.error({
        title: '获取用户数据失败！',
        content: res?.msg ?? '请稍后再试'
      })
    userCount.value = res.data
  } catch (error) {
    Notification.error({
      title: '获取用户数据失败！',
      content: error.message || '请稍后再试'
    })
  }
}

let timer = null

// 轮询
const startPolling = () => {
    if (!timer) {
        timer = setInterval(async () => {
            await GetCount()
        }, 5000)
    }
}

// 停止轮询
const stopPolling = () => {
    if (timer) {
        clearInterval(timer)
        timer = null
    }
}

onMounted(async () => {
    loading.value = true
    await GetCount()
    loading.value = false
    startPolling()
})

// 组件销毁时停止轮询
onUnmounted(() => {
    stopPolling()
})
</script>

<style scoped>
.card {
  font-family: -apple-system, BlinkMacSystemFont;
}
</style>