<template>
	<div class="app-container">
		<el-row>
			<el-col :span="24">
				<div class="cell">
					<div class="cell-title">
						<div class="title-left">
							<div class="title">流程管理/我的代办</div>
						</div>
					</div>
					<div class="cell-body">
						<el-table ref="multipleTable" :data="tableData" height="620" style="width: 100%" :cell-style="cell_style" v-loading="loading"
							:header-cell-style="header_cell_style">
							<el-table-column fixed="left" type="index" label="序号" align="center" width="80">
							</el-table-column>
							<el-table-column fixed="left" label="流程" align="center">
								<template slot-scope="scope">
									<span v-if="scope.row.type == 1" style="color: rgba(9, 101, 98, 1);">民宿信息维护</span>
									<span v-else-if="scope.row.type == 2" style="color: rgba(9, 101, 98, 1);">评价</span>
									<span v-else-if="scope.row.type == 3" style="color: rgba(9, 101, 98, 1);">推文</span>
								</template>
							</el-table-column>
							<el-table-column label="发起人" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.createName }}</span>
								</template>
							</el-table-column>
							<el-table-column label="发起时间" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.createDate }}</span>
								</template>
							</el-table-column>
							<el-table-column fixed="right" label="操作" align="center" width="180">
								<template slot-scope="scope">
									<el-button @click="handleClickZhuban(scope.$index, scope.row)" type="text" size="small">主办</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination-table">
							<el-pagination @current-change="currentPageChange" :current-page.sync="pagination.currentPage" :page-size="pagination.pageSize"
								layout="prev, pager, next, jumper" :total="pagination.total">
							</el-pagination>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 我的代办/主办 -->
		<el-dialog title="民宿信息维护/主办" custom-class="class-daiban" :visible.sync="dialogInfoMinsuVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="dialogInfoMinsuVisible = false">
			<div style="display: flex; align-items: flex-start;">
				<div style="color: #999; font-weight: bold; width: 80px; text-align: right;">民宿图片</div>
				<div style="margin: 0 10px; width: 230px;">
					<div style="color: #000; margin: 0 0 10px 0; text-align: center;">封面图：</div>
					<div style="border-radius: 5px; width: 240px;  height: 180px; display: flex; justify-content: center; align-items: center;">
						<viewer :images="approved_reject_Data.coverImg">
							<img :src="approved_reject_Data.coverImg" style="border-radius: 5px; max-width: 100%; max-height: 100%; cursor: pointer;" alt="">
						</viewer>
					</div>
				</div>
				<div style="margin: 0 10px; width: 500px;">
					<div style="color: #000; margin: 0 0 10px 0; text-align: center; ">详情图：</div>
					<el-carousel :interval="3000" height="180px" width="500px" style="border-radius: 5px;">
						<viewer :images="approved_reject_Data.fileInfoList">
							<el-carousel-item v-for="item in approved_reject_Data.fileInfoList" :key="item.id">
								<img :src="item.url" width="500" style="border-radius: 5px; cursor: pointer;">
							</el-carousel-item>
						</viewer>
					</el-carousel>
				</div>
			</div>
			<div style="display: flex; margin-top: 20px;">
				<div style="color: #999; font-weight: bold; width: 80px; text-align: right; margin-right: 10px;">简介</div>
				<el-input type="textarea" placeholder="暂无内容" rows="8" style="width: 740px;" v-model="approved_reject_Data.remark" maxlength="500"
					show-word-limit>
				</el-input>
			</div>
			<p style="display: flex; justify-content: center;">
				<el-button type="danger" @click="handlerReject">驳 回</el-button>
				<el-button type="primary" class="confirm-btn" @click="handlerPass">通 过</el-button>
			</p>
		</el-dialog>
		<!-- 评价 -->
		<el-dialog title="评价/主办" custom-class="class-pingjia" :visible.sync="dialogevaluateVisible" :close-on-click-modal="false" :close-on-press-escape="false"
			@close="dialogevaluateVisible = false">
			<div style="display: flex; margin-bottom: 20px;">
				<div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">评价描述：</div>
				<div style="width: calc(100% - 100px); height: 180px;">{{ approved_reject_Data.remark }}</div>
			</div>
			<div style="display: flex;">
				<div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">视频/图片：</div>
				<div v-if="approved_reject_Data.fileInfoList.length > 0">
					<viewer :images="approved_reject_Data.fileInfoList">
						<div style="display: flex; justify-content: center; align-items: center;">
							<img style="margin: 0 2px; border-radius: 5px; max-width: 110px; max-height: 110px; cursor: pointer;"
								v-for="src in approved_reject_Data.fileInfoList" :src="src.url" :key="src.id">
						</div>
					</viewer>
				</div>
			</div>
			<p style="display: flex; justify-content: center;">
				<el-button type="danger" @click="handlerReject">驳 回</el-button>
				<el-button type="primary" class="confirm-btn" @click="handlerPass">通 过</el-button>
			</p>
		</el-dialog>
		<!-- 推文 -->
		<el-dialog title="推文/主办" custom-class="class-article" :visible.sync="dialogArticleVisible" :close-on-click-modal="false" :close-on-press-escape="false"
			@close="dialogArticleVisible = false">
			<div style="display: flex; margin-bottom: 20px;">
				<div style="text-align: right; font-weight: bold; width: 100px; ">标题：</div>
				<div style="width: calc(100% - 100px); ">{{ approved_reject_Data.title }}</div>
			</div>
			<div style="display: flex; margin-bottom: 20px;">
				<div style="text-align: right; font-weight: bold; width: 100px; height: 80px;">描述：</div>
				<div style="width: calc(100% - 100px); height: 80px;">{{ approved_reject_Data.remark }}</div>
			</div>
			<div style="display: flex;">
				<div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">视频/图片：</div>
				<div v-if="approved_reject_Data.fileInfoList.length > 0">
					<viewer :images="approved_reject_Data.fileInfoList">
						<div style="height: 120px; display: flex; justify-content: center; align-items: center;">
							<img style="margin: 0 2px; border-radius: 5px; max-width: 100%; max-height: 100%; cursor: pointer;" v-for="src in approved_reject_Data.fileInfoList"
								:src="src.url" :key="src.id">
						</div>
					</viewer>
				</div>
			</div>
			<p style="display: flex; justify-content: center;">
				<el-button type="danger" @click="handlerReject">驳 回</el-button>
				<el-button type="primary" class="confirm-btn" @click="handlerPass">通 过</el-button>
			</p>
		</el-dialog>
		<!-- 审核通过确认对话框 -->
		<el-dialog title="提示" :center="true" :visible.sync="showPassDialog" width="280px" :show-close="false" :close-on-click-modal="false"
			:close-on-press-escape="false" custom-class="queren-class" @close="handlerCloseApprove">
			<div ref="container" :class="{ 'loaded': isLoaded_approve }" style="margin-top: 18px; height: 88px;">
				<div class='stamp_approve'></div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showPassDialog = false" class="cancel-btn">取 消</el-button>
				<el-button type="primary" class="confirm-btn" @click="handlerApproveOk">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 审核驳回确认对话框 -->
		<el-dialog title="提示" :center="true" :visible.sync="showRejectDialog" width="280px" :show-close="false" :close-on-click-modal="false"
			:close-on-press-escape="false" custom-class="bohui-class" @close="handlerCloseReject">
			<div ref="container" :class="{ 'loaded': isLoaded_reject }" style="margin-top: 18px; height: 88px;">
				<div class='stamp_reject'></div>
			</div>
			<div style="display: flex;">
				<div style="margin-right: 10px;">备注</div>
				<div>
					<el-input type="textarea" placeholder="请输入备注" v-model="approved_reject_Data.workflowRemark" maxlength="188" rows="4"
						show-word-limit></el-input>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showRejectDialog = false" class="cancel-btn">取 消</el-button>
				<el-button type="primary" class="confirm-btn" @click="handlerRejectOk">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getTableData,
		approved
	} from '@/api/myAgent'
	import {
		isEmpty
	} from '@/js/common'

	export default {
		data() {
			return {
				currentUserLevel: this.$store.state.user.level, // 当前用户的权限
				dialogImageUrl: '',
				formLabelWidth: '120px',
				// 表格单元格样式
				cell_style: {
					color: '#1A202B',
					'font-size': '14px',
					'font-family': 'Microsoft YaHei-3970(82674968)'
				},
				// 表格头部样式
				header_cell_style: {
					background: '#E6ECFE',
					color: '#1A202B',
					'font-size': '16px',
					'font-family': 'Microsoft YaHei-3970(82674968)'
				},
				tableData: [],
				// 分页参数
				pagination: {
					currentPage: 1,
					pageSize: 10,
					total: 0
				},
				loading: true,
				dialogInfoMinsuVisible: false, // 民宿信息维护
				dialogevaluateVisible: false, // 评价
				dialogArticleVisible: false, // 推文
				showPassDialog: false, // 审核通过确认对话框
				showRejectDialog: false, // 驳回确认对话框
				approved_reject_Data: {
					id: '',
					type: '',
					status: '',
					workflowRemark: '',
					remark: '',
					fileInfoList: []
				}, // 审核 驳回 参数
				isLoaded_approve: false, // 控制审核通过盖章
				isLoaded_reject: false, // 控制驳回盖章
			}
		},
		created() {
			// 检测权限
			if (this.currentUserLevel !== 2) {
				this.$router.replace({
					path: '/data'
				})
				return
			}
			// 获取消费记录,表格数据
			this.get_table_data('list')
		},
		mounted() {
			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
		},
		methods: {
			// 审核通过盖章动画效果
			handlerCloseApprove() {
				this.isLoaded_approve = false
			},
			// 驳回盖章动画效果
			handlerCloseReject() {
				this.isLoaded_reject = false
			},
			// 审核通过OK
			handlerApproveOk() {
				var that = this;
				that.$set(this.approved_reject_Data, 'status', 2);
				that.$set(this.approved_reject_Data, 'workflowRemark', '审核通过');
				approved(this.approved_reject_Data).then((res) => {
					// console.log(res.data);
					if (res.code === 200) {
						that.showPassDialog = false;
						that.dialogInfoMinsuVisible = false;
						that.$set(this.approved_reject_Data, 'workflowRemark', '');
						// 刷新列表
						this.get_table_data('list')
						that.$message.success(res.message)
					} else {
						that.$set(this.approved_reject_Data, 'workflowRemark', '');
						that.$message.warning(res.message)
					}
				}).catch((err) => {
					// console.log(err);
					that.$set(this.approved_reject_Data, 'workflowRemark', '');
					that.$message.error(err.message)
				});
			},
			// 审核通过确认对话框
			handlerPass() {
				var that = this;
				this.showPassDialog = true
				setTimeout(function() {
					that.isLoaded_approve = true
				}, 300)
			},
			// 审核驳回
			handlerRejectOk() {
				if (isEmpty(this.approved_reject_Data.workflowRemark)) {
					this.$message.error('请输入备注')
					return
				}
				var that = this;
				this.approved_reject_Data.status = 3
				approved(this.approved_reject_Data).then((res) => {
					// console.log(res.data);
					if (res.code === 200) {
						that.showRejectDialog = false;
						that.dialogInfoMinsuVisible = false;
						// 刷新列表
						this.get_table_data('list')
						that.$message.success(res.message)
					} else {
						that.$message.warning(res.message)
					}
				}).catch((err) => {
					// console.log(err);
					that.$message.error(err.message)
				});
			},
			// 审核驳回确认对话框
			handlerReject() {
				var that = this;
				this.showRejectDialog = true

				setTimeout(function() {
					that.isLoaded_reject = true
				}, 300)
			},
			// 民宿信息维护-主办
			handleClickZhuban(index, row) {
				// console.log(row, index);
				if (row.type == 1) {
					this.dialogInfoMinsuVisible = true;
				} else if (row.type == 2) {
					this.dialogevaluateVisible = true;
				} else if (row.type == 3) {
					this.dialogArticleVisible = true;
				}

				this.approved_reject_Data = {}
				this.$set(this.approved_reject_Data, 'id', row.id)
				this.$set(this.approved_reject_Data, 'type', row.type)
				this.$set(this.approved_reject_Data, 'status', row.status)
				this.$set(this.approved_reject_Data, 'remark', row.remark)
				this.$set(this.approved_reject_Data, 'coverImg', row.coverImg)
				this.$set(this.approved_reject_Data, 'workflowRemark', row.workflowRemark)
				if (row.fileInfoList.length > 0) {
					this.$set(this.approved_reject_Data, 'fileInfoList', row.fileInfoList)
				} else {
					this.$set(this.approved_reject_Data, 'fileInfoList', {})
				}
			},
			/**
			 * 获取消费记录,表格数据
			 */
			get_table_data(param) {
				this.loading = true

				var that = this
				getTableData(that.pagination).then((res) => {
					// console.log(res.data);
					if (res.code === 200) {
						var d = res.data
						that.pagination.total = d.total
						that.tableData = []
						for (var i = 0; i < d.pageList.length; i++) {
							that.tableData.push(d.pageList[i])
						}
					} else {
						that.tableData = []
						that.$message.warning('没有符合条件的数据！')
					}
				}).catch((err) => {
					// console.log(err);
					that.$message.error(err.message)
				});
				that.loading = false;
			},
			/**
			 * currentPage 改变时会触发
			 * @param {Object} val
			 */
			currentPageChange(val) {
				this.pagination.currentPage = val
				this.get_table_data('pages')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		background-color: #EFF2F7;
		padding: 10px;

		.el-row {

			.el-col {
				padding: 10px;

				.cell {
					padding: 30px;
					border-radius: 10px;
					background-color: #FFFFFF;
					box-shadow: 0px 3px 21px 0px rgba(60, 108, 254, 0.16);

					.cell-title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 30px;
						padding-bottom: 30px;
						border-bottom: 1px solid #CCCCCC;

						.title-left {
							display: flex;
							align-items: center;

							.title {
								font-size: 22px;
								font-family: Microsoft YaHei-3970(82674968);
								font-weight: bold;
								color: #1A202B;
							}

							.title-detail {
								margin-left: 50px;
								font-size: 18px;
								font-family: Microsoft YaHei-3970(82674968);
								color: #1A202B;
							}
						}

						.title-right {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.el-button {
								width: 110px;
								height: 46px;
								background: #2B4CFE;
								font-size: 18px;
								color: #FFFFFF;
								font-family: Microsoft YaHei-3970(82674968);
								border-radius: 5px;
							}

							.el-button--warning {
								background: #F88A64;
							}
						}
					}

					.cell-body {

						.pagination-table {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							height: 30px;
							margin-top: 20px;
							padding-right: 100px;

							.txt-notice {

								span {
									font-size: 28px;
									font-weight: 500;
									font-family: '微软雅黑';
								}
							}

							::v-deep .el-pagination {
								display: flex;
								justify-content: flex-end;
								align-items: center;
							}

							::v-deep .el-pagination ul {
								display: flex;

							}

							::v-deep .el-pagination button,
							::v-deep .el-pagination li {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 50px;
								height: 36px;
								border: 1px solid #626262;
								border-radius: 3px;
								font-size: 14px;
								margin: 0 5px;
							}

							::v-deep .el-pagination span {
								margin-left: 10px;
							}

							::v-deep .el-pagination .el-pagination__jump {
								font-size: 16px;
							}

							::v-deep .el-pagination .el-pagination__editor {
								width: 50px;
								height: 36px;
								margin: 0 5px;
							}

							::v-deep .el-pagination .el-input__inner {
								width: 50px;
								height: 36px;
								border: 1px solid #626262;
								margin: -4px 0 0 0;
							}
						}
					}
				}
			}
		}

		::v-deep .el-dialog {
			margin: 0 !important;
			width: 650px;
			height: 560px;
			background: #FFFFFF;
			box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
			border-radius: 6px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.el-dialog__header {
				display: flex;
				align-items: center;
				width: 100%;
				height: 58px;
				padding: 30px;
				border-radius: 6px 6px 0px 0px;
				font-weight: bold;
				border-bottom: 1px solid rgba(230, 230, 230, 1);
			}

			.el-dialog__body {
				padding-bottom: 0;

				.el-form-item__label,
				.el-form-item__content {
					font-size: 16px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #53575A;
				}

				.el-input__inner {
					width: 180px;
				}
			}

			// 删除对话框的样式
			.del-account-body {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 180px;

				img {
					width: 72px;
				}

				.del-account-body-txt {
					height: 58px;
					line-height: 58px;
					font-size: 18px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #333333;
				}
			}

			.el-dialog__footer {
				padding-bottom: 0 !important;
				text-align: center;

				.el-button.el-button--default {
					width: 75px;
					height: 40px;
					border: 1px solid #2B4CFE;
					border-radius: 6px;
					font-size: 16px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #2B4CFE;
				}

				.el-button.el-button--primary {
					width: 75px;
					height: 40px;
					background: #2B4CFE;
					border-radius: 6px;
					font-size: 16px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #FFFFFF;
					margin-left: 60px;
				}
			}
		}

		>>>.el-table__fixed-body-wrapper .el-table__body {
			padding-bottom: 17px !important; // 滚动条高度
		}

		>>>.el-table__fixed,
		>>>.el-table__fixed-right {
			height: calc(100% - 14px) !important;
		}
	}

	.container {
		max-width: 100px;
		margin: auto;
		-webkit-backface-visibility: hidden;
	}

	.stamp_approve {
		position: relative;

		&:after {
			border: solid .1em #067d00;
			border-radius: .2em;
			color: #067d00;
			content: '审核通过';
			font-size: 33px;
			font-weight: bold;
			line-height: 1;
			opacity: 0;
			position: absolute;
			padding: .1em .5em;
			margin: 0 auto;
			top: 10%;
			left: 10%;
			text-transform: uppercase;
			opacity: 0;
			transform-origin: 50% 50%;
			transform: rotate(-2deg) scale(5);
			transition: all .3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
		}
	}

	.stamp_reject {
		position: relative;
		margin-left: 40px;

		&:after {
			border: solid .1em #f00;
			border-radius: .2em;
			color: #f00;
			content: '驳回';
			font-size: 33px;
			font-weight: bold;
			line-height: 1;
			opacity: 0;
			position: absolute;
			padding: .1em .5em;
			margin: 0 auto;
			top: 10%;
			left: 10%;
			text-transform: uppercase;
			opacity: 0;
			transform-origin: 50% 50%;
			transform: rotate(-2deg) scale(5);
			transition: all .3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
		}
	}

	.loaded {

		.stamp_approve:after,
		.stamp_reject:after {
			opacity: .75;
			transform: rotate(-15deg) scale(1);
			z-index: -1;
		}
	}
</style>

<style>
	.class-daiban {
		height: 580px !important;
		width: 880px !important;
	}

	.class-pingjia {
		height: 500px !important;
		width: 880px !important;
	}

	.class-article {
		height: 430px !important;
		width: 880px !important;
	}

	.add-remarks-class {
		height: 300px !important;
	}

	.el-date-editor--daterange.el-input__inner {
		width: 280px !important;
	}

	.show-imgs {
		display: flex;
	}

	.lbl-cls {
		display: inline-block;
		width: 100px;
		text-align: right;
		padding-right: 10px;
		color: #bbb;
	}

	.cancel-btn {
		color: rgba(9, 101, 98, 1) !important;
		border: 1px solid rgba(9, 101, 98, 1) !important;
	}

	.confirm-btn {
		border: none !important;
		background: rgba(9, 101, 98, 1) !important;
		color: #fff !important;
		border-radius: 5px !important;
		margin-left: 28px !important;
	}

	.el-carousel__indicators {
		display: none !important;
	}

	.queren-class {
		height: 290px !important;
	}

	.bohui-class {
		height: 360px !important;
	}

	.queren-class .el-dialog__header,
	.bohui-class .el-dialog__header {
		display: flex;
		justify-content: center;
	}
</style>