<template>
	<div>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="信用分明细" name="first">
				<div style="margin:6px 0;">
					<span style="color: red;font-size: 12px;">{{remarks}}</span>
				</div>
				<div style="margin:6px 0;display: inline-block;">
					<span>用户昵称：</span>
					<el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入用户昵称"
						v-model="userName"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
				</div>
				<div style="margin:6px 0;display: inline-block;">
					<span>手机号：</span>
					<el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入手机号"
						v-model="phone"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
				</div>
				<div style="display: inline-block;">
					<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询
					</el-button>
					<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置
					</el-button>
					<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="refresh">刷新
					</el-button>
				</div>
				<el-table v-loading="tableDataLoading" :data="tableData.list">
					<el-table-column prop="userId" label="编号" width="80">
					</el-table-column>
					<el-table-column prop="artificerName" label="技师昵称" width="150">
						<template slot-scope="scope">
							<span>{{scope.row.artificerName ? scope.row.artificerName : '未绑定'}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="artificerImg" label="头像">
						<template slot-scope="scope">
							<img :src="scope.row.artificerImg" alt="" width="60" height="60">
						</template>
					</el-table-column>
					<el-table-column prop="phone" label="手机号">
					</el-table-column>
					<el-table-column prop="creditScore" label="信用分">
						<template slot-scope="scope">
							<span>{{ scope.row.creditScore }}</span>
							<el-button
								size="mini"
								style="color: #4f9dec; background: #fff; border: none"
								@click="xiugaiScore(scope.row)"
							>修改</el-button>
						</template>
					</el-table-column>
					<el-table-column label="操作" prop="id" width="300" fixed="right">
						<template slot-scope="scope">
							<el-button
								size="mini"
								type="primary"
								style="margin: 5px"
								@click="xinyongBtn(scope.row)"
							>信用分明细
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="text-align: center;margin-top: 10px;">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:page-sizes="[10, 20, 30, 50, 100]" :page-size="size" :current-page="page"
						layout="total,sizes, prev, pager, next" :total="tableData.totalCount">
					</el-pagination>
				</div>
			</el-tab-pane>
		</el-tabs>
		<!-- 信用分明细 -->
		<el-dialog title="信用分明细" :visible.sync="dialogFormVisibleXyf" center>
			<el-table v-loading="tableDataLoadingXyf" :data="tableDataXyf.list">
				<el-table-column prop="id" label="编号" width="80"> </el-table-column>
				<el-table-column prop="title" label="标题" width="450">
				</el-table-column>
				<el-table-column prop="content" label="内容"> </el-table-column>
			</el-table>
			<div style="text-align: center; margin-top: 10px">
				<el-pagination
					@size-change="handleSizeChangeXyf"
					@current-change="handleCurrentChangeXyf"
					:page-sizes="[10, 20, 30, 40]"
					:page-size="size1"
					:current-page="page1"
					layout="total,sizes, prev, pager, next,jumper"
					:total="tableDataXyf.totalCount"
				>
				</el-pagination>
			</div>
		</el-dialog>
		<!-- 修改信用分 -->
		<el-dialog title="调整信用分" :visible.sync="scoreVisible" center>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">操作：</span>
				<el-radio-group v-model="operation">
					<el-radio :label="1">增加</el-radio>
					<el-radio :label="2">减少</el-radio>
				</el-radio-group>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">信用分：</span>
				<el-input
					style="width: 50%"
					v-model="creditScore"
					type="number"
					:min="0"
					:controls="false"
					placeholder="请输入要调整的信用分"
				></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="scoreVisible = false">取 消</el-button>
				<el-button type="primary" @click="modifyCreditScore()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				size: 10,
				page: 1,
				scoreType: 1,
				formLabelWidth: '200px',
				tableDataLoading: false,
				dialogFormVisible: false,
				tableData: [],
				content: '',
				title: '',
				userName: '',
				phone: '',
				activeName: 'first',
				creditScore: '',
				artificerId: '',
				dialogFormVisibleXyf: false,
				tableDataLoadingXyf: false,
				tableDataXyf: {},
				size1: 10,
				page1: 1,
				operation:"1",
				scoreVisible: false,
				remarks: '',
			}
		},
		methods: {
			// 返回上一级
			prev() {
				this.$router.back()
			},
			handleSizeChange(val) {
				this.size = val;
				this.dataSelect()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.dataSelect()
			},

			// tabs切换
			handleClick(tab, event) {
				this.phone = ''
				this.page = 1
				this.userName = ''
				if (tab._props.label == '评价列表') {
					this.dataSelect()
				}
			},
			// 刷新
			refresh() {
				this.dataSelect()
			},
			//搜索
			select() {
				this.page = 1
				this.dataSelect()
			},
			// 重置
			cleans() {
				this.title = ''
				this.userName = ''
				this.phone = ''
				this.content = ''
				this.page = 1
				this.dataSelect()
			},
			// 获取评价列表数据
			dataSelect() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('message/selectArtificerList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.size,
						'artificerName': this.userName,
						'phone': this.phone
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data.data;
					this.tableData = returnData;
					this.remarks = data.data.remarks;
				})
			},
			// 信用分明细弹框
			xinyongBtn(row) {
				this.artificerId = row.userId;
				this.xinyongSelect(this.artificerId);
				this.dialogFormVisibleXyf = true;
			},
			// 信用分明细数据
			xinyongSelect(artificerId) {
				this.tableDataLoadingXyf = true;
				this.$http({
					url: this.$http.adornUrl("message/selectMessageByUserId"),
					method: "get",
					params: this.$http.adornParams({
						userId: artificerId,
						page: this.page1,
						limit: this.size1,
						state: 8,
					}),
				}).then(({ data }) => {
					if (data.code == 0) {
						this.tableDataLoadingXyf = false;
						let returnData = data.data;
						this.tableDataXyf = returnData;
					} else {
						this.$notify({
							title: "提示",
							duration: 1800,
							message: data.msg,
							type: "warning",
						});
					}
				});
			},
			handleSizeChangeXyf(val) {
				this.size1 = val;
				this.xinyongSelect(this.artificerId);
			},
			handleCurrentChangeXyf(val) {
				this.page1 = val;
				this.xinyongSelect(this.artificerId);
			},
			//修改技师信用分
			xiugaiScore(row) {
				this.creditScore = 0;
				this.operation = 1;
				this.artificerId = row.artificerId;
				this.scoreVisible = true;
			},
			//修改信用分
			modifyCreditScore() {
				this.$http({
					url: this.$http.adornUrl("artificer/updateArtificerCreditScore"),
					method: "post",
					params: this.$http.adornParams({
						artificerId: this.artificerId,
						creditScore: this.creditScore,
						type: this.operation,
					}),
				}).then(({ data }) => {
					console.log("data", data);
					if (data.code == 0) {
						this.$message({
							message: "修改成功",
							type: "success",
							duration: 1500,
							onClose: () => {
								this.scoreVisible = false;
								this.refresh();
							},
						});
					} else {
						this.$message({
							message: data.msg,
							type: "warning",
							duration: 1500,
							onClose: () => {},
						});
					}
				});
			},
		},
		activated() {
			this.dataSelect()
		}
	};
</script>

<style>
</style>
