<template>
	<div class="app-content">
		<!-- 客户信息 -->
		<div class="module-com user-info">
			<div class="user-wrap">
				<app-avatar-module :src="data.avatarUrl" />
				<div class="user-top-right">
					<div>
						<div class="flex-center">
							<span class="app-size-32">{{ data.userName }}</span>
							<app-vip-module class="level-img" v-if="data.isMember == 1" :text="`VIP${data.userAsset.memberLevel}`" />
						</div>
						<div class="app-color-3">{{ data.id }}</div>
					</div>
					<div class="source-wrap">
						<i v-if="data.source == 0" class="iconfont iconweixinlaiyuan"></i>
						<i v-if="data.source == 1" class="iconfont iconzhifubao"></i>
						<i class="iconfont iconweixingongzhonghao" :class="[data.subscribe? 'app-color-4' : '']"></i>
						<i v-if="data.mobile" class="iconfont iconshoujihao1"></i>
					</div>
				</div>
			</div>
			<div class="user-bottom">
				<div class="data-list" v-for="(item, index) in fundsData" :key="index">
					<div class="app-size-30 app-bold">{{ item.value }}</div>
					<div class="app-color-3">{{ item.name }}</div>
				</div>
			</div>
		</div>
		<!-- 客户按钮 -->
		<div class="module-com tabs-wrap">
			<div class="tabs-list" v-for="(item, index) in tabsData" :key="index" @click="pageTo(item)">
				<div class="tabs-img">
					<img :src="item.img" alt mode="widthFix" />
				</div>
				<div class="tabs-name">{{ item.name }}</div>
			</div>
		</div>
		<!-- 备注 -->
		<div class="module-com remark-wrap" v-if="!$util.isEmpty(data.remarkList)">
			<div class="app-blod">备注</div>
			<div class="list-wrap">
				<div class="list-line" v-for="(item, index) in data.remarkList" :key="index">
					<div>{{ item.remark }}</div>
					<div @click="delRemarkFn(item)">
						<i class="iconfont icondelete"></i>
					</div>
				</div>
			</div>
		</div>
		<!-- 消费记录 -->
		<div class="module-com remark-wrap" v-if="!$util.isEmpty(data.orderList)">
			<div class="app-blod">消费记录</div>
			<div class="list-wrap">
				<block v-for="(item, index) in data.orderList" :key="index">
					<div class="list-line" v-if="index < 3 || orderMoreStatus">
						<div class="flex-center">
							<div class="time">{{ item.createTime }}</div>
							<div>{{ item.orderName }}</div>
						</div>
						<div class="price">￥{{ item.actPrice }}</div>
					</div>
				</block>
			</div>
			<div class="more-text" v-if="!orderMoreStatus" @click="orderMoreFn">更多 ></div>
		</div>
		<!-- 充值弹窗 -->
		<modal-module :show="rechargeModal" @cancel="modalCancel" @click="rechargeModalClick" :maskClosable="false" title="充值" padding="30rpx 30rpx">
			<template v-slot:content>
				<div class="app-modal-input-wrap">
					<div class="inp-list-line">
						<div class="line-label">充值金额</div>
						<div class="line-input">
							<input type="text" v-model="rechargeForm.rechargeAmount" :adjust-position="false" class="inp-input" />
							<div class="inp-prompt">元</div>
						</div>
					</div>
					<div class="inp-list-line">
						<div class="line-label">确认密码</div>
						<div class="line-input">
							<input type="text" v-model="rechargeForm.confirmPassword" :adjust-position="false" class="inp-input" />
						</div>
					</div>
				</div>
			</template>
		</modal-module>
		<!-- 修改密码弹窗 -->
		<modal-module :show="passwordModal" @cancel="modalCancel" @click="passwordModalClick" :maskClosable="false" title="重置密码" padding="30rpx 30rpx">
			<template v-slot:content>
				<div class="app-modal-input-wrap">
					<div class="inp-list-line">
						<div class="line-label">重置密码</div>
						<div class="line-input">
							<input type="text" v-model="passwordForm.password" :adjust-position="false" class="inp-input" />
						</div>
					</div>
				</div>
			</template>
		</modal-module>
		<!-- 升级 -->
		<modal-module :show="upgradeModal" @cancel="modalCancel" @click="upgradeModalClick" :maskClosable="false" title="升级" padding="30rpx 30rpx">
			<template v-slot:content>
				<div class="app-modal-input-wrap">
					<div class="inp-list-line">
						<div class="line-label">请选择等级</div>
						<div class="line-input">
							<picker mode="selector" :value="upgradeForm.memberLevel" :range="levelData.list" range-key="level" @change="changeLevelFn" class="inp-select">
								<div v-if="upgradeForm.memberLevel">{{ levelSelData.level }}</div>
								<div class="tui-placeholder" v-else>请选择</div>
							</picker>
						</div>
					</div>
					<div class="inp-list-line">
						<div class="line-label">确认密码</div>
						<div class="line-input">
							<input type="text" v-model="upgradeForm.confirmPassword" class="inp-input" />
						</div>
					</div>
				</div>
			</template>
		</modal-module>
		<!-- 添加备注 -->
		<modal-module :show="remarkModal" @cancel="modalCancel" @click="remarkModalClick" :maskClosable="false" title="添加备注" padding="30rpx 30rpx">
			<template v-slot:content>
				<div class="app-modal-input-wrap">
					<div class="inp-list-line">
						<textarea v-model="remarkForm.remark" placeholder-style="phcolor" placeholder="请填写备注内容，如客户喜好，消费情况等" />
					</div>
				</div>
			</template>
		</modal-module>
		<!-- 删除备注弹窗 -->
		<modal-module :show="promptRemarkModal" @cancel="modalCancel" @click="promptModalClick" :content="promptModalText" color="#333" :size="32" padding="30rpx 30rpx"></modal-module>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import AppVipModule from '@/components/module/app-vip'
import AppAvatarModule from '@/components/module/app-avatar'
import ModalModule from '@/components/plugin/modal'
// api
import { getLevel } from '@/utils/config'
import { getUserDet, remarkAdd, remarkDel, upgrade, rechargeB, resetPassword } from '@/api/member'
export default {
	name: 'member-detail',
	components: {
		AppVipModule,
		AppAvatarModule,
		ModalModule
	},
	props: {},
	data() {
		return {
			constant: this.$constant,
			// data
			data: {},
			// modal
			rechargeModal: false,
			passwordModal: false,
			upgradeModal: false,
			remarkModal: false,
			// 用户资金情况
			fundsData: [
				{
					name: '消费次数',
					value: 0
				},
				{
					name: '累计消费(¥)',
					value: 0
				},
				{
					name: '成长值',
					value: 0
				},
				{
					name: '余额',
					value: 0
				}
			],
			// tab按钮
			tabsData: [
				{
					name: '优惠券',
					img: `${this.$constant.imgUrl}/retail/member/tab-icon-1.png`,
					funtion: () => {
						this.$msg('功能开发中...')
					}
				},
				{
					name: '邀请有礼',
					img: `${this.$constant.imgUrl}/retail/member/tab-icon-2.png`,
					funtion: () => {
						this.$msg('功能开发中...')
					}
				},
				{
					name: '消费登记',
					img: `${this.$constant.imgUrl}/retail/member/tab-icon-3.png`,
					funtion: () => {
						this.$msg('功能开发中...')
					}
				},
				{
					name: '备注',
					img: `${this.$constant.imgUrl}/retail/member/tab-icon-4.png`,
					funtion: () => {
						this.remarkModal = true
					}
				},
				{
					name: '充值',
					img: `${this.$constant.imgUrl}/retail/member/tab-icon-5.png`,
					funtion: () => {
						this.rechargeModal = true
					}
				},
				{
					name: '重置密码',
					img: `${this.$constant.imgUrl}/retail/member/tab-icon-6.png`,
					funtion: () => {
						this.passwordModal = true
					}
				},
				{
					name: '升级',
					img: `${this.$constant.imgUrl}/retail/member/tab-icon-7.png`,
					funtion: () => {
						this.upgradeModal = true
					}
				},
				{
					name: '发消息',
					img: `${this.$constant.imgUrl}/retail/member/tab-icon-8.png`,
					url: '/pages/chat/index'
				}
			],
			// 重置密码
			passwordForm: {
				password: ''
			},
			// 充值
			rechargeForm: {
				rechargeAmount: 0,
				confirmPassword: ''
			},
			// 升级
			levelSelData: {},
			upgradeForm: {
				memberLevel: '',
				confirmPassword: ''
			},
			// 备注
			remarkForm: {
				remark: ''
			},
			remarkOperateData: {},
			// 订单
			orderMoreStatus: false,
			// 确认操作提示
			promptRemarkModal: false,
			promptModalText: '是否要删除该备注？'
		}
	},
	computed: {
		...mapGetters({ levelData: 'getLevel' })
	},
	onLoad() {
		// this.init()
	},
	methods: {
		init() {
			this._getUserDet()
			getLevel()
		},
		// api
		_getUserDet() {
			getUserDet({ userId: this.option.id }).then(res => {
				if (this.$util.isEmpty(res.data)) return false
				this.data = res.data
				this.fundsData[0].value = res.data.userAsset.totalBuyNum
				this.fundsData[1].value = res.data.userAsset.totalExpend
				this.fundsData[2].value = res.data.userAsset.growth
				this.fundsData[3].value = res.data.userAsset.balance
			})
		},
		_rechargeB() {
			rechargeB({
				userId: this.data.id,
				...this.rechargeForm
			}).then(res => {
				this.$msg('充值成功！')
				this.modalCancel()
			})
		},
		_upgrade() {
			upgrade({
				userId: this.data.id,
				...this.upgradeForm
			}).then(res => {
				this.$msg('升级成功！')
				this.modalCancel()
			})
		},
		_resetPassword() {
			resetPassword({
				userId: this.data.id,
				...this.passwordForm
			}).then(res => {
				this.$msg('重置成功！')
				this.modalCancel()
			})
		},
		_remarkAdd() {
			remarkAdd({
				userId: this.data.id,
				...this.remarkForm
			}).then(res => {
				this.$msg('添加成功！')
				this.modalCancel()
				this._getUserDet()
			})
		},
		_delRemark() {
			remarkDel({ id: this.remarkOperateData.id }).then(res => {
				this.$msg('删除成功！')
				this.modalCancel()
				this._getUserDet()
			})
		},
		// operate ===========================
		orderMoreFn() {
			this.orderMoreStatus = false
		},
		delRemarkFn(item) {
			this.remarkOperateData = item
			this.promptModalText = '是否要删除该备注？'
			this.promptRemarkModal = true
		},
		// 弹窗按钮
		changeLevelFn(e) {
			this.levelSelData = this.levelData.list[e.detail.value]
			this.upgradeForm.memberLevel = this.levelSelData.level
		},
		passwordModalClick(e) {
			if (e.index === 0) {
				this.modalCancel()
			} else {
				this.modalCancel()
				this.promptModalText = '确认重置密码？'
				this.promptRemarkModal = true
			}
		},
		upgradeModalClick(e) {
			if (e.index === 0) {
				this.modalCancel()
			} else {
				this.modalCancel()
				this.promptModalText = '确认升级？'
				this.promptRemarkModal = true
			}
		},
		rechargeModalClick(e) {
			if (e.index === 0) {
				this.modalCancel()
			} else {
				this.modalCancel()
				this.promptModalText = '确认充值？'
				this.promptRemarkModal = true
			}
		},
		remarkModalClick(e) {
			if (e.index === 0) {
				this.modalCancel()
			} else {
				this._remarkAdd()
			}
		},
		promptModalClick(e) {
			if (e.index === 0) {
				this.modalCancel()
			} else {
				if (this.promptModalText == '是否要删除该备注？') {
					this._delRemark()
				}
				if (this.promptModalText == '确认升级？') {
					this._upgrade()
				}
				if (this.promptModalText == '确认充值？') {
					this._rechargeB()
				}
				if (this.promptModalText == '确认重置密码？') {
					this._resetPassword()
				}
			}
		},
		modalCancel() {
			this.rechargeModal = false
			this.passwordModal = false
			this.upgradeModal = false
			this.remarkModal = false
			this.promptRemarkModal = false
		}
	}
}
</script>

<style lang='scss' scoped>
	.app-content {
		background-image: url('../../static/images/member/bg.png');
		background-size: 100% 330px;
		background-repeat: no-repeat;
		padding-top: 30px;
		padding-bottom: 30px;
	}
	// 公共
	.module-com {
		margin: 0 30px 20px;
		padding: 20px;
		background-color: #fff;
		box-shadow: 0px 6px 16px #ddd;
		border-radius: 10px;
	}
	// 用户信息
	.user-info {
		padding: 40px 30px 50px;
		.user-wrap {
			@include disFlex(center, space-between);
			margin-bottom: 60px;
			.user-top-right {
				@include disFlex(flex-start, space-between);
				width: calc(100% - 120px);
				.flex-center {
					margin-bottom: 14px;
					.level-img {
						margin-left: 10px;
						width: 80px;
						/deep/.vip-text {
							top: -2px;
							left: 26px;
							font-weight: 400;
							transform: scale(0.7);
						}
					}
				}
				.source-wrap {
					.iconfont {
						margin-left: 10px;
					}
					.iconweixinlaiyuan {
						color: #35b801;
					}
					.iconzhifubao {
						color: #00aaed;
					}
					.iconshoujihao1 {
						color: #fc2e47;
					}
				}
			}
		}
		.user-bottom {
			width: 100%;
			@include disFlex(center, space-between);
			.data-list {
				text-align: center;
				.app-size-30 {
					margin-bottom: 14px;
				}
			}
		}
	}
	// tabs
	.tabs-wrap {
		padding: 40px 10px;
		@include disFlex(center, center);
		flex-wrap: wrap;
		.tabs-list {
			width: 25%;
			margin-bottom: 50px;
			text-align: center;
			.tabs-img {
				width: 50px;
				height: 50px;
				margin: 0 auto 14px;
				img {
					height: 100%;
				}
			}
			.tabs-name {
				color: $fontColor2;
			}
			&:nth-child(n + 5) {
				margin-bottom: 0;
			}
		}
	}
	// 备注
	.remark-wrap {
		.list-wrap {
			margin-top: 24px;
			.list-line {
				@include disFlex(center, space-between);
				margin-top: 10px;
				padding: 16px 20px;
				background-color: #f7f7f8;
				color: $fontColor2;
				border-radius: 4px;
				.iconfont {
					color: $fontColor3;
				}
				.time {
					margin-right: 70px;
				}
				.price {
					color: #333;
				}
			}
		}
		.more-text {
			margin-top: 24px;
			text-align: center;
			color: $fontColor3;
		}
	}
</style>
