<template>
	<view>
		<u-navbar :title="t('draw.title')" :background="{backgroundColor: '#ff4d40'}" title-color="#FFFFFF"
			back-icon-color="#FFFFFF">
			<view class="flex justify-end w-full pr-[30rpx] relative">
				<navigator hover-class="none" url="/pages/mall/draw_record">
					<u-icon size="42" name="/static/images/common/record.png"></u-icon>
				</navigator>
			</view>
		</u-navbar>
		<view class="draw-bg ">
			<view class="pt-[30rpx] pl-[60rpx] flex justify-start items-center">
				<u-icon size="42" name="/static/images/mall/point.png"></u-icon>
				<view class="ml-[10rpx] text-white font-bold text-2xl">
					{{data.user.point}}
				</view>
			</view>
			<view class="flex justify-center mt-[100rpx]">
				<l-dialer :prizeList="data.prizeList" @click="handleDraw" @done="handleDown" ref="dialer" />
			</view>
		</view>
		<view class="bg-[#ffa666] px-[30rpx] pb-[30rpx]">
			<view class="font-bold flex justify-center items-center mb-[20rpx]">
				<u-icon size="32" color="#FFFFFF" name="info-circle-fill"></u-icon>
				<view class="ml-[10rpx] text-white">
					{{t('draw.introduction')}}
				</view>
			</view>
			<view class="p-[20rpx] bg-[#F8F9FB] leading-loose rounded-lg text-[#000000]" v-html="data.content"></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import { getDrawIndex, draw } from '@/api/mall'
	import { getHintDetail } from '@/api/news'

	import { t } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('draw.title') })

	const dialer = ref()
	const drawing = ref(false)
	const data = reactive({
		prizeList: [],
		user: {
			point: 0
		},
		config: {
			point: 0
		},
		index: 0,
		content: '<br><br><br><br><br><br><br><br><br>'
	})

	const handleDraw = async () => {
		if (drawing.value) return

		if (data.user.point - data.config.point < 0) {
			return uni.$u.toast(t('draw.insPoint'))
		}

		drawing.value = true
		const res_draw = await draw({ 'draw': 1 })

		data.index = res_draw.index
		dialer.value.run(data.index)
	}

	const handleDown = async () => {
		getData()
		drawing.value = false
		return uni.$u.toast(t('draw.getTips') + '：' + data.prizeList[data.index].name)
	}

	const getData = async () => {
		const res = await getDrawIndex()
		data.prizeList = res.prizeList
		data.user = res.user
		data.config = res.config;
	}
	const getContent = async () => {
		const res = await getHintDetail({ id: 25 })
		data.content = res.content
	}

	getData()
	getContent()
</script>

<style lang="scss">
	.draw-bg {
		background-image: url('/static/images/mall/draw-bg.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: bottom;
		height: 500px;
	}
</style>