<template>
	<view class="bind-user">
		<view class="bind-user-header">
			<view class="flex mb28">
				<up-image width="120rpx" height="120rpx" :src="state.baseInfo.info.userImage" shape="circle"></up-image>
				<view class="header-name">
					<view class="font32 mb20 color-040">{{ state.baseInfo.info.userName }}</view>
					<view class="label1">
						{{ state.baseInfo.partner_level }}
					</view>
					<!-- <view class="flex font24">
						<view style="color: #B97132;">当前分成比例:
							<text style="color: #CD4732;">25%</text>
						</view>
						<view class="ml28" style="color: #B97132;">晋级后分成比例:
							<text style="color: #CD4732;">30%</text>
						</view>
					</view> -->
					<view class="color-a55 size-24 mt16" v-html="state.baseInfo.level_details">
					</view>
				</view>
			</view>
		</view>
		<view class="bind-main">
			<view class="bind-main-content">
				<view class="bind-main-list">
					<!--  <up-empty
            mode="list"
            width="300px"
            height="300px"
            icon="http://cdn.uviewui.com/uview/empty/car.png"
        /> -->
					<view class="bind-tabs">
						<up-tabs :list="list" :current="current" lineWidth="68rpx" :activeStyle="{
							color: '#000000',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}" :inactiveStyle="{
							color: '#000000',
							transform: 'scale(1)'
						}" :itemStyle="{ height: '88rpx', padding: '0 100rpx' }" lineColor="#FFBF60" @click="tabClick">
						</up-tabs>
					</view>

					<view >
						<noOrder :list="state.list" v-if="state.state == 0" />
						<haveOrder :list="state.list" v-if="state.state == 1" />
					</view>

				</view>
			</view>
		</view>
		<view style="margin-top: 17rpx; padding: 15rpx 29rpx; background-color: #FFF4E6; border-radius: 16rpx;" >
			<up-parse :content="configList.cumulative_reward_statement.paramValueArea" containerStyle="{
				color: '#A55822',
				fontSize: '22rpx',
				lineHeight: '29rpx',
			}"></up-parse>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	reactive,
	onMounted
} from "vue"
import { useStore } from 'vuex'
import haveOrder from "./components/haveOrder.vue"
import noOrder from "./components/noOrder.vue"
import {
	hhrMyUserList
} from "@/api/home.js"

import {
	binBaseInfo,
	bindCode
} from "@/api/home.js"


const store = useStore()

const configList = computed(() => {
	return store.getters.configList
})

const code = ref('asdasaadsdsa')
const url = ref('https://uview-plus.jiangruyi.com/components/button.html')
const current = ref(0)

const list = reactive([{
	name: '未下单'
},
{
	name: '已下单'
},
]);



const state = reactive({
	list: [],
	page: {
		pageNumber: 1,
		pageSize: 100
	},
	state: 0,
	info: {},
	baseInfo: {}
})
onMounted(() => {
	getList()
	state.info = JSON.parse(uni.getStorageSync("baseInfo"))
	getBaseInfo()
})

const getBaseInfo = () => {
	binBaseInfo(state.info.userId).then(res => {
		state.baseInfo = res.data
	})
	bindCode(state.info.userId).then(res => {
		state.code = {
			...cardData,
			code: res.data.code
		}
		state.posterUrl = res.data.url
	})
}
const getList = async () => {
	const {
		code,
		data
	} = await hhrMyUserList({
		...state.page,
		state: state.state,
		appUserId: state.info.userId
	})
	if (code === 200) {
		state.list = [...data]
	}
}
const tabClick = (item) => {
	state.state = item.index
	getList()
}
</script>


<style scoped lang="scss">
@import "index";
</style>