<template>
	<div class="zy-template">
		<div class="zy-main-title">权限申请记录</div>
		<div class="zy-module">
			<el-form :model="query" label-width="80px">
				<el-form-item label="关键字" class="zy-search-form-item">
					<el-input v-model="query.key" size="mini" placeholder="手机号/申请信息" clearable></el-input>
				</el-form-item>
				<el-form-item label="审核状态" class="zy-search-form-item">
					<el-select v-model="query.status" size="mini" clearable placeholder="不选默认全部">
						<el-option label="拒绝" value="-1" />
						<el-option label="待审核" value="0" />
						<el-option label="通过" value="1" />
					</el-select>
				</el-form-item>
				<el-button type="primary" size="mini" @click="submit">查询</el-button>
			</el-form>
		</div>

		<div class="zy-module">
			<el-table :data="page.records" max-height="800" stripe size="small"
				header-cell-class-name="zy-table-header-cell" cell-class-name='zy-table-cell'>
				<el-table-column prop="name" label="申请人" width="120" min-width="5%" />
				<el-table-column prop="phone" label="手机号" width="150" min-width="5%" />
				<el-table-column label="申请内容" min-width="30%">
					<template #default="scope">
						<div style="height: 24px; overflow: hidden;">
							{{scope.row.remark}}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="申请时间" width="180" min-width="5%" />
				<el-table-column label="审核状态" width="100" min-width="5%">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.status==1">通过</el-tag>
						<el-tag type="warning" v-if="scope.row.status==0">待审核</el-tag>
						<el-tag type="danger" v-if="scope.row.status==-1">拒绝</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="auditTime" label="审核时间" width="180" min-width="5%" />
				<el-table-column label="操作" width="150" min-width="10%">
					<template #default="scope">
						<el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>

						<el-button @click="handlePass(scope.row.id)" type="text" size="small" style="color: #67c23a"
							v-if="scope.row.status==0">通过</el-button>

						<el-button @click="handleRefuse(scope.row.id)" type="text" size="small" style="color: #f56c6c;"
							v-if="scope.row.status==0">拒绝</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination class="zy-table-pagination" background layout="prev, pager, next"
				:current-page="page.current" :total="page.total" :page-size="page.size" @current-change="pagination" />
		</div>

		<el-dialog title="申请信息" v-model="detailDialog" width="500px">
			<el-descriptions :column="1" border size="small">
				<el-descriptions-item label="申请人:">{{detailInfo.name}}</el-descriptions-item>
				<el-descriptions-item label="手机号:">{{detailInfo.phone}}</el-descriptions-item>
				<el-descriptions-item label="申请时间:">{{detailInfo.createTime}}</el-descriptions-item>
				<el-descriptions-item label="申请内容:">{{detailInfo.remark}}</el-descriptions-item>
				<el-descriptions-item label="审核时间:" v-if="detailInfo.status!=0">{{detailInfo.auditTime}}
				</el-descriptions-item>
				<el-descriptions-item label="拒绝原因:" v-if="detailInfo.status==-1">{{detailInfo.refuseReason}}
				</el-descriptions-item>
			</el-descriptions>
		</el-dialog>

		<el-dialog title="拒绝申请" v-model="refuseDialog" width="500px">
			<el-form :model="refuseForm" label-width="100px">
				<el-form-item label="原因:">
					<el-input type="textarea" v-model="refuseForm.refuseReason"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="refuseDialog = false">取 消</el-button>
					<el-button type="danger" @click="refuseSubmit">拒 绝</el-button>
				</span>
			</template>
		</el-dialog>

		<el-dialog title="通过申请" v-model="passDialog" width="500px">
			<el-form label-width="100px">
				<el-form-item label="配置组:">
					<el-tree :data="privList" show-checkbox node-key="id" ref="tree" highlight-current
						:props="defaultProps" accordion>
					</el-tree>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="passVisible = false">取 消</el-button>
					<el-button type="success" @click="passSubmit">通 过</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					key: null,
					status: null
				},
				page: {
					current: 1,
					size: 10,
				},
				detailDialog: false, //详情弹出框
				refuseDialog: false, //拒绝申请弹出框
				passDialog: false, //通过申请弹出框
				detailInfo: null, //申请详情
				selPassId: null, //选中的通过表单的ID
				privList: null, //权限列表
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				refuseForm: { //拒绝申请表单
					refuseReason: ''
				},
			};
		},
		mounted: function() {
			this.getListPage(this.page);
		},
		methods: {
			/**
			 * 提交查询条件
			 */
			submit: function() {
				const params = {
					key: this.query.key,
					status: this.query.status
				};
				this.getListPage(params);
			},

			/**
			 * 分页点击事件
			 */
			pagination: function(current) {
				const params = {
					key: this.query.key,
					status: this.query.status,
					current: current,
					size: this.page.size,
				};
				this.getListPage(params);
			},
			/**
			 * 获取设备列表
			 */
			getListPage: function(params) {
				this.$http.Get(this.$global.privilegeApply.listPage, params).then(res => {
					console.log(res.data);
					this.page = res.data;
				})
			},
			/**
			 * 申请详情
			 */
			handleDetail: function(obj) {
				this.detailDialog = true;
				this.detailInfo = obj;
			},
			/**
			 * 拒绝申请
			 */
			handleRefuse: function(id) {
				this.refuseDialog = true;
				this.refuseForm.id = id;
			},
			/**
			 * 提交拒绝申请表单
			 */
			refuseSubmit: function() {
				const param = {
					id: this.refuseForm.id,
					refuseReason: this.refuseForm.refuseReason,
					status: -1
				}
				this.$http.Post(this.$global.privilegeApply.audit, param).then(res => {
					this.$message.success("提交成功!");
					this.refresh();
					this.refuseDialog = false;
				})
			},
			/**
			 * 通过申请
			 */
			handlePass: function(id) {
				this.passDialog = true;
				this.selPassId = id;
				this.getPrivList();
			},
			/**
			 * 提交通过申请表单
			 */
			passSubmit: function() {
				const arr = this.$refs.tree.getCheckedKeys(true);
				if (arr == null || arr.length <= 0) {
					this.$message.error("至少配置一个组!");
					return;
				}
				let groups = "";
				arr.forEach(item => {
					groups += (item + ",")
				})
				groups = groups.substr(0, groups.length - 1)
				const params = {
					id: this.selPassId,
					groups: groups,
					status: 1
				}
				console.log(params);
				this.$http.Post(this.$global.privilegeApply.audit, params).then(res => {
					this.$message.success("审核成功!");
					this.refresh();
					this.passDialog = false;
				})
			},

			/**
			 * 刷新列表
			 */
			refresh: function() {
				const params = {
					key: this.query.key,
					status: this.query.status,
					current: this.page.current,
					size: this.page.size,
				}
				this.getListPage(params);
			},
			/**
			 * 获取权限列表
			 */
			getPrivList: function() {
				this.$http.Get(this.$global.privilegeApply.getNoPrivGroups, {}).then(res => {
					const arr = [];
					for (let key in res.data) {
						arr.push({
							name: key,
							children: res.data[key]
						})
					}
					this.privList = arr;
				})
			}
		}
	};
</script>

<style lang="scss" scoped>

</style>
