<template>
	<view class="app">
		<!-- 提示 -->
		<view class="title mtb30 mlr30 c333 f32 b">按住图标拖动</view>
		<!-- 拖拽 -->
		<HM-dragSorts ref="dragSorts" :list="list" :listHeight="90" />

		<view class="footer plr30 bfff shadow">
			<view class="btn lg black" @click="handleSubmit">保存</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	// api
	import api from '@/api/index.js'
	// 工具库
	import util from '@/common/js/util.js'

	// 列表
	const list = ref([])

	onMounted(() => {
		// 获取用户支付顺序
		getPaymentOrder()
	})

	// 获取用户支付顺序
	function getPaymentOrder() {
		api.mine.getPaymentOrder().then(res => {
			if (res.code == 200) {
				// 列表
				list.value = res.data.map(node => {
					node.name = {
						'balance': '余额',
						'score': '积分',
					} [node.paymentMethod]
					return node
				})
				return
			}
			util.alert({
				content: res.msg,
				showCancel: false,
			})
		})
	}

	// 提交
	function handleSubmit() {
		api.mine.updatePaymentOrder({
			data: list.value.map(node => node.paymentMethod),
		}).then(res => {
			if (res.code == 200) {
				util.alert('保存成功')

				setTimeout(() => {
					uni.navigateBack()
				})
				return
			}
			util.alert({
				content: res.msg,
				showCancel: false,
			})
		})

	}
</script>

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