<template>
	<div>
		<div style="margin:2% 0;display: inline-block;">
			<span>是否满意：</span>
			<el-select v-model="campus" style="width:150px;margin-left: 10px;" @change="select(campus)">
				<el-option v-for="item in homeData1" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>&nbsp;&nbsp;&nbsp;
		</div>
		<div style="position: relative;display: inline-block;">
			<span>评价用户：</span>
			<el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入评价用户" v-model="nickName">
			</el-input>&nbsp;&nbsp;
		</div>
		<div style="position: relative;display: inline-block;">
			<span>骑手昵称：</span>
			<el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入骑手昵称" v-model="riderName">
			</el-input>&nbsp;&nbsp;
		</div>
		<div style="position: relative;display: inline-block;">
			<span>订单号：</span>
			<el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入订单号" v-model="indentNumber">
			</el-input>&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>
		</div>
			<el-table v-loading="tableDataLoading" :data="tableData.records">
				<el-table-column prop="evaluateId" label="编号" width="80">
				</el-table-column>
				
				<el-table-column prop="indentNumber" label="评价订单号" width="200">
				</el-table-column>
				<el-table-column prop="indent" label="评价用户" width="150">
					<template slot-scope="scope">
						<span v-if="scope.row.user&&scope.row.user.nickName" style="color: #4f9dec;cursor: pointer;" @click="updataDetails(scope.row.userId)">
							{{ scope.row.user.nickName ? scope.row.user.nickName : '未绑定' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="indent" label="骑手昵称" width="150">
					<template slot-scope="scope">
						<span v-if="scope.row.riderUser&&scope.row.riderUser.nickName" style="color: #4f9dec;cursor: pointer;" @click="updataDetails(scope.row.riderUserId)">
							{{ scope.row.riderUser.nickName ? scope.row.riderUser.nickName : '未绑定' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="evaluateMessage" label="评价内容">
				</el-table-column>
				<el-table-column prop="satisfactionFlag" label="是否满意" width="160">
					<template slot-scope="scope">
						<span v-if="scope.row.satisfactionFlag == '0'">满意</span>
						<span v-if="scope.row.satisfactionFlag == '1'">不满意</span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="评价时间" width="160">
				</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, 40]" :page-size="limit" :current-page="page"
					layout="total,sizes, prev, pager, next,jumper" :total="tableData.total">
				</el-pagination>
			</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				limit: 10,
				page: 1,
				state: 2,
				userEmail: '',
				url: '',
				title: '',
				type: '',
				id: '',
				types: [{
						value: 'word',
						label: '文字'
					},
					{
						value: 'url',
						label: '链接'
					}
				],
				form: {
					id: '',
					title: '',
					url: '',
					type: '',
					state: '',
					types: [{
							value: 'word',
							label: '文字'
						},
						{
							value: 'url',
							label: '链接'
						}
					],
				},
				phone: '',
				content: '',
				flag: '',
				flags: [{
						value: 1,
						label: '单个用户'
					},
					{
						value: 2,
						label: '全部用户'
					}
				],
				formLabelWidth: '200px',
				activeName: 'first',
				tableDataLoading: false,
				dialogFormVisible1: false,
				dialogFormVisible2: false,
				dialogFormVisible: false,
				tableData: {},
				campus: null,
				homeData1: [{
						value: null,
						label: '全部'
					},{
						value: 0,
						label: '满意'
					},
					{
						value: 1,
						label: '不满意'
					}
				],
				indentNumber:'',
				nickName:'',
				riderName:'',
			}
		},
		methods: {
			// 详情跳转
			updataDetails(userId) {
				this.$router.push({
					path: '/userDetail',
					query: {
						userId: userId
					}
				});
			},
			handleSizeChange(val) {
				this.limit = val;
				this.dataSelect()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.dataSelect()
			},
			handleClick(tab, event) {
				if (tab._props.label == '反馈列表') {
					this.page = 1
					this.limit = 10
					this.state = 2
					this.dataSelect()
				}
			},
			
			// 获取数据列表
			dataSelect() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('adminevaluate/selectEvaluate'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						'satisfactionFlag': this.campus,
						'indentNumber': this.indentNumber,
						'nickName': this.nickName,
						'riderName': this.riderName,
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.tableData = returnData

				})
			},
			select() {
				this.page = 1
				this.dataSelect()
			},
			// 重置
			cleans() {
				this.page = 1
				this.campus = null
				this.indentNumber = ''
				this.nickName = ''
				this.riderName = ''
				this.dataSelect()
			},
		},
		mounted() {
			this.dataSelect()
		}
	};
</script>

<style>

</style>
