<template>
	<div class="app-content">
		<!-- 员工信息 -->
		<form @submit="formSubmit" @reset="formReset">
			<div class="module-com input-line-wrap">
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title required">员工姓名</div>
					<input v-model="form.adminName" placeholder-class="phcolor" class="tui-input" name="adminName" placeholder="请输入姓名" maxlength="50" type="text" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :arrow="true">
					<div class="tui-title required">角色</div>
					<picker mode="selector" :value="form.roleId" :range="roleList" range-key="roleName" @change="changeRoleFn" class="tui-input">
						<input v-model="form.roleId" name="roleId" type="text" hidden />
						<div v-if="form.roleId">{{ roleSelData.roleName }}</div>
						<div class="tui-placeholder" v-else>请选择</div>
					</picker>
				</tui-list-cell>
				<tui-list-cell class="line-cell" :arrow="true" @click="selMemberFn">
					<div class="tui-title required">关联微信</div>
					<div v-if="form.userId" class="member-wrap flex-center">
						<input v-model="form.userId" name="userId" type="text" hidden />
						<div class="member-img">
							<app-avatar-module :src="memberData.avatarUrl" :width="60" />
						</div>
						<div class="member-det">
							<div class="app-size-28">{{ memberData.realName }}</div>
							<div>{{ memberData.mobile }}</div>
						</div>
					</div>
					<div v-else class="tui-placeholder">请选择</div>
				</tui-list-cell>
			</div>
			<div class="prompt-text">注: 关联的微信号要注册会员并关注公从号</div>
			<!-- 收款通知 -->
			<div class="module-com input-line-wrap">
				<tui-list-cell class="line-cell between" padding="14rpx 30rpx" :hover="false">
					<div class="tui-title">收款通知</div>
					<div>
						<switch :checked="form.remind == 0 ? false : true" @change="remindChangeFn" />
					</div>
				</tui-list-cell>
			</div>
			<!-- 登录信息 -->
			<div class="module-com input-line-wrap">
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title required">登陆密码</div>
					<input v-model="form.password" placeholder-class="phcolor" class="tui-input" name="password" placeholder="请输入" maxlength="50" type="text" />
				</tui-list-cell>
				<tui-list-cell class="line-cell remark-wrap" :hover="false">
					<div class="tui-title">备注信息</div>
					<div class="tui-input">
						<textarea v-model="form.remark" class="tui-textarea remark" placeholder-class="phcolor" placeholder="请输入内容" />
					</div>
				</tui-list-cell>
			</div>
			<!-- 马上启用 -->
			<div class="module-com input-line-wrap">
				<tui-list-cell class="line-cell between" padding="14rpx 30rpx" :hover="false">
					<div class="tui-title">马上启用</div>
					<div>
						<switch :checked="form.status == 0 ? false : true" @change="statusChangeFn" />
					</div>
				</tui-list-cell>
			</div>
			<!-- 提交 -->
			<div class="confirm-btn">
				<button class="admin-button-com big blue" formType="submit">提交</button>
			</div>
		</form>
	</div>
</template>

<script>
import TuiListCell from '@/components/plugin/list-cell'
import AppAvatarModule from '@/components/module/app-avatar'
const form = require('@/utils/formValidation.js')
// api
import { getRoleList, getStaffDet as getDet, addStaff as add, updateStaff as update } from '@/api/staff'
import { getDet as getMemberDet } from '@/api/member'
export default {
	name: 'staff-add',
	components: {
		TuiListCell,
		AppAvatarModule
	},
	data() {
		return {
			form: {
				adminName: '',
				roleId: '',
				remind: 0,
				password: '',
				userId: '',
				status: 0,
				remark: ''
			},
			roleList: [],
			roleSelData: {},
			memberData: {}
		}
	},
	onLoad() {
		// this.init()
	},
	methods: {
		init() {
			let data = uni.getStorageSync('addStaffData')
			if (data) {
				uni.removeStorageSync('addStaffData')
				this.form = data.form
				this.roleList = data.roleList
				this.roleSelData = data.roleSelData
			}
			let memberData = uni.getStorageSync('addSelMember')
			if (memberData) {
				uni.removeStorageSync('addSelMember')
				this.memberData = memberData
				this.form.userId = memberData.id
			}

			if (data) return false

			this._getRoleList().then(res => {
				if (this.option.id) {
					this._getDet()
				}
			})
		},
		// api
		async _getRoleList() {
			await getRoleList().then(res => {
				if (this.$util.isEmpty(res.data)) return false
				this.roleList = res.data.list
			})
		},
		_getDet() {
			getDet({ id: this.option.id }).then(res => {
				if (this.$util.isEmpty(res.data)) return
				Object.keys(this.form).forEach((i, index) => {
					if (i != 'password') {
						this.form[i] = res.data[i]
					}
				})
				this.roleSelData = this.roleList.filter(e => this.form.roleId == e.id)[0]

				if (this.form.userId) {
					this._getMemberDet()
				}
			})
		},
		// 获取客户详情
		_getMemberDet() {
			getMemberDet({ userId: this.form.userId }).then(res => {
				if (this.$util.isEmpty(res.data)) return
				this.memberData = res.data
			})
		},
		// option
		// 关联微信
		selMemberFn() {
			let data = {
				form: this.form,
				roleList: this.roleList,
				roleSelData: this.roleSelData
			}
			uni.setStorageSync('addStaffData', data)
			this.$util.pageTo({
				url: '/admin/staff/sel-member',
				query: {
					...this.option
				}
			})
		},
		changeRoleFn(e) {
			this.roleSelData = this.roleList[e.detail.value]
			this.form.roleId = this.roleSelData.id
		},
		remindChangeFn(e) {
			this.form.remind = e.detail.value ? 1 : 0
		},
		statusChangeFn(e) {
			this.form.status = e.detail.value ? 1 : 0
		},
		confirmFn() {
			let hostFn = this.option.id ? update : add
			if (this.option.id) {
				this.form.id = this.option.id
			}
			hostFn(this.form).then(res => {
				let promptText = this.option.id ? '修改成功！' : '添加成功！'
				this.$msg(promptText)
				this.$util.pageTo('/admin/staff/list')
			})
		},
		// 表单验证
		formSubmit(e) {
			// 表单规则
			let rules = [
				{
					name: 'adminName',
					rule: ['required'],
					msg: ['请输入姓名']
				},
				{
					name: 'roleId',
					rule: ['required'],
					msg: ['请选择角色']
				},
				{
					name: 'userId',
					rule: ['required'],
					msg: ['请选择关联微信']
				},
				{
					name: 'password',
					rule: ['required'],
					msg: ['请输入密码']
				}
			]
			// 进行表单检查
			let formData = e.detail.value
			let checkRes = form.validation(formData, rules)
			// 验证通过!
			if (!checkRes) {
				this.confirmFn()
			} else {
				this.$msg(checkRes)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		min-height: calc(100vh - 20px);
		padding-top: 20px;
	}
	.prompt-text {
		color: $fontColor3;
		padding-left: 30px;
		margin-bottom: 30px;
	}
	// ---
	.module-com {
		margin-bottom: 20px;
		.member-wrap {
			.member-det {
				font-size: 24px;
				margin-left: 20px;
			}
		}
		.remark-wrap {
			align-items: flex-start;
			.remark {
				height: 240px;
			}
		}
	}
	// 按钮
	.confirm-btn {
		width: calc(100% - 60px);
		margin: 60px 30px 20px;
		.admin-button-com {
			width: 100%;
		}
	}
</style>
