<template>
	<view class="bind-user">
		<view class="bind-user-header">
			<view class="flex mb28" v-if="state.baseInfo && state.baseInfo.info">
				<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" v-if="state.baseInfo.partner_level">
						{{ state.baseInfo.partner_level }}
					</view>
					<!-- <view class="label1" v-if="state.baseInfo.info.userHhRole == 1">
						初级伴宠师
					</view>
					<view class="label1" v-if="state.baseInfo.info.userHhRole == 2">
						中级伴宠师
					</view>
					<view class="label1"v-if="state.baseInfo.info.userHhRole == 3">
						高级伴宠师
					</view> -->
					<view class="flex font24">
						<view 
                        style="margin-right: 20rpx;"
                        :style="{color:'#A55822'}" v-if="state.baseInfo.partner_new_num">
                            当前分成比例<text :style="{color:'#C12525'}">{{state.baseInfo.partner_new_num}}</text>
						</view>
						<view :style="{color:'#A55822'}" v-if="state.baseInfo.partner_upgrade_num">
                            晋级后分成比例<text :style="{color:'#C12525'}">{{state.baseInfo.partner_upgrade_num}}</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
			v-if="state.state == 1"
			style="
			margin: 0 20rpx;
			border-radius: 20rpx;
			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>
	</view>
</template>

<script setup>
import {
	ref,
	reactive,
	onMounted,
	computed,
} from "vue"

import { onShow } from '@dcloudio/uni-app'

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 userInfo = computed(() => {
	return Store.getters.userInfo
})


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: {}
})
onShow(() => {
	state.info = JSON.parse(uni.getStorageSync("baseInfo"))
	getBaseInfo()
	getList()
})

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


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