<template>
	<div id="app" class="app-container">
		<el-form :inline="true" :model="parameter" class="demo-form-inline">
			<el-form-item label="用户ID">
				<el-input v-model="parameter.keyword" placeholder="用户ID"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table style="margin-top: 5px;" v-loading="listLoading" :data="userlist" element-loading-text="Loading"
			border fit highlight-current-row>
			<el-table-column label="用户ID" width="120" align="center">
				<template slot-scope="scope">
					{{scope.row.id}}
				</template>
			</el-table-column>
		<!-- 	<el-table-column label="用户账号" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.username }}</span>
				</template>
			</el-table-column> -->
			<el-table-column label="用户微信名" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.username }}</span>
				</template>
			</el-table-column>
			<el-table-column label="别名" align="center" v-if="false">
				<template slot-scope="scope">
					<span>{{ scope.row.full_name }}</span>
				</template>
			</el-table-column>
			<el-table-column label="用户电话" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.phone }}</span>
				</template>
			</el-table-column>
			<el-table-column label="备用电话" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.updphone }}</span>
				</template>
			</el-table-column>
			<el-table-column label="地址" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.address }}</span>
				</template>
			</el-table-column>
			<el-table-column label="余额" align="center">
				<template slot-scope="scope">
					<span>￥{{ scope.row.balance/100 }}</span>
				</template>
			</el-table-column>
			<el-table-column label="已完成单数" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.nowNum }}</span>
				</template>
			</el-table-column>
			<el-table-column label="性别" align="center" v-if="false">
				<template slot-scope="scope">
					<el-tag :type="scope.row.sex==0?'success':'warn'">
						<span>{{ scope.row.sex==0?'男':'女'}}</span>
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="生日" align="center" v-if="false">
				<template slot-scope="scope">
					<span>{{ scope.row.birthday }}</span>
				</template>
			</el-table-column>
			<el-table-column label="用户角色" align="center">
				<template slot-scope="scope">
					<el-tag :key="scope.row.status" type="warning" effect="dark">
						客户经理
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="用户状态" align="center">
				<template slot-scope="scope">
					<el-tag :key="scope.row.status" v-if="scope.row.status==='0'" type="success" effect="dark">
						使用中
					</el-tag>
					<el-tag :key="scope.row.status" v-if="scope.row.status==='-99'" type="danger" effect="dark">
						禁用中
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="250">
				<template slot-scope="scope">
					<!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
					<el-button type="text" size="small" @click="showUpdate(scope.row)">编辑
					</el-button>
					<el-button type="text" size="small" @click="deleteInfo(scope.row.id)">删除
					</el-button>
					<el-button type="text" size="small" @click="ShowCar(scope.row.id)">设为默认
					</el-button>
					<el-button type="text" size="small" v-if="scope.row.status==0" @click="BlacklistSubmit(scope.row.id)">拉黑用户
					</el-button>
					<el-button type="text" size="small" v-else @click="NoBlacklistSubmit(scope.row.id)">取消拉黑
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background layout="prev, pager, next" :total="total" @current-page="Pages"
			style="text-align: right;margin-top: 10px;">
		</el-pagination>
		<el-dialog title="编辑" :visible.sync="dialogVisible" width="50%">

			<el-form ref="form" :model="form" label-width="80px" :rules="rules">
				<el-form-item label="账户名" prop="username">
					<el-input v-model="form.username"></el-input>
				</el-form-item>
				<el-form-item label="身份证号" prop="ID_card" v-if="false">
					<el-input v-model="form.ID_card"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="phone">
					<el-input v-model="form.phone"></el-input>
				</el-form-item>
				<el-form-item label="地址" prop="address">
					<el-input v-model="form.address"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="form.remark"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<!-- 0男  1-女 -->
					<el-select v-model="form.sex" placeholder="请选择">
						<el-option label="男" value="0"></el-option>
						<el-option label="女" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="生日" prop="birthday">
					<el-date-picker v-model="form.birthday" type="date" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="UpdSubmit">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="车辆信息" :visible.sync="dialogVisibleCar" width="50%">

			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="date" label="ID" width="180" v-if="false">
					<template slot-scope="scope">
						{{scope.row.id}}
					</template>
				</el-table-column>
				<el-table-column prop="date" label="用户ID" width="180" v-if="false">
					<template slot-scope="scope">
						{{scope.row.id}}
					</template>
				</el-table-column>
				<el-table-column prop="date" label="车型" width="180">
					<template slot-scope="scope">
						{{scope.row.CarModel}}
					</template>
				</el-table-column>
				<el-table-column prop="Scratch" label="漆面划痕" width="180">
					<template slot-scope="scope">
						{{scope.row.Scratch}}
					</template>
				</el-table-column>
				<el-table-column prop="Corrosion" label="漆面腐蚀" width="180">
					<template slot-scope="scope">
						{{scope.row.Corrosion}}
					</template>
				</el-table-column>
				<el-table-column prop="BeDamaged" label="漆面破损" width="180">
					<template slot-scope="scope">
						{{scope.row.BeDamaged}}
					</template>
				</el-table-column>
				<el-table-column prop="FlyingPaint" label="沥青飞漆" width="180">
					<template slot-scope="scope">
						{{scope.row.FlyingPaint}}
					</template>
				</el-table-column>
				<el-table-column prop="CarDefault" label="默认车辆" width="180">
					<template slot-scope="scope">
						<el-tag :type="scope.row.CarDefault==true?'success':'warn'">
							{{scope.row.CarDefault==true?'默认车辆':'非默认车辆'}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="AddTime" label="添加时间" width="180">
					<template slot-scope="scope">
						{{scope.row.AddTime}}
					</template>
				</el-table-column>
				<el-table-column prop="UpdateTime" label="修改时间" width="180">
					<template slot-scope="scope">
						{{scope.row.UpdateTime}}
					</template>
				</el-table-column>
				<el-table-column prop="UpdateTime" label="设为默认" width="180">
					<template slot-scope="scope">
						<el-button type="success" @click="SetDefault(scope.row)">设为默认</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background layout="prev, pager, next" :total="CarModel.TotalCount" @current-page="PagesCar"
				style="text-align: right;margin-top: 10px;">
			</el-pagination>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleCar = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisibleCar = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import {
		GetUserListBytManager,
		DeleteUser,
		Save,
		Blacklist,
		NoBlacklist
	} from '@/api/user'
	import {
		GetVehicleListByUser,
		UpdateCarDefault,
	} from '../../api/VehicleManagement.js'
	import utils from '../../utils/utils.js'
	export default {
		data() {
			return {
				tableData: [],
				dialogVisible: false,
				dialogVisibleCar: false,
				CarModel: {
					"UserId": 0,
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 10,
					"Sort": [{
						"Field": "id",
						"Type": 0
					}]
				},
				// 默认
				CarDefaultModel: {
					"id": 0,
					"UserId": 0
				},
				rules: {
					username: [{
						required: true,
						message: '请输入账户名',
						trigger: 'blur'
					}],
					// ID_card: [{
					// 	required: true,
					// 	message: '请输入身份证号码',
					// 	trigger: 'blur'
					// }, {
					// 	min: 6,
					// 	max: 30,
					// 	message: '长度在 6 到 30 个字符'
					// }, {
					// 	pattern: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
					// 	message: '请输入正确的身份证号码'
					// }],
					phone: [{
						required: true,
						message: '请输入电话号码',
						trigger: 'blur'
					}, {
						pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
						message: '请输入正确的手机号格式'
					}],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: 'blur'
					}],
					sex: [{
						required: true,
						message: '请选择年龄',
						trigger: 'blur'
					}],
					birthday: [{
						required: true,
						message: '请选择生日',
						trigger: 'blur'
					}],

				},
				userlist: [],
				listLoading: true,
				parameter: {
					pageIndex: 1,
					pageSize: 10,
					sort: "id",
					sortOrder: 2,
					keyword: "",
					status: 1
				},
				total: 0,
				form: {
					"ParentUserId": 0,
					"InviteeUserId": 0,
					"beijintupian": "",
					"birthday": "",
					"ID_card": "",
					"address": "",
					"id": 0,
					"username": "",
					"password": "",
					"author": "",
					"status": "",
					"type": 0,
					"full_name": "",
					"add_time": "2022-01-20T13:27:24.548Z",
					"update_time": "2022-01-20T13:27:24.548Z",
					"remark": "",
					"avatar": "",
					"phone": "",
					"openid": "",
					"sex": "",
					"balance": 0
				}
			}
		},

		created() {},
		mounted() {
			this.GetUserListBytManagerHeadler();
		},
		methods: {
			// 拉黑用户
			BlacklistSubmit(id){
				Blacklist(id).then(res=>{
				console.log('数据',res)
				if(res.data.code==200){
					this.$message.success('拉黑成功')
					this.GetUserListBytManagerHeadler()
				}else{
					this.$message.error('拉黑失败')
				}
				})
			},
			NoBlacklistSubmit(id){
				NoBlacklist(id).then(res=>{
					if(res.data.code==200){
						this.$message.success('取消拉黑成功')
						this.GetUserListBytManagerHeadler()
					}else{
						this.$message.error('取消拉黑失败')
					}
				})
			},
			// 修改信息
			showUpdate(item) {
				this.dialogVisible = true
				this.form.birthday = item.birthday
				this.form.ID_card = item.ID_card
				this.form.address = item.address
				this.form.id = item.id
				this.form.username = item.username
				this.form.add_time = item.add_time
				this.form.update_time = item.update_time
				this.form.remark = item.remark
				this.form.phone = item.phone
				this.form.sex = item.sex
				// -------------------
				this.form.InviteeUserId = item.InviteeUserId
				this.form.ParentUserId = item.ParentUserId
				this.form.beijintupian = item.beijintupian
				this.form.password = item.password
				this.form.author = item.author
				this.form.status = item.status
				this.form.type = item.type
				this.form.full_name = item.full_name
				this.form.avatar = item.avatar
				this.form.openid = item.openid
				this.form.balance = item.balance
			},
			// 设为默认车辆
			SetDefault(item) {
				console.log('数据', item)
				if (item.CarDefault == true) {
					this.$message.error('该车辆已是默认车辆')
				} else {
					this.CarDefaultModel.id = item.id
					this.CarDefaultModel.UserId = this.CarModel.UserId
					UpdateCarDefault(this.CarDefaultModel).then(res => {
						console.log('默认', res)
						if (res.data.code == 200) {
							this.$message.success('修改默认车辆成功')
							this.ShowCar()
						} else {
							this.$message.error(res.data.message)
						}
					})
				}
			},
			PagesCar(e) {
				this.CarModel.PageIndex = e
				this.ShowCar()
			},
			// 查询车辆信息
			ShowCar(id) {
				console.log('车辆ID', id)
				this.CarModel.UserId = id
				this.dialogVisibleCar = true
				GetVehicleListByUser(this.CarModel).then(res => {
					console.log('车辆信息', res)
					if (res.data.code == 200) {
						res.data.data.rows.forEach((item, index) => {
							item.add_time = utils.formatTime(item.add_time, "yyyy-MM-dd HH:mm:ss")
							item.UpdateTime = utils.formatTime(item.UpdateTime, "yyyy-MM-dd HH:mm:ss")
						})
						this.tableData = res.data.data.rows
						this.CarModel.TotalCount = res.data.data.total
					}
				})
			},
			UpdSubmit() {
				// 信息修改提交
				this.$refs.form.validate((valid) => {
					if (valid) {
						Save(this.form).then(res => {
							console.log('提交', res)
							if (res.data.code == 200) {
								this.$message.success('修改成功')
								this.dialogVisible = false
								this.GetUserListBytManagerHeadler()
							} else {
								this.$message.error('修改失败')
							}
						})
					}
				})
			},
			Pages(e) {
				this.parameter.pageIndex = e
				this.GetUserListBytManagerHeadler()
			},
			onSubmit() {
				this.GetUserListBytManagerHeadler()
			},
			deleteInfo(id) {
				DeleteUser({
					ids: id
				}).then(res => {
					console.log('res', res)
					if (res.data.code == 200) {
						this.$message.success('删除成功')
						this.GetUserListBytManagerHeadler()
					} else {
						this.$message.error('删除失败')
					}
				})
			},
			GetUserListBytManagerHeadler() {
				GetUserListBytManager(this.parameter).then(res => {
					this.total = res.data.data.total
					res.data.data.rows.forEach((item, index) => {
						item.birthday = utils.formatTime(item.birthday, "yyyy-MM-dd")
					})
					this.userlist = res.data.data.rows;
					this.listLoading = false;
				});
			}
		}
	}
</script>

<style>
</style>
