<template>
	<popup :show="myShow" @clickBackground="toggleSpec">
		<view class="body">
			<view class="top-view">
				<view class="main">
					<view class="user">
						<view>
							<view class="user-info">
								<view>
									<image class="head" mode="widthFix" :src="live.users.userInfo.headPortrait"></image>
								</view>
								<view class="user-right">
									<view class="user-info-name">{{live.users.userInfo.name}}</view>
									<view class="user-info-fans">粉丝数：{{fans}}</view>
									<button class="user-info-state">直播{{LiveState[live.liveState].text}}</button>
								</view>
							</view>
						</view>
						<view>
							<image class="main-qr" mode="widthFix" :src="imageQr"></image>
						</view>
					</view>
				</view>
				<view class="name">{{live.name}}</view>
				<image mode="aspectFill" class="cover" :src="live.cover"></image>
				<image mode="widthFix" class="tail-image" :src="teaTailImage"></image>
			</view>
			<view class="tail">
				<long-button @click="save">保存图片</long-button>
			</view>
		</view>
	</popup>
</template>

<script>
	import popup from '../popup.vue'
	import longButton from '../wrap/long-button.vue'
	import teaTailImage from '../../static/tea-tail.png'

	import {
		fansSumQuery,
		getByUsrStatusCoupon,
		addCommodityListToBog,
		jumpLink,
		generateLiveShareContentFile,
		generateLiveShareContent,
		LiveState
	} from '../../js/request.js'


	export default {
		props: ['show', 'live'],
		components: {
			popup,
			longButton
		},
		data() {
			return {
				fans: 0,
				LiveState,
				saveMode: 0,
				imageQr: null,
				teaTailImage,
				myShow: this.show || false
			}
		},
		watch: {
			live() {
				this.fansSumSet()
			},
			myShow(val) {
				this.$emit('changeShow', val)
			},
			show(val) {
				this.myShow = val
			}
		},
		mounted() {
			this.setQrImage()
		},
		methods: {
			async fansSumSet(live = this.live) {
				if (!live) return
				const {
					data
				} = await fansSumQuery({
					"user_id": live.users.userId
				})
				this.fans = data
			},
			tap(item) {
				this.toggleSpec()
				this.$emit('select', item)
			},
			toggleSpec() {
				this.myShow = !this.myShow
				this.$emit('toggleSpec', this.myShow)
			},
			async setQrImage() {
				try {
					const image = await generateLiveShareContent(this.live.id)
					if (image) this.imageQr = image.replace(/[\r\n]/g, ``)
				} catch (e) {
					this.$error(`generateLiveShareContent fail:`, e)
				}
			},
			async save() {
				if (this.saveMode === 0) {
					await this.saveQrImage()
				} else {
					//保存成海报
					this.message('暂不支持', 'pro-fail')
				}
				this.toggleSpec()
			},
			async saveQrImage() {
				const that = this

				const path = await generateLiveShareContentFile(this.live.id)

				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
						body()
					},
					fail(e) {
						that.$error(`scope.writePhotosAlbum fail:`, e)
						uni.openSetting({
							success(res) {
								console.log(res.authSetting)
								body()
							},
							fail(e) {
								that.$error(`openSetting fail:`, e)
							}
						})
					}
				})

				const body = () => {
					uni.saveImageToPhotosAlbum({
						filePath: path,
						success() {
							that.message('保存成功', 'pro-success')
						},
						fail(e) {
							that.$error(`saveImageToPhotosAlbum fail:`, e)
							that.message('保存失败', 'pro-fail')
						}
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.top-view {
		background-color: #fff;
		margin: 30px;
		border-radius: 10px;
		padding: 30px;
	}

	.main {
		.user {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.head {
				width: 100upx;
				height: 100upx;
			}

			&-info {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&-name {
					color: #8D846F;
				}

				&-fans {
					color: #999999;
					font-size: 26upx;
				}

				&-state {
					background-image: url('../../static/icon/live-state-but.png');
					color: #fff;
					background-size: 100% 100%;
					transform: scale(0.55);
					width: 120%;
					position: relative;
					left: -20%;
				}


			}

			&-right {
				position: relative;
				left: 10%;
			}
		}
	}

	.cover {
		height: 500upx;
		width: 100%;
	}

	.tail-image {
		width: 50%;
		position: relative;
		left: 25%;
		margin-top: 20upx;
	}

	.tail {
		background-color: #fff;
		padding: 20px;
		border-radius: 20px 20px 0 0;
	}

	.name {
		color: #333333;
		font-size: 26upx;
		margin: 30upx 0;
	}

	.main-qr {
		width: 150upx;
	}
</style>
