<template>
	<!-- 用户配置 -->
	<div class="pageBody">
		<el-row>
			<el-col :span="24">
				<el-table :data="listData" border style="width: 100%" v-loading="loading">
					<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
					<el-table-column prop="pwdType" label="口令类型" >
						<template slot-scope="scope">
							{{scope.row.pwdType === 0 ? '农业大数据大屏口令' : '人员监控大屏口令'}}
						</template>
					</el-table-column> 
					<el-table-column prop="pwd" label="口令"></el-table-column> 
					<el-table-column prop="typeIdName" label="状态" >
						<template slot-scope="scope">
							<el-switch
							  v-model="scope.row.state"
							  active-value="0"
							  inactive-value="1"
							  active-color="#13ce66"
							  @change="stateSwitch($event, scope.row)"
							  inactive-color="#ff4949">
							</el-switch>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作"  width="220" align="center">
						<template slot-scope="scope">
							<el-button type="primary" size="mini" @click="updatePasswd(scope.row)">更改口令</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<div class="page-right">
			<Pagination :total="listTotal" @change="paginationChange"></Pagination>
		</div>
	</div>
</template>

<script>
import Pagination from '@/components/Pagination'
import aevMobiel from './modal/aevMobiel'
import { paginationConfig } from '@/api/CONST'
export default {
	name: 'pw-manage',
	components:{
		Pagination,
	},
	created(){
		let params = Object.assign({},this.pagination)
		console.log(params)
		this.getList(params)	
	},
	mounted(){
		
	},
	data() {
		return {
			loading:true,
			pagination:Object.assign({},paginationConfig),
			listTotal:0,
			listData:[],
		};
	},
	methods: {
		stateSwitch(value,row){
			let params = {
				id:row.id,
				pwd:row.pwd,
				state:value,
			}
			this.$port.upPwdInfo(params)
				.then(res =>{
					if(!res.code){
						if(value == 1){
							this.$message({
							  message: '启用成功！',
							  type: 'success',
							  duration:800
							});
						}else{
							this.$message({
							  message: '已关闭！',
							  type: 'success',
							  duration:800
							});
						}
					}else{
						row.state = value === 1 ? 0 : 1
						this.$message.error('启用失败！');
					}
				})
		},
		updatePasswd(data){
			this.$prompt('请输入新的口令密码', '更改口令', {
			    confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern:/\S/,
				inputErrorMessage: '口令格式不能为空'
			}).then(({ value }) => {
				let params = Object.assign({},data)
				params.pwd = value
				this.$port.upPwdInfo(params).then(res => {
					if(!res.code){
						this.$message({
							type: 'success',
							message: '操作成功!'
						}); 
						this.getList()
					}
				})
			}).catch(() => {
			         
			});
		},
		getList(params){
			this.loading = true
			this.$port.getPwdList(params)
				.then(res =>{
					this.loading = false
					this.listData = res.list || []
					this.listTotal = res.total
				})
		},
		paginationChange(json){
			let params = Object.assign({},this.searchParams,json)
			this.getList(params)
		}
	},
	computed: {
		//当前页权限
		auth() {
			const activePage = this.$route.path;
			return (
				this.$store.state.userTree
					.filter(x => {
						return x.url == activePage;
					})
					.map(x => {
						return x.auth;
					})[0] || []
			);
		}
	}
};
</script>

<style lang="less" scoped>
.fr{
	float:right;
}
.userTitle{
	margin-top:8px;
}
.el-form-item {
	margin-bottom: 0;
}
.tableHead{
	vertical-align:middle;
	.el-button{
		margin-left:15px;
	}
}
.page-right{
	margin-top:15px;
	float:right;
}
.input-box {
   display: none
}
.current-cell .input-box {
   display: block;
   margin-left: -15px;
}
</style>
