<script setup>
	// 我的绑定
	import {
		ref,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import {
		onLoad,
		onReady,
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util.js'
	const {
		proxy
	} = getCurrentInstance()
	// 仓库
	const store = useStore()
	// 绑定的项
	const bindItem = ref({})
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})
	// 绑定列表
	const bindList = computed(() => {
		let result = [{
				img: '/static/wx.png',
				name: '微信号',
				value: '',
			},
			{
				img: '/static/shop-alipay-payment.png',
				name: '支付宝号',
				vlaue: '',
			}
		]
		return result
	})

	onReady(() => {
		// 
	})

	// 点击项
	function handleItem(item) {
		bindItem.value = item
		proxy.$refs.bind.open()
	}
</script>

<template>
	<view class="app">
		<view class="container">

			<view class="line rows mtb30 mlr30 ptb40 plr30 bfff br20" v-for="(item,index) in bindList" :key="index"
				@click="handleItem(item)">
				<image class="wh80" :src="item.img" mode="aspectFit" />
				<view class="f1 ml20">
					<view class="key f32">{{item.name}}</view>

					<view class="content mt10 c999 f26">
						<text v-if="item.value">{{item.value}}</text>
						<text v-else>未绑定</text>
					</view>
				</view>
			</view>
		</view>

		<!--  -->
		<uni-popup ref="bind" type="bottom">
			<view class="bindAlt popBot plr30 bfff">
				<view class="header rows mtb30">
					<view class="">绑定{{bindItem.name}}</view>
				</view>

				<view class="inputBox mtb30 ptb10 plr20">
					<input type="text" placeholder="请输入" />
				</view>

				<view class="hint mtb30 c999 f26">请核对信息后进行绑定，因信息错误产生的问题后果自负</view>

				<view class="btn bar black mtb30">添加</view>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss">
	.bindAlt {
		.hint {
			color: #aa3333;
		}
	}
</style>