<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");
    .orcodeBox{
        background: #fff;
        border-radius: 8rpx;
		position: relative;
		z-index: 2;
    }
    .Title{
        
    }
    .orcodeImg image{
        width: 500rpx;
        height: 500rpx;
    }
    .SureBox{
        font-size: 28rpx;
        border-top: 1px solid #F2F2F2;
    }
    .SureBox view:last-child{
        color: #295EEB;
    }
    .SureBox view:first-child{
        border-right: 1px solid #ddd;
        color: #8C8C8C;
    }
	.swiper {
		height: 500rpx;
	}
	.swiper-item {
		display: block;
		height: 500rpx;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.sty-box {
		// width: 750px;
		// height: 1344px;
		// position: fixed;
		// top: -2000px;
		// left: -1500px;
		width: 500rpx;
		height: 500rpx;
	}
</style>
<template>
     <view>
		<u-popup mode="center" border-radius="20" 
			:popup="false" 
			v-model="currencyVisible" :maskCloseAble="true" 
			length="80%" :safeAreaInsetBottom="true" 
			@close="close" :z-index="9999">
			<view class="orcodeBox">
				<view class="Title PY30 color000 column justify-center items-center">
					<text class="fz28">领队小程序码（{{current+1}}/{{list.length}}）</text>
					<text class="fz24">{{ list[current].TCNUMS }}</text>
				</view>
				<view class="orcodeImg row items-center justify-center PX40">
					<swiper indicator-dots circular style="height:500rpx;width:500rpx"
					:current="current" @change="changeHandler">
						<swiper-item v-for="(item, index) in list" :key="index">
							<canvas canvas-id="TeamLeaderCanvas" class="sty-box" @error="canvasIdErrorCallback">
								<image mode="aspectFit" :src="item.Url" />
							</canvas>
						</swiper-item>
					</swiper>
					<!-- <img :src="list[0].Url"/> -->
					<!-- <image :src="list[0].Url" style="width: 500rpx;height: 500rpx;"/> -->
				</view>
				<view class="SureBox row MT40">
					<view class="flex1 PY20 text-center" @click="close">取消</view>
					<view class="flex1 PY20 text-center" @click="preservation">保存</view>
				</view>
			</view>
		</u-popup>
	 </view>
</template>
<script>
export default {
    props:['TCIDs'],
    data() {
        return {
            currencyVisible: true,
            list: [],
			current: 0,
			indicatorDots: true,
            autoplay: true,
            interval: 2000,
            duration: 500,
			BaseInfo: [],
        }
    },
    watch: {
        TCIDs:{
            handler(newVal,oldVal){
				this.list = []
				this.getTem(newVal)
            },
            deep: false,
            immediate:true,
        }
    },
    mounted() {
        this.currencyVisible = true
    },
    methods: {
		changeHandler(i) {
			this.current = i.detail.current;
		},
		getTem(TCIDs){
			uni.showLoading()
			this.apipost("dmcstatistics_post_GetExtendLeaderAllStatics",{
				TCIDs: TCIDs,
                NewCombinationNum: ''
			}, (res) => {
                if (res.resultCode == 1) {
					this.BaseInfo = res.data.BaseInfo
					let TCIDs = this.TCIDs.split(',')
					TCIDs.forEach(x => {
						this.init(x)
					});
				}
			})
		},
		async init(x){
			await this.apipostQrCode("", {
				TCID: x
			}, (res) => {
				if (res.resultCode == 1) {
					let findIndex =  this.BaseInfo.findIndex(item => item.TCIDS == x)
					this.list.push({
						Url:'data:image/png;base64,' + res.data,
						TCID:x,
						TCNUMS:this.BaseInfo[findIndex].TCNUMS
					})
					uni.hideLoading()
				}
			})
		},
        close(){
            this.currencyVisible = false
            this.$emit('close')
        },
        preservation(){
            uni.showLoading({
					title: "正在生成",
				});
				let that = this;
				uni.canvasToTempFilePath({
						canvasId: "TeamLeaderCanvas",
						success: (res) => {
							uni.hideLoading();
							uni.showLoading({
								title: "正在保存",
							});
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
									});
								},
								fail: function(err) {
									if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
										uni.authorize({
											scope: 'scope.writePhotosAlbum',
											success: (res) => {
												console.log('11111');
											},
											fail: (res) => {
												uni.showModal({
													content: '检测到您没打开保存到相册权限，是否去设置打开？',
													confirmText: "确认",
													cancelText: '取消',
													success: (res) => {
														if (res.confirm) {
															uni.openSetting({
																success: (res) => {
																	console.log(res);
																	if (res.authSetting['scope.writePhotosAlbum']) {
																		that.preservation()
																	}
																}
															})
														} else {
															console.log('取消');
														}
													}
												})
											}
										})
									} else {
										uni.showToast({
											title: '保存失败，请稍后重试',
											icon: 'none',
											duration: 2000
										})
									}
								},
								complete: function() {
									uni.hideLoading();
								},
							});
						},
						fail: function(e) {
							console.log(e);
							uni.showToast({
								title: '生成失败，请稍后重试',
								icon: 'none',
								duration: 2000
							})
						},
					},
					this
				);
            
        },
		canvasIdErrorCallback: function(e) {
			console.error(e.detail.errMsg);
		}
    }
}
</script>