<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我的团队</block>
		</cu-custom>
		<!-- 团队成员 -->
		<view class="margin-bottom-with-bar">
			<view class="bg-white padding bottom-border" v-for="(member, index) in members">
				<view class="flex justify-between">
					<view class="flex justify-start align-center" style="width: 40%;">
						<view class="cu-avatar round"
							:style="'background-image:url(' + member.avatarUrl + ');min-width: 64rpx'"></view>
						<view class="text-lg margin-left-sm">{{member.name}}</view>
					</view>
					<view class="flex justify-end align-center">
						<view v-if="Boolean(member.showEditInput)" :key="member.id"
							class="flex justify-end align-center margin-lr-sm">
							<input class="radius-input" type="text" :value="member.noteName" placeholder="姓名备注"></input>
							<view class="text-lg margin-left-sm">
								<text class="cuIcon-roundcheckfill text-main-color" :data-index="index"
									@click="editNoteName"></text>
								<text class="cuIcon-roundclosefill margin-left-xs" :data-index="index"
									@click="hideEditInput"></text>
							</view>
						</view>
						<view v-else class="flex justify-end margin-lr-sm" :key="member.id">
							<text>{{member.noteName}}</text>
							<text class="text-lg" :data-index="index" @click="showEditInput"><text
									class="cuIcon-edit margin-left-xs"></text></text>
						</view>
						<view class="text-xxl text-main-color" :data-phone="member.phoneNum" @click="makePhoneCall">
							<view class="cuIcon-phone"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部操作栏 -->
		<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
			<view class="left-grid text-center" @click="showTakeRateSetModal">
				<view>设置扣点</view>
				<view>(扣点：<text class="text-red">{{myTeamInfo.takeRate}}%</text>)</view>
			</view>
			<view class="bg-main-color submit" @click="">邀请团队</view>
		</view>
		
		<!-- 设置扣点模态框 -->
		<view class="cu-modal" :class="isShowTakeRateSet?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">设置扣点</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view>设置区域代理扣点可按百分比扣取或金额扣取的方式（建议二选一进行申请）</view>
					<view class="flex justify-center align-center margin-top-sm">
						<text>扣点：</text>
						<input class="radius-input" type="digit" placeholder="请输入订单扣取的比例"></input>
						<text>%</text>
					</view>
					<view class="flex justify-center align-center margin-top-sm">
						<text>金额：</text>
						<input class="radius-input" type="digit" placeholder="请输入按单扣取的金额"></input>
						<text>元</text>
					</view>
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-black" @tap="hideModal">取消</view>
					<view class="action margin-0 flex-sub text-main-color solid-left" @tap="hideModal"
						@click="applySetTakeRate">提交申请</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myTeamInfo: {},
				members: [],
				isShowTakeRateSet: false
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				this.myTeamInfo = await this.$api.data('myTeamInfo');
				this.members = this.myTeamInfo.members;
			},
			showEditInput(e) {
				let curIndex = e.currentTarget.dataset.index;
				this.$set(this.members, curIndex, Object.assign(this.members[curIndex], {
					showEditInput: true
				}))
				console.log(this.members)
			},
			hideEditInput(e) {
				let curIndex = e.currentTarget.dataset.index;
				this.$set(this.members, curIndex, Object.assign(this.members[curIndex], {
					showEditInput: false
				}))
				console.log(this.members)
			},
			editNoteName(e) {
				this.hideEditInput(e);
			},
			makePhoneCall(e) {
				let phoneNum = e.currentTarget.dataset.phone;
				uni.makePhoneCall({
					phoneNumber: phoneNum
				})
			},
			showTakeRateSetModal(e) {
				this.showModal(e);
			},
			showModal(e) {
				this.isShowTakeRateSet = true
			},
			hideModal(e) {
				this.isShowTakeRateSet = false
			},
			applySetTakeRate() {
				uni.showToast({
					title: '保存成功',
					icon: 'success',
					mask: true
				})
			}
		},
	}
</script>

<style scoped>
	.left-grid {
		width: 50%;
	}
	
	.bottom-border {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
</style>
