<template>
	<div>
		<Modal v-model="isTemplate" scrollable footer-hide closable :title="title" :z-index="1" width="700"
			@on-cancel="cancel">
			<div class="article-manager">
				<Card :bordered="false" dis-hover>
					<Form ref="formItem" :model="formItem" :label-width="labelWidth" :label-position="labelPosition"
						:rules="ruleValidate" @submit.native.prevent>
						<Row type="flex" :gutter="24">
							<Col span="24">
							<FormItem label="头像：" prop="image">
								<div class="picBox" @click="modalPicTap('image')">
									<div class="pictrue" v-if="formItem.avatar"><img v-lazy="formItem.avatar"></div>
									<div class="upLoad" v-else>
										<div class="iconfont">+</div>
									</div>
								</div>
							</FormItem>
							</Col>
							<Col span="24">
							<FormItem label="姓名：" prop="name" label-for="name">
								<Input v-model="formItem.name" placeholder="请输入姓名" />
							</FormItem>
							</Col>
							<Col span="24">
							<FormItem label="别名：" prop="alias" label-for="alias">
								<Input v-model="formItem.alias" placeholder="请输入别名" />
							</FormItem>
							</Col>
							<Col span="24">
							<FormItem label="手机号：" prop="mobile" label-for="mobile">
								<Input v-model="formItem.mobile" placeholder="请输入手机号" :disabled="formItem.id" />
							</FormItem>
							</Col>
							<FormItem label="推荐员工：" label-for="spread_id" prop="spread_id">
								<Select v-model="formItem.spread_id" style="width: 250px">
									<Option value="">无</Option>
									<Option v-for="item in ygList" :key="item.id" :value="item.id">
										{{ item.name }}
									</Option>
								</Select>
								<Button type="primary" class="ml10 search" @click="userSearchs">搜索</Button>
							</FormItem>
							<Col span="24">
							<FormItem label="销售比例：" label-for="sale_ratio" prop="sale_ratio">
								<Input v-model="formItem.sale_ratio" placeholder="请输入销售比例" />
							</FormItem>
							</Col>
							<Col span="24">
							<FormItem label="手工比例：" label-for="craft_ratio " prop="craft_ratio">
								<Input v-model="formItem.craft_ratio" placeholder="请输入手工比例" />
							</FormItem>
							</Col>
							<Col span="24">
							<FormItem label="绑定用户：" label-for="mobile" prop="mobile">
								<Button v-if="checkUser.nickname || checkUser.phone"
									style="margin-right: 20rpx;">昵称:{{checkUser.nickname || '暂无'}}
									手机号：{{checkUser.phone || '暂无'}}</Button>
								<Button type="primary" @click="chooseUser">选择用户</Button>
							</FormItem>

							</Col>
							<Col span="24" class="mt20">
							<FormItem label="性别：">
								<RadioGroup v-model="formItem.gender">
									<Radio :label="0">
										<Icon type="social-apple"></Icon>
										<span>女</span>
									</Radio>
									<Radio :label="1">
										<Icon type="social-android"></Icon>
										<span>男</span>
									</Radio>
								</RadioGroup>
							</FormItem>
							</Col>
							<Col span="24" class="mt20">
							<FormItem label="类型：">
								<RadioGroup v-model="formItem.is_reservation">
									<Radio :label="1">
										<Icon type="social-apple"></Icon>
										<span>服务员工</span>
									</Radio>
									<Radio :label="0">
										<Icon type="social-android"></Icon>
										<span>普通员工</span>
									</Radio>
								</RadioGroup>
							</FormItem>
							</Col>
							<Col span="24">
							<FormItem label="职务：" label-for="position" prop="position">
								<Input v-model="formItem.position" placeholder="请输入职务" />
							</FormItem>
							</Col>
							<Col span="24">
							<FormItem label="住址：" label-for="address" prop="address">
								<Input v-model="formItem.address" placeholder="请输入住址" />
							</FormItem>
							</Col>
							<Col span="24">
							<FormItem label="部门：" label-for="main_department" prop="main_department">
								<el-cascader placeholder="请选择部门" :options="departmentList"
									:value="formItem.main_department" v-width="320"
									:props="{ checkStrictly: true,value: 'id',label: 'name' }" clearable
									@change="changeBm"></el-cascader>
							</FormItem>
							</Col>
							<Col span="24" class="mt20">
							<FormItem label="是否禁用：">
								<RadioGroup v-model="formItem.enable">
									<Radio :label="0">
										<Icon type="social-apple"></Icon>
										<span>禁用</span>
									</Radio>
									<Radio :label="1">
										<Icon type="social-android"></Icon>
										<span>启用</span>
									</Radio>
								</RadioGroup>
							</FormItem>
							</Col>
						</Row>
						<Row style="justify-content: space-around;">
							<Col>
							<Button type="primary" class="btn" @click="handleSubmit('formItem')">提交</Button>
							</Col>
						</Row>
						<Spin size="large" fix v-if="spinShow"></Spin>
					</Form>
				</Card>
			</div>
		</Modal>
		<Modal v-model="modalPic" width="960px" scrollable footer-hide closable title="上传头像" :mask-closable="false"
			:z-index="1">
			<uploadPictures :isChoice="isChoice" @getPic="getPic" :gridBtn="gridBtn" :gridPic="gridPic" v-if="modalPic">
			</uploadPictures>
		</Modal>
		<Modal v-model="modals" title="用户列表" footerHide class="paymentFooter" scrollable width="900">
			<user-list ref="userList" :goodsType="1" v-if="modals" @getUserId="getUserId" :serviceCard="1"></user-list>
		</Modal>
	</div>
</template>

<script>
	import uploadPictures from "@/components/uploadPictures";
	import userList from "@/components/userList"
	import {
		getDepartmentList,
		addYg,
		editYg
	} from '@/api/check';
	import {
		erpConfig
	} from "@/api/erp";
	import {
		mapState
	} from 'vuex';
	import {
		getYgList
	} from "@/api/check";
	export default {
		name: 'systemSt',
		components: {
			uploadPictures,
			userList
		},
		props: {},
		data() {
			let validatePhone = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请填写手机号'));
				} else if (!/^1[3456789]\d{9}$/.test(value)) {
					callback(new Error('手机号格式不正确!'));
				} else {
					callback();
				}
			};
			let validateUpload = (rule, value, callback) => {
				if (!this.formItem.avatar) {
					callback(new Error('请上传头像'))
				} else {
					callback()
				}
			};
			return {
				checkUser: {}, //选择的用户
				modals: false, //用户弹窗
				isEdit: 0, //0->添加 1->编辑
				goodsList: [],
				treeSelect: [],
				modalErp: false,
				openErp: false,
				isTemplate: false,
				title: '',
				formItem: {
					enable: 1,
					is_reservation: 0,
					uid: '',
					name: '',
					avatar: '',
					mobile: '',
					alias: '',
					address: '',
					main_department: '',
					direct_leader: 'ChenBin',
					position: '',
					sale_ratio: '',
					craft_ratio: '',
					spread_id:'',
				},
				spinShow: false,
				addresData: [],
				ruleValidate: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请输入地址地址',
						trigger: 'blur'
					}],
					mobile: [{
						required: true,
						validator: validatePhone,
						trigger: 'blur'
					}],
					avatar: [{
						required: true,
						validator: validateUpload,
						trigger: 'change'
					}]
				},
				grid: {
					xl: 20,
					lg: 20,
					md: 20,
					sm: 24,
					xs: 24
				},
				gridPic: {
					xl: 6,
					lg: 8,
					md: 12,
					sm: 12,
					xs: 12
				},
				gridBtn: {
					xl: 4,
					lg: 8,
					md: 8,
					sm: 8,
					xs: 8
				},
				modalPic: false,
				isChoice: '单选',
				pid: 0,
				isApi: 0,
				add: 0,
				departmentList: [],
				isMobile: false,
			}
		},
		created() {
			this.getDepartmentList();
			this.getygList();
			let data = {
				pid: 0
			}
			if (this.isEdit == 0) {
				this.formItem = {
					is_reservation: 0,
					enable: 1,
					name: '',
					avatar: '',
					mobile: '',
					alias: '',
					address: '',
					main_department: '',
					direct_leader: 'ChenBin',
					position: '',
					sale_ratio: '',
					craft_ratio: '',
					ygList:[],
					spread_id:'',
				}
			}
			// console.log(this.info,'infoinfoinfoinfo')
		},
		computed: {
			...mapState('store/user', ['info']),
			labelWidth() {
				return this.isMobile ? undefined : 120;
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'right';
			}
		},
		mounted: function() {
			
		},
		methods: {
			// 获取员工列表
			getygList() {
				getYgList({
					page: 1,
					limit: 1000
				}).then(res => {
					console.log(res)
					this.ygList = res.data.list
				})
			},
			//获取用户id
			getUserId(row) {
				this.modals = false
				this.formItem.uid = row.uid
				this.checkUser = row
				console.log(row, '用户id')
			},
			chooseUser() {
				this.modals = true
			},
			changeBm(res) {
				console.log(res);
				this.formItem.main_department = res[res.length - 1]
				this.formItem.department = [this.formItem.main_department]
			},
			getDepartmentList() {
				getDepartmentList().then(res => {
					console.log(res);
					this.departmentList = res.data
				})
			},
			clearFrom() {
				this.goodsList = [];
				this.formItem = {
					enable: 1,
					name: '',
					avatar: '',
					mobile: '',
					alias: '',
					address: '',
					main_department: '',
					direct_leader: 'ChenBin',
					sale_ratio: 0,
					is_reservation: 0,
					craft_ratio: 0,
					spread_id:''
				}
				this.add = 0;
				this.isApi = 0;
			},
			cancel() {
				this.isTemplate = false;
				this.clearFrom();
			},
			// 选择图片
			modalPicTap() {
				this.modalPic = true;
				this.$refs.formItem.validateField("avatar")
			},
			// 选中图片
			getPic(pc) {
				this.formItem.avatar = pc.att_dir;
				this.modalPic = false;
			},
			// 提交
			handleSubmit(name) {
				console.log(this.formItem)
				this.$refs[name].validate((valid) => {
					if (valid) {
						// if(!this.formItem.sale_ratio) {
						// 	return this.$Message.error('请输入销售比例');
						// }
						if (!this.formItem.craft_ratio) {
							return this.$Message.error('请输入手工比例');
						}
						if (this.formItem.id) {
							editYg({
								id: this.formItem.id,
								name: this.formItem.name,
								avatar: this.formItem.avatar,
								mobile: this.formItem.mobile,
								alias: this.formItem.alias,
								address: this.formItem.address,
								main_department: this.formItem.main_department,
								department: this.formItem.department || [this.formItem.main_department],
								uid: this.formItem.uid,
								userid: this.formItem.userid,
								direct_leader: 'ChenBin',
								position: this.formItem.position,
								sale_ratio: this.formItem.sale_ratio,
								craft_ratio: this.formItem.craft_ratio,
								is_reservation: this.formItem.is_reservation,
								enable: this.formItem.enable,
								spread_id:this.formItem.spread_id

							}).then(async res => {
								this.$Message.success(res.msg);
								this.isTemplate = false;
								this.$emit('success')
								// this.clearFrom();
							}).catch(res => {
								this.$Message.error(res.msg);
							})
						} else {
							addYg(this.formItem).then(async res => {
								this.$Message.success(res.msg);
								this.isTemplate = false;
								this.$emit('success')
								// this.clearFrom();
							}).catch(res => {
								this.$Message.error(res.msg);
							})
						}

					} else {
						return false;
					}
				})
			}
		}
	}
</script>

<style scoped lang="stylus">
	.tips {
		display: inline-bolck;
		font-size: 12px;
		font-weight: 400;
		color: #999;
	}

	.box {
		display flex flex-wrap wrap .box-item {
			position relative margin-right 20px width 60px height 60px margin-bottom 10px img {
				width 100% height 100%
			}

			.icon {
				position absolute;
				top: -10px;
				right -10px;
			}
		}

		.upload-box {
			width 60px height 60px margin-bottom 10px display flex align-items center justify-content center background #ccc
		}
	}

	.map-sty {
		width: 90%;
		text-align: right;
		margin: 0 0 0 10%;
	}

	/deep/.ivu-card-body {
		padding 16px 0 0 0 !important;
	}

	.footer {
		width 100%;
		height 50px;
		box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.05);
		margin-top 50px;
	}

	.btn /deep/.ivu-btn-primary {
		width 86px;
	}

	.btn {
		margin-top: 20px;
	}

	.inputW {
		width 400px;
	}

	.ivu-mt {
		min-width 580px;
	}

	.picBox {
		display: inline-block;
		cursor: pointer;

		.upLoad {
			width: 58px;
			height: 58px;
			line-height: 58px;
			border: 1px dotted rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			background: rgba(0, 0, 0, 0.02);
		}

		.pictrue {
			width: 60px;
			height: 60px;
			border: 1px dotted rgba(0, 0, 0, 0.1);
			margin-right: 10px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.iconfont {
			color: #CCCCCC;
			font-size 26px;
			text-align center;
		}
	}
</style>