<template>
	<view class="query-content">
		<view class="query-input">
			<u-input v-model="queryWord" :border="true" :maxlength="11" placeholder="请输入完整手机号码查询" type="number"/>
			<view class="query-button">
				<u-button shape="circle" @click="queryData" type="primary">查询</u-button>
			</view>
		</view>
		<view class="query-result">
			<u-gap height="20" bg-color="#f8f8f8"></u-gap>
			<view class="result-list" v-if="result">
				<view class="result-title">
					<view>
						<u-icon name="account-fill" color="#666" size="28"></u-icon>
						<text>{{result.customerRoleDictValue}}</text>
					</view>
					<view v-if="result.customerRole == 1 && result.state == 1">
						<u-button @click="hexiao" type="warning" size="mini">乐豆核销</u-button>
					</view>
				</view>
				<view class="result-info">
					<u-cell-group>
						<u-cell-item :arrow="false" title="注册时间" :value="result.registerTime"></u-cell-item>
						<u-cell-item :arrow="false" title="用户手机" :value="result.mobile"></u-cell-item>
						<u-cell-item :arrow="false" title="乐豆余额" :value-style="{color:'red'}" :value="result.currentGold||'0'">
						</u-cell-item>
					</u-cell-group>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { queryldByMobile } from '@/api/officialPartnerGoldLog.js'
	export default{
		data() {
			return {
				queryWord: '',
				result: null
			}
		},
		methods: {
			queryData(){
				if(this.queryWord.length == 11){
					queryldByMobile({mobile:this.queryWord}).then(res => {
						console.log(res)
						if(res.status == 200){
							this.result = res.data
						}else{
							this.result = null
						}
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '请输入完整的手机号'
					})
				}
			},
			hexiao() {
				if(this.result.currentGold>0){
					uni.navigateTo({
						url: "/pages/ledouHexiao/ledouHexiao?item="+ encodeURIComponent(JSON.stringify(this.result))
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '此用户的乐豆余额为0'
					})
				}
			}
		},
	}
</script>

<style lang="less">
	.query-content{
		width: 100%;
		display: flex;
		flex-direction: column;
		.query-input{
			padding: 20rpx 60rpx;
			background: #FFFFFF;
		}
		.query-button{
			padding: 20rpx 0;
		}
		.query-result{
			flex-grow: 1;
		}
		.result-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			padding: 25rpx 30rpx;
			border-bottom: 1rpx solid #eee;
		}
	}
</style>
