<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">审批列表</block>
		</cu-custom>
		<!-- 团队成员信息 -->
		<view class="margin-top-sm margin-lr-sm padding bg-white name-card shadow-warp"
			v-for="(member, index) in members">
			<!-- 个人名片 -->
			<view class="flex justify-start">
				<view class="cu-avatar round"
					:style="'background-image:url(' + member.customerLogoUrl + '); width: 130rpx; height: 130rpx;'">
				</view>
				<view class="margin-left-sm flex-column-around">
					<view class="text-black text-xl">{{member.name}}</view>
					<view class="">
						<text class="margin-right-xs">角色：申请加入</text>
					</view>
				</view>
			</view>
			<!-- 实名及公告图标 -->
			<view class="flex justify-end oper-bar">
				<view class="text-center margin-right-sm text-orange" @click="makePhoneCall(member.phone)">
					<view class="cuIcon-phone"></view>
				</view>
			</view>
			<view class="solid-top margin-top-sm flex justify-between align-center padding-top">
				<view class="flex flex-twice">
					<text class="margin-right-xs">审批意见</text>
					<input class="radius-input" @input="inputRemark($event, member)"></input>
				</view>
				
				<view class="flex flex-sub justify-end">
					<view class="cu-btn bg-main-color sm radius" @click="approvingMember(index, member, '同意')">同意</view>
					<view class="cu-btn sm radius margin-left-xs" @click="approvingMember(index, member, '不同意')">不同意</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
	
	export default {
		components: {
			horizontalNameCard
		},
		data() {
			return {
				members: [],
				curUserInfo: {}
			}
		},
		onLoad(option) {
			this.loadData(option);
		},
		methods: {
			async loadData(option) {
				this.curUserInfo = this.$request.getCurUserInfo();
				this.loadMembers2Approve();
			},
			makePhoneCall(phoneNum) {
				uni.makePhoneCall({
					phoneNumber: phoneNum
				})
			},
			inputRemark(e, member) {
				member.remark = e.detail.value;
			},
			async loadMembers2Approve(params = {}) {
				let res = await this.$request.getMembersWaitingApproval({
					customerId: this.curUserInfo.customerId
				});
				if (res && res.data) {
					this.members = res.data;
				}
			},
			async approvingMember(index, member, defaultRemark) {
				let remark = member.remark ? member.remark : defaultRemark;
				let res = await this.$request.editCustomerPlace({
					id: member.id,
					remark: remark
				});
				if (res && res.code === 0) {
					uni.showToast({
						icon: 'success'
					})
					this.members.splice(index, 1);
				} else {
					uni.showToast({
						icon: 'error'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.name-card {
		position: relative;
	}

	.name-card .oper-bar {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 50rpx;
	}

	.cu-list+.cu-list {
		margin-top: unset;
	}
</style>
