<template>
	<u-popup :show="show" mode="bottom" @close="onClose" :round="20">
		<view class="box">
			<view class="header flex">
				<text>更多</text>
				<u-icon name="close" @click="onClose"></u-icon>
			</view>
			<view class="flex">
				<view v-for="(item,index) in datalist" :key="index+''" class="flex-col">
					<image @click="skip(index)" :src="item.url" style="width:60rpx;height: 60rpx;" mode="widthFix">
					</image>
					<text class="mt-1">{{item.title}}</text>
				</view>
			</view>
		</view>
		<!-- 子页面 -->
		<typeSkip :show="typeFalg" :title="title" :data="typeList" @onClose="onClose"></typeSkip>
	</u-popup>
</template>
<script>
	import typeSkip from "./component/index.vue";
	export default {
		name: "more",
		props: ["show"],
		components: {
			typeSkip
		},
		data() {
			return {
				typeFalg: false,
				title:"",
				typeList:[],
				datalist: [{
						title: "私聊",
						url: "/static/images/IM.png"
					},
					{
						title: "线路切换",
						url: "/static/images/skip.png",
						list: ["线路1", "线路2"]
					},
					{
						title: "直播类型",
						url: "/static/images/type.png",
						list:["标准直播","快直播"]
					},
				]
			}
		},
		methods: {
			onClose() {
				this.$emit("onClose");
			},
			skip(index) {
				this.typeFalg = true;
				this.title = this.datalist[index].title;
				console.log(this.title)
				this.typeList = this.datalist[index].list;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mt-1 {
		margin-top: 10rpx;
	}

	.flex {
		display: flex;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
		justify-content: left;
		align-items: center;
		width: 20%;
		color: #777777;
		font-size: 28rpx;
	}

	.text-center {
		text-align: center;
	}

	.header {
		justify-content: space-between;
		padding: 32rpx 40rpx;
	}

	.box {
		height: 440rpx;
	}
</style>
