<template>
	<div>
		<div style="display: inline-block;">
			<div style="position: relative;display: inline-block;">
				<span>城市：</span>
				<el-input style="width: 200px;" @keydown.enter.native="phoneSelect" placeholder="请输入城市"
					v-model="artificerName">
				</el-input>&nbsp;&nbsp;
			</div>
			<el-button style="margin:10px;" size="mini" type="primary" icon="document" @click="phoneSelect">查询
			</el-button>
			<el-button style="margin:10px;" size="mini" type="primary" icon="document" @click="cleans2">重置
			</el-button>&nbsp;&nbsp;
		</div>
		<el-table v-loading="tableDataLoading" :data="choicenData.list">
			<el-table-column prop="artificerId" label="编号" width="80">
				<template slot-scope="scope">
					<span>{{scope.$index+1}}</span>
				</template>
			</el-table-column>
			
			<el-table-column prop="content" label="城市">
			</el-table-column>
			<el-table-column prop="counts" label="数量">
			</el-table-column>
			
			<el-table-column label="操作" prop="id" width="100">
				<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;float:right">
			<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
				:page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
				layout="total,sizes, prev, pager, next,jumper" :total="choicenData.totalCount">
			</el-pagination>
		</div>

		<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="userName" label="用户昵称">
					<template slot-scope="scope">
						<span style="color: #4f9dec;cursor: pointer;"
							@click="updatesvideo(scope.row)">{{scope.row.userName ? scope.row.userName : '未绑定'}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="content" label="投票城市">
				</el-table-column>
				<el-table-column prop="createAt" 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>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				size1: 10,
				page1: 1,
				limit: 10,
				tableDataLoading: true,
				
				choicenData: [],
				
				artificerName: '',
				


				

				artificerId:'',
				dialogFormVisibleXyf: false,
				tableDataLoadingXyf: false,
				tableDataXyf: {},

			}
		},
		methods: {


			handleSizeChange1(val) {
				this.limit = val
				this.InformationSelect()
			},
			handleCurrentChange1(val) {
				this.page = val
				this.InformationSelect()
			},



			handleSizeChangeXyf(val) {
				this.size1 = val
				this.xinyongSelect(this.artificerId)
			},
			handleCurrentChangeXyf(val) {
				this.page1 = val
				this.xinyongSelect(this.artificerId)
			},
			


			// 查询
			phoneSelect() {
				this.page = 1
				this.InformationSelect()
			},
			// 重置
			cleans2() {
				this.artificerName = ''
				this.page = 1
				this.InformationSelect()
			},

			// 信息数据
			InformationSelect() {
				this.$http({
					url: this.$http.adornUrl('message/selectCityList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						'content': this.artificerName,
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data
					this.choicenData = returnData


				})
			},

			// 详情跳转
			updatesvideo(row) {
				this.$router.push({
					path: '/userDetail',
					query: {
						userId: row.userId
					}
				})
			},


			// 信用分明细弹框
			xinyongBtn(row) {
				this.artificerId = row.content
				this.xinyongSelect(this.artificerId)
				this.dialogFormVisibleXyf = true

			},
			// 信用分明细数据
			xinyongSelect(artificerId) {
				this.tableDataLoadingXyf = true
				this.$http({
					url: this.$http.adornUrl('message/selectCityDetailsList'),
					method: 'get',
					params: this.$http.adornParams({
						'content': artificerId,
						'page': this.page1,
						'limit': this.size1
					})
				}).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'
						});
					}
				})
			},
		},
		mounted() {
			this.InformationSelect()
		}
	}
</script>

<style>
	.customWidth {
		width: 80% !important;
	}

	.adver_main.box {
		display: block;
		max-width: 100%;
		text-align: center;
		border: 1px dotted rgba(67, 79, 103, .4);
	}

	.cards {
		padding: 0 8px;
		margin-bottom: 15px;
	}

	.adver_main.box a {
		display: flex;
		justify-content: center;
		height: 150px;
		line-height: 150px;
		text-decoration: none
	}

	.bannerManin {
		border: 1px solid #e8e8e8;
		font-size: 14px;
		padding: 0 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 113px;
		color: rgba(0, 0, 0, .65);
	}

	.bannerManin span {
		display: inline-block;
		margin-left: 5px;
	}

	.bannerManin img {
		width: 48px;
		height: 48px;
		border-radius: 50%;
	}

	.bannerbtn {
		display: flex;
		border-top: none !important;
		border: 1px solid #e8e8e8;
		padding: 11px;
		font-size: 14px;
		color: #3E8EF7;
	}

	.bannerbtn a {
		flex: 1;
		text-align: center;
		color: #3E8EF7 !important;
		text-decoration: none;
	}

	.imgs {
		position: relative;
		border-radius: 6px;
		width: 148px;
		height: 148px;
		margin-right: 10px;
		display: inline-block;
	}

	.dels {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}

	.dels .el-icon-delete {
		line-height: 148px;
		padding-left: 58px;
		font-size: 25px;
		color: #fff;
	}

	.imgs:hover .dels {
		width: 100%;
		height: 100%;
		background: #000;
		display: block;
		opacity: 0.5;
	}

	.bqList {
		padding: 4px 14px;
		margin: 4px;
		border: 1px solid #efefef;
		font-size: 12px;
		color: #999;
		border-radius: 4px;
		margin-right: 15px;
	}

	.delss {
		display: none;
		position: relative;
	}

	.delss .el-icon-delete {
		position: absolute;
		top: 0;
	}

	.bqList:hover .delss {
		display: initial;
		opacity: 0.5;

	}

	.tj {
		padding: 6px !important;
		margin: 4px;
		font-size: 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
</style>
