<template>
	<div>
		<div class="bg" v-if="isError">
			<div class="bg-btn hand" @click="goIndex"></div>
		</div>
		<div class="bg bg2" v-else>
			<div class="list-wrap">
				<div class="search-left">
					<img src="../../assets/img/flower-black.png" alt="" />
					<div class="moren">悼念总数：{{mournAll || 0}}</div>
				</div>
				<div class="black hand" @click="goBlack">
					<!-- <img src="../../assets/img/flower-black.png" alt="" /> -->
					<!-- <div class="moren">悼念总数：{{mournAll || 0}}</div> -->
					<span>返回上页</span>
					<img src="../../assets/img/black.png" alt="" />
				</div>
				<img src="../../assets/img/dn-top1.png" alt="" class="list-top" />
				<div class="list flex">
					<div class="list-item" v-for="item in list" :key="item.id">
						<div class="item-logo">
							<img class="logo-pepo" :src="item.image" />
							<img class="logo-hq" src="../../assets/img/hq.png" />
						</div>
						<div class="item-name moren">{{item.name}}</div>
						<div class="item-btn hand" @click="goDaonian(item)">在线悼念</div>
					</div>
				</div>
				<div class="page-wrap">
					<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页"
						@current-change="currentChange" :page-size="12"></el-pagination>
					<div class="search">
						<input type="text" v-model="keyword" placeholder="请输入捐献者" class="" @keyup.enter="getList()" />
						<img src="../../assets/img/search.png" class="hand" @click="getList()" />
					</div>
				</div>
			</div>
		</div>
		<audio id="audio" :src="require('../../assets/music/sbhh.mp3')" loop ref="music" controls hidden></audio>
	</div>
</template>
<script>
	import {
		getMournList,
		getAllNum
	} from '../../request/api.js'
	export default {
		data() {
			return {
				isError: true,
				list: [],
				page: 1,
				limit: 12,
				total: 0,
				keyword: "",
				mournAll: ''
			};
		},
		// components: {
		//   PageBottom,
		// },
		mounted() {
			console.log(this.$store.state.isPlay,'this.$store.state.isPlay')
			if(this.$store.state.isPlay) {
				this.isError = false
			}
			this.getMournList()
			this.getAllNum()
		},
		methods: {
			goBlack() {
				this.$router.push('/mourn/indexs')
			},
			goIndex() {
				this.$refs.music.play()
				this.isError = false
				// this.$store.mutations.setPlay()
				this.$store.commit('setPlay')
				// console.log('x')
				// this.audioAutoPlay()
			},
			// 自动播放
			audioAutoPlay() {
				let audio = document.getElementById('audio')
				audio.play()
				document.removeEventListener('touchstart', this.audioAutoPlay)
			},
			// 获取全部数据
			getAllNum() {
				getAllNum().then(res => {
					console.log(res)
					this.mournAll = res.data
				})
			},
			// 获取捐献列表
			getMournList() {
				let obj = this
				getMournList({
					page: obj.page,
					search: obj.keyword,
					rows: obj.limit
				}).then(res => {
					console.log(res)
					obj.list = []
					obj.list = res.data.data
					obj.total = res.data.total
				})
			},
			goHome() {
				this.$router.push('/home')
			},
			// 页码改变触发
			currentChange(e) {
				this.page = e;
				this.getMournList()
			},
			// 获取捐献列表
			getList() {
				this.page = 1
				this.getMournList()
			},
			// 在线悼念
			goDaonian(item) {
				this.$refs.music.play();
				this.$router.push("/mourn/details?id=" + item.id);

			},
		},
	};
</script>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	html {
		background-color: #e9f4ef;
	}

	.bg {
		width: 100vw;
		width: 1920px;
		height: 100vh;
		height: 1080px;
		background-image: url('../../assets/img/indexs-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
		margin: auto;

		.bg-btn {
			width: 454px;
			height: 94px;
			// background-color: red;
			position: absolute;
			top: 612px;
			left: 733px;
		}
	}

	.bg2 {
		background-image: url('../../assets/img/indexs-bg-t.png');

		.list-wrap {
			width: 1741px;
			height: 826px;
			background-color: #d7e9e8;
			border-radius: 20px;
			position: absolute;
			top: 222px;
			left: 0;
			right: 0;
			margin: auto;
			padding: 30px 0;

			.search-left {
				display: flex;
				align-items: center;
				height: 33px;
				font-size: 15px;
				font-weight: bold;
				color: #031a2a;
				margin-right: 10px;
				position: absolute;
				top: 30px;
				right:30px;
				img {
					margin-right: 5px;
				}
			}
			.black {
				color: #006061;
				padding-left: 30px;
				display: flex;
				align-items: center;
				position: absolute;
				
				img {
					width: 22px;
					height: 16px;
					margin-left: 10px;
					
				}
			}

			.list-top {
				display: block;
				margin: auto;
			}

			.list {
				width: 100%;
				height: 626px;
				padding: 0 138px;
				flex-wrap: wrap;

				.list-item {
					text-align: center;
					width: 203px;
					height: 278px;
					margin: 20px;

					.item-logo {
						width: 203px;
						height: 203px;
						position: relative;

						.logo-pepo {
							width: 160px;
							height: 160px;
							border-radius: 50%;
							position: absolute;
							top: 0;
							left: 0;
							bottom: 0;
							right: 0;
							margin: auto;
						}

						.logo-hq {
							width: 203px;
							height: 203px;
							position: absolute;
							top: 0;
							left: 0;
						}

						// background-image: url(../../assets/img/hq.png);
					}

					.item-name {
						padding: 13px 0;
						font-size: 21px;
						font-family: PingFang SC;
						font-weight: 500;
						color: #071b2a;
					}

					.item-btn {
						width: 97px;
						line-height: 29px;
						background: #006061;
						border-radius: 5px;
						font-size: 15px;
						font-family: PingFang SC;
						font-weight: bold;
						color: #ffffff;
						margin: auto;
					}
				}
			}

			.page-wrap {

				display: flex;
				justify-content: center;
				// padding: ;
				padding-top: 20px;

				.search {
					padding-left: 13px;
					padding-right: 13px;
					width: 295px;
					height: 33px;
					line-height: 33px;
					background: #ffffff;
					border: 1px solid #cccccc;
					border-radius: 10px;
					// margin-bottom: 10px;
					display: flex;
					justify-content: space-between;
					align-items: center;

					input {
						width: 235px;
						font-size: 16px;
						font-family: PingFang SC;
						font-weight: bold;
						outline: none;
						border: none;
					}

					img {
						width: 20px;
						height: 20px;
					}
				}
			}
		}
	}
</style>