<template>
	<div>
		<div class="content">
			<dataTable :columns="columns" :page-obj="pageObj" :breads="breads" :checklist="checklist" ref="table" url="sys/user/member/list">
				<el-button slot="moreButton" type="primary" @click="add('form')">添加新用户</el-button>
				<el-table-column slot="operate" label="操作" align="center" fixed="right" width="100">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
						<el-button type="text" size="small" @click="handdelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</dataTable>
			<el-dialog :visible.sync="dialogFormVisible" title="添加">
				<el-form ref="form" :model="form" :rules="rules">
					<el-form-item label="姓名" label-width="100px" prop="name">
						<el-input v-model.trim="form.name" autocomplete="off" placeholder="请输入" maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="手机" label-width="100px" prop="phone">
						<el-input v-model.trim="form.phone" autocomplete="off" placeholder="请输入" maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" label-width="100px" prop="email">
						<el-input v-model.trim="form.email" autocomplete="off" placeholder="请输入" maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="密码" label-width="100px" prop="password">
						<el-input v-model.trim="form.password" autocomplete="off" show-password placeholder="请输入" maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="角色" label-width="100px" prop="roleId">
						<el-select v-model="form.roleId" placeholder="请选择">
							<el-option v-for="item in roles" :key="item.roleId" :label="item.roleName" :value="item.roleId">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitData">确 定</el-button>
				</div>
			</el-dialog>
			<el-dialog :visible.sync="dialogFormVisible1" title="编辑">
				<el-form ref="form" :model="form1" :rules="rules">
					<el-form-item label="姓名" label-width="100px" prop="name">
						<el-input v-model.trim="form1.name" autocomplete="off" placeholder="请输入" maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="手机" label-width="100px" prop="phone">
						<el-input v-model.trim="form1.phone" autocomplete="off" placeholder="请输入" maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" label-width="100px" prop="email">
						<el-input v-model.trim="form1.email" autocomplete="off" placeholder="请输入" maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="角色" label-width="100px" prop="roleId">
						<el-select v-model="form1.roleId" placeholder="请选择">
							<el-option v-for="item in roles" :key="item.roleId" :label="item.roleName" :value="item.roleId">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible1 = false">取 消</el-button>
					<el-button type="primary" @click="submitData1">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import {
		roleList,
		checkAccount,
		useradd,
		userdelete,
		useredit
	} from '@api/purchaser/organization'
	import dataTable from '@components/dataTable.vue'
	export default {
		components: {
			dataTable
		},
		data() {
			let checkPhone = async (rule, value, callback) => {
				if (!value) {
					return callback(new Error('手机号不能为空'));
				} else {
					const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
					if (reg.test(value)) {
						callback();
					} else {
						return callback(new Error('请输入正确的手机号'));
					}
				}
			};
			return {
				checklist: [{
					title: '姓名',
					type: 'input',
					model: 'name'
				}, {
					title: '手机',
					type: 'input',
					model: 'phone'
				}],
				breads: ['组织管理', '成员管理'],
				tableData: [],
				columns: [{
						label: '姓名',
						prop: 'name'
					},
					{
						label: '手机',
						prop: 'phone'
					},
					{
						label: '角色',
						prop: 'roleName'
					},
					{
						label: '创建时间',
						prop: 'createTime',
						sortable: true
					},
					{
						slot: 'operate'
					}
				], // 操作列

				pageObj: {
					size: 10,
					currentPage: 1,
					func: (currentPage) => {
						this.pageTurning(currentPage)
					}
				},
				dialogFormVisible1:false,
				dialogFormVisible: false,
				form1:{},
				form: {
					name: '',
					phone: '',
					email: '',
					password: '',
					roleId: ''
				},
				roles: [],
				rules: {
					name: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						validator: checkPhone,
						trigger: 'blur'
					}],
					email: [{
							required: true,
							message: '请输入电子邮箱',
							trigger: 'blur'
						},
						{
							pattern: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
							message: '请输入正确的邮箱地址'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
							message: '密码需由8-16位数字字母组合'
						}
					],
					roleId: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					uid:""
				}
			}
		},
		methods: {
			// 删除
		async handdelete(row) {
				try {
					await this.$confirm("确定要删除么？", '提示', {
						type: 'warning'
					})
					const {
						msg,
						code
					} = await userdelete(row.uid)
					if (code == 200) {
						this.$message.success(msg)
						this.$refs.table.getauditList()
					} else {
						this.$message.error(msg)
					}
				} catch (e) {
				console.log(e)
				}
			},
			// 编辑
			edit(row) {
				this.form1 = Object.assign({}, row)
				this.dialogFormVisible1 = true
				this.uid=row.uid
			},
			// 获取角色列表
			async getroleList() {
				let type = JSON.parse(localStorage.getItem("userInfo")).type
				const {
					data,
					code
				} = await roleList(type)
				this.roles = data
			},
			// 添加新用户
			add(form) {
				this.form = Object.assign({})
				this.dialogFormVisible = true
			},
			// 提交添加
			async submitData() {
				try {
					const valid = await this.$refs['form'].validate()
					if (valid) {
						let form = this.form
						const {
							code,
							msg
						} = await useradd(form)
						if (code === 200) {
							this.$message.success(msg)
							this.dialogFormVisible = false
							this.$refs.table.getauditList()
						} else {
							this.$message.error(msg)
						}
					}
				} catch (e) {
					console.log(e)
				}
			},
			// 提交编辑
			async submitData1() {
				try {
					const valid = await this.$refs['form'].validate()
					if (valid) {
						let form = this.form1
						form.uid=this.uid
						const {
							code,
							msg
						} = await useredit(form)
						if (code === 200) {
							this.$message.success(msg)
							this.dialogFormVisible1 = false
							this.$refs.table.getauditList()
						} else {
							this.$message.error(msg)
						}
					}
				} catch (e) {
					console.log(e)
				}
			},
		},
		created() {
			this.getroleList()
		}
	}
</script>

<style scoped>

</style>
