<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 label="审批人" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.workflowName }}</span>
								</template>
							</el-table-column>
							<el-table-column label="审批时间" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.workflowDate }}</span>
								</template>
							</el-table-column>
							<el-table-column label="审批备注" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.workflowRemark }}</span>
								</template>
							</el-table-column>
							<el-table-column label="状态" align="center">
								<template slot-scope="scope">
									<span v-if="scope.row.status == 2" style="color: rgba(9, 149, 21, 1.0);">已审核</span>
									<span v-else-if="scope.row.status == 3" style="color: rgba(227, 0, 3, 1.0);">驳回</span>
								</template>
							</el-table-column>
							<el-table-column fixed="right" label="操作" align="center" width="180">
								<template slot-scope="scope">
									<el-button @click="handleClickDetail(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-shenhe" :visible.sync="dialogInfoMinsuVisible" :close-on-click-modal="true"
			:close-on-press-escape="true" @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="fileInofImage">
							<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>
					<viewer :images="fileInfoListImages">
						<el-carousel height="180px" width="500px" style="border-radius: 5px;">
							<el-carousel-item v-for="item in approved_reject_Data.fileInfoList" :key="item.id">
								<img :src="item" style="border-radius: 5px; cursor: pointer; width: 500px; height: 180px;">
							</el-carousel-item>
						</el-carousel>
					</viewer>
				</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="暂无内容" readonly rows="8" style="width: 740px;" v-model="approved_reject_Data.remark" maxlength="500"
					show-word-limit>
				</el-input>
			</div>
			<el-divider></el-divider>
			<div style="display: flex; margin-top: 20px;">
				<div style="color: #999; font-weight: bold; width: 80px; text-align: right; margin-right: 10px;">状态</div>
				<div v-if="approved_reject_Data.status == 2" style="color: rgba(9, 149, 21, 1.0); font-weight: 500;">审核通过</div>
				<div v-if="approved_reject_Data.status == 3" style="color: rgba(227, 0, 3, 1.0); font-weight: 500;">驳回</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="暂无备注内容" readonly rows="2" style="width: 740px;" v-model="approved_reject_Data.workflowRemark"
					maxlength="100" show-word-limit>
				</el-input>
			</div>
		</el-dialog>
		<!-- 评价 -->
		<el-dialog title="评价/详情" custom-class="class-pingjia-shenhe" :visible.sync="dialogevaluateVisible" :close-on-click-modal="true"
			:close-on-press-escape="true" @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="fileInfoListImages">
						<div style="height: 110px; display: flex; justify-content: center; align-items: center;">
							<img style="width: 110px; height: 110px; margin: 0 2px; border-radius: 5px; max-width: 110px; max-height: 110px; cursor: pointer;"
								v-for="src in approved_reject_Data.fileInfoList" :src="src" :key="src.id">
						</div>
					</viewer>
				</div>
			</div>
			<el-divider></el-divider>
			<div style="display: flex; margin-top: 20px;">
				<div style="color: #999; font-weight: bold; width: 80px; text-align: right; margin-right: 10px;">状态</div>
				<div v-if="approved_reject_Data.status == 2" style="color: rgba(9, 149, 21, 1.0); font-weight: 500;">审核通过</div>
				<div v-if="approved_reject_Data.status == 3" style="color: rgba(227, 0, 3, 1.0); font-weight: 500;">驳回</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="暂无备注内容" readonly rows="2" style="width: 740px;" v-model="approved_reject_Data.workflowRemark"
					maxlength="100" show-word-limit>
				</el-input>
			</div>
		</el-dialog>
		<!-- 推文 -->
		<el-dialog title="推文/详情" custom-class="class-article-shenhe" :visible.sync="dialogArticleVisible" :close-on-click-modal="true"
			:close-on-press-escape="true" @close="dialogArticleVisible = false">
			<div style="display: flex; flex-direction: column; max-height: 650px; overflow-y: auto;">
				<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; max-height: 100px; overflow-y: auto;">{{ approved_reject_Data.remark }}</div>
				</div>
				<div style="display: flex; height: 130px;">
					<div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">图片：</div>
					<div v-if="approved_reject_Data.fileInfoList.length > 0">
						<viewer :images="fileInfoListImages">
							<div style="height: 120px; display: flex; justify-content: center; align-items: center;">
								<img style="width: 110px; height: 110px; margin: 0 2px; border-radius: 5px; max-width: 110px; max-height: 110px; cursor: pointer;"
									v-for="src in approved_reject_Data.fileInfoList" :src="src" :key="src.id">
							</div>
						</viewer>
					</div>
				</div>
				<div style="width: 750px; height: 450px; margin-top: 10px; display: flex;">
					<div style="text-align: right; font-weight: bold; width: 100px; height: 100px;">视频：</div>
					<div v-if="approved_reject_Data.videoList.length > 0">
						<div v-for="(video, index) in approved_reject_Data.videoList" :key="index"
							style="width: 650px; height: 340px; display: flex; justify-content: center; align-items: center;">
							<video-player class="video-player vjs-custom-skin" :ref="'videoPlayer' + index" @play="onPlayerPlay($event)" :playsinline="true"
								:options="video.playerOptions"></video-player>
						</div>
					</div>
				</div>
			</div>
			<el-divider></el-divider>
			<div style="display: flex; margin-top: 20px;">
				<div style="color: #999; font-weight: bold; width: 80px; text-align: right; margin-right: 10px;">状态</div>
				<div v-if="approved_reject_Data.status == 2" style="color: rgba(9, 149, 21, 1.0); font-weight: 500;">审核通过</div>
				<div v-if="approved_reject_Data.status == 3" style="color: rgba(227, 0, 3, 1.0); font-weight: 500;">驳回</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getTableData
	} from '@/api/audited'

	import {
		isEmpty
	} from '@/js/common'

	export default {
		data() {
			return {
				currentUserLevel: this.$store.state.user.level, // 当前用户的权限
				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,
				approved_reject_Data: {
					title: '',
					id: '',
					type: '',
					status: '',
					workflowRemark: '',
					remark: '',
					coverImg: '',
					fileInfoList: [],
					videoList: []
				}, // 审核 驳回 参数
				fileInofImage: [], // 缩略图
				fileInfoListImages: [], // 滚动图片
				dialogInfoMinsuVisible: false, // 民宿信息维护
				dialogevaluateVisible: false, // 评价
				dialogArticleVisible: false // 推文
			}
		},
		created() {
			// 检测权限
			if (this.currentUserLevel !== 2) {
				this.$router.replace({
					path: '/data'
				})
				return
			}
			// 获取消费记录,表格数据
			this.get_table_data()
		},
		mounted() {
			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
			document.addEventListener('fullscreenchange', this.handleFullScreenChange);
		},
		beforeDestroy() {
			document.removeEventListener('fullscreenchange', this.handleFullScreenChange);
		},
		methods: {
			handleFullScreenChange() {
				if (!document.fullscreenElement) {
					// 退出全屏逻辑
					this.playering.pause()
				}
			},
			// 定义点击播放按钮，自动全屏化的方法
			full(e) {
				// 做兼容处理
				if (e.requestFullscreen) {
					e.requestFullscreen()
				} else if (e.mozRequestFullScreen) {
					e.mozRequestFullScreen()
				} else if (e.msRequestFullscreen) {
					e.msRequestFullscreen()
				} else if (e.oRequestFullscreen) {
					e.oRequestFullscreen()
				} else if (e.webkitRequestFullscreen) {
					e.webkitRequestFullScreen()
				} else {
					// var docHtml = document.documentElement;
					// var docBody = document.body;
					var videobox = document.getElementsByClassName('video-player')
					var cssText = 'width:100%;height:100%;overflow:hidden;'
					// docHtml.style.cssText = cssText;
					// docBody.style.cssText = cssText;
					videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;'
					document.IsFullScreen = true
				}
			},
			// 定义点击播放按钮，调用全屏化的方法
			onPlayerPlay(player) {
				// console.log('player play===>>>', player)
				this.playering = player
				this.full(player)
			},
			handleClickDetail(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, 'title', row.title)
				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.fileInofImage.push(row.coverImg)
				this.$set(this.approved_reject_Data, 'workflowRemark', row.workflowRemark)
				this.approved_reject_Data.videoList = []
				if (row.fileInfoList.length > 0) {
					var tmpImgList = []
					for (var i = 0; i < row.fileInfoList.length; i++) {
						if (row.fileInfoList[i].url.toLowerCase().endsWith('.mp4')) {
							this.approved_reject_Data.videoList.push({
								playerOptions: {
									playbackRates: [0.5, 0.8, 1.0, 1.25, 1.5, 1.75, 2.0], //播放速度
									autoplay: false, // 如果true,浏览器准备好时开始回放。
									muted: false, // 默认情况下将会消除任何音频。
									loop: false, // 导致视频一结束就重新开始。
									preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
									language: "zh-CN",
									aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
									fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
									sources: [{
										withCredentials: false,
										type: "video/mp4", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
										src: row.fileInfoList[i].url,
									}],
									controls: true,
									hls: true,
									poster: "", // 你的封面地址
									notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
									controlBar: {
										progressControl: true,
										currentTimeDisplay: true,
										timeDivider: true,
										durationDisplay: true,
										remainingTimeDisplay: true,
										fullscreenToggle: true, // 全屏按钮
									},
									flash: {
										hls: {
											withCredentials: false
										}
									},
									html5: {
										hls: {
											withCredentials: false
										}
									}
								}
							})
						} else if (!isEmpty(row.fileInfoList[i].url)) {
							tmpImgList.push(row.fileInfoList[i].url)
						}
					}
					this.fileInfoListImages = tmpImgList
					this.$set(this.approved_reject_Data, 'fileInfoList', tmpImgList)
				} else {
					this.$set(this.approved_reject_Data, 'fileInfoList', [])
				}
			},
			/**
			 * 获取消费记录,表格数据
			 */
			get_table_data() {
				this.loading = true

				var that = this
				// console.log(data);
				getTableData(this.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;
			},
			/**
			 * 导出为Excel
			 */
			exportExcel() {
				var that = this
				downloadExcel(this.cond_data).then((res) => {
					// console.log(res);
					if (res.code === 200) {
						that.$message.success(res.message)
						let xls = res.downurl
						window.open(xls)
					} else {
						that.tableData = []
						that.$message.warning(res.message)
					}
				}).catch((err) => {
					// console.log(err);
					that.$message.error(err.message)
				});
			},
			/**
			 * 搜索
			 */
			btn_search() {
				this.get_table_data('search')
			},
			/**
			 * 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;

							.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;
		}
	}

	.video-player {
		height: 100%;
		width: 100%;
		margin: 0 auto;
	}
</style>

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

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

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

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

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

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

	.show-imgs {
		display: flex;
	}

	.imgs {
		display: flex;
		flex-direction: row;
		margin-left: 20px;
		height: 230px;
	}

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

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