<template>
    <view class="burst-wrap">
        <view class="burst-wrap-bg">
            <view>
                <!-- 信息提交 -->
                <view class="burst-info">
                    <view class="uni-uploader-body">
                        <view class="uni-uploader__files">
                            <!-- 图片 -->
                           <block v-for="(image,index) in imageList" :key="index">
                                <view class="uni-uploader__file">
                                    <view class="icon iconfont icon-cuo">
										 <!-- @tap="delect(index)" -->
										<uni-icons type="closeempty" color="#000" size="15" class="closeempty_icons" @tap="delect(index)"></uni-icons>
									</view>
                                    <image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
                                </view>
                            </block>
                            <!-- 视频 -->
                            <view v-if="src1.url" style="width: 100%;height: 100%;">
                                <view>
                                    <!-- <video :src="src" id="myVideo" class="video" @play="playVideoFullscreen"></video>
									<cover-view style="position: absolute;width: 160rpx;height: 160rpx;z-index: 999;color: #fff;display: flex;">
										<cover-view style="width: 80%;" @click="playVideoFullscreen"></cover-view>
										<cover-view style="width: 20%;height: 40rpx;font-size: 45rpx;" @click="delectVideo">×</cover-view>
									</cover-view> -->
									<view class='course-video' :style="src1.url ? $util.imageCoverStyle(270,480) : ''">
										<view class="relative-shadow flex justify-center align-center" @tap="handlePlay(src1)">
											<view class="cuIcon-video icon-center f-28 c-white"></view>
										</view>
										<image :src="src1.poster" mode="aspectFit" style="position: absolute;top: 0px;width: 100%;height: 100%;"></image>
										<uni-icons @click="delectVideo" type="closeempty" size="30" style="position: absolute;top: 0px;right: 0px;z-index: 1;"></uni-icons>
									</view>
                                </view>
                            </view>
                            <view class="uni-uploader__input-box" v-if="VideoOfImagesShow">
                                <view class="uni-uploader__input" @tap="chooseVideoImage">
									<image src="/static/image/jiahao.png" mode="widthFix" style="width: 60rpx;"></image>
								</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
 
<script>
	import config from '@/common/config.js'
	import { chat } from '@/mixins/chat.js'
	import imImage from '@/components/message/im-image.vue';
    var sourceType = [
            ['camera'],
            ['album'],
            ['camera', 'album']
        ]
    export default {
		components:{
			imImage
		},
		mixins:[chat],
		props: {
			img_arr1: { type: Array, default: ()=>[] }
		},
        data() {
            return {
                imageList:[],//图片
                src1:{},//视频存放
                sourceTypeIndex: 2,
                checkedValue:true,
                checkedIndex:0,
                sourceType: ['拍摄', '相册', '拍摄或相册'],
                cameraList: [{
                        value: 'back',
                        name: '后置摄像头',
                        checked: 'true'
                    },
                    {
                        value: 'front',
                        name: '前置摄像头'
                    },
                ],
                cameraIndex: 0,
                VideoOfImagesShow:true,
            }
        },
		watch: {
		  img_arr1: {
		    immediate: true, // 立即触发初始值
		    handler(newVal) {
		      if(newVal.length > 0) {
		        // this.handleImageLoad(newVal); // 你的业务逻辑
				newVal.forEach((res)=>{
					if(res.type==1){
						this.imageList.push(config.apiUrl+res.src)
					}else if(res.type==2){
						this.src1 = {url:config.apiUrl+res.src,poster:config.apiUrl+res.privacy};
						this.VideoOfImagesShow = false;
					}
				})
		      }
		    }
		  }
		},
        onUnload() {
            this.src1 = {},
            this.sourceTypeIndex = 2,
            this.sourceType = ['拍摄', '相册', '拍摄或相册'];
        },
        methods: {
            chooseVideoImage(){
				if(this.imageList.length>0){
					uni.showActionSheet({
					    title:"选择上传类型",
					    itemList: ['图片'],
					    success: (res) => {
					        console.log(res)
					        if(res.tapIndex == 0){
					            this.chooseImages()
					        } else {
					            this.chooseVideo()
					        }
					    }
					})
				}else{
					uni.showActionSheet({
					    title:"选择上传类型",
					    itemList: ['图片','视频'],
					    success: (res) => {
					        console.log(res)
					        if(res.tapIndex == 0){
					            this.chooseImages()
					        } else {
					            this.chooseVideo()
					        }
					    }
					})
				}
            },
			playVideoFullscreen(){
				// 创建视频上下文
				const videoContext = uni.createVideoContext('myVideo')
				
				// 进入全屏
				videoContext.requestFullScreen({direction: 0});
			},
            chooseImages(){
                // 上传图片
                uni.chooseImage({
                    count: 9, //默认9
                    // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album','camera'], //从相册选择
                    success:(res)=> {
                        let igmFile = res.tempFilePaths;
						console.log(igmFile,'123');
						// 计算还能添加多少张（最多9张）
						const remainingSlots = 9 - this.imageList.length;
						if (remainingSlots <= 0) {
						    uni.showToast({ title: '最多上传9张图片', icon: 'none' });
						    return;
						}
						
						// 只处理剩余可添加的数量
						const filesToUpload = igmFile.slice(0, remainingSlots);
						
						filesToUpload.map(fileurl => {
							uni.uploadFile({
							    url:config.apiUrl+'/common/upload/uploadPosts',
							    method:"POST",
							    header:{
							        'Authorization':uni.getStorageSync('authToken')
							    },
							    filePath:fileurl,
							    name:'file',
							    success: (res) =>{
							        let imgUrls = JSON.parse(res.data); //微信和头条支持
									imgUrls.data.forEach((item)=>{
										if (this.imageList.length < 9) {
										    this.imageList = this.imageList.concat(item.url);
										}
									})
									this.$emit('send',this.imageList)
							        if(this.imageList.length>=9) {
							            this.VideoOfImagesShow = false;
							        } else {
							            this.VideoOfImagesShow = true;
							        }
							    }
							})
						})
                    },
                });
            },
            chooseVideo(){
                // 上传视频
                uni.chooseVideo({
                    maxDuration:60,
                    count: 9,
                    camera: this.cameraList[this.cameraIndex].value,
                    sourceType: ['album', 'camera'],
                    success: (responent) => {
                        let videoFile = responent.tempFilePath;
                        uni.uploadFile({
                            url:config.apiUrl+'/common/upload/uploadPosts',
                            method:"POST",
                            header:{
                                'Authorization':uni.getStorageSync('authToken')
                            },
                            filePath:videoFile,
                            name:'file',
                            success: (res) => {  
                                let videoUrls = JSON.parse(res.data) //微信和头条支持
								// console.info(videoUrls,'12345');
                                // let videoUrls = res.data //百度支持
                                // this.imagesUrlPath = this.imagesUrlPath.concat(videoUrls);
                                this.src1 = videoUrls.data[0]; //微信
								this.$emit('videourl',this.src1)
                                if(this.src1.url) {
                                    this.itemList = ['图片']
									this.VideoOfImagesShow = false;
                                } else {
                                    this.itemList = ['图片','视频']
                                }
                                
                            }
                        })
                        // this.src = responent.tempFilePath;  //头条
                    }
                })
            },
            previewImage(e) {
                //预览图片
                var current = e.target.dataset.src
                uni.previewImage({
                    current: current,
                    urls: [current]
                })
            },
            delect(index){
                uni.showModal({
                    title: "提示",
                    content: "是否要删除该图片",
                    success: (res) => {
                        if (res.confirm) {
                            this.imageList.splice(index, 1)
							if(this.imageList.length>=9) {
							    this.VideoOfImagesShow = false;
							} else {
							    this.VideoOfImagesShow = true;
							}
                        }
                    }
                })
            },
            delectVideo(){
                uni.showModal({
                    title:"提示",
                    content:"是否要删除此视频",
                    success:(res) =>{
                        if(res.confirm){
                            this.src1 = {}
							this.VideoOfImagesShow = true;
                        }
                    }
                })
            }
        }
    }
</script>
 
<style scoped>
.burst-wrap{
    width: 100%;
    height: 100px;
	margin-top: 20px;
}
/* .burst-wrap .burst-wrap-bg{
    position: relative;
    width: 100%;
    height: 320rpx;
    background:linear-gradient(90deg,rgba(251,91,80,1) 0%,rgba(240,45,51,1) 100%);
    border-bottom-right-radius: 80rpx;
    border-bottom-left-radius: 80rpx;
} */
.burst-wrap .burst-wrap-bg>view{
    width: 100%;
    height: 100%;
   /* margin: 0 auto;
    position: absolute;
    top: 65rpx;
    left: 0;
    right: 0; */
}
 
.form-item{
    width: 100%;
}
.form-item textarea{
    display: block;
    height: 220rpx;
    width: 100%;
    color: #AAAAAA;
    font-size: 28rpx;
}
.uni-uploader__files{
	display: flex;
	flex-wrap: wrap;
}
.uni-uploader__file{
	z-index: 999;
	width: 160rpx;
	height: 160rpx;
	margin-right: 6px;
	margin-top: 5px;
	position: relative;
}
.uploader_video{
    width: 160rpx;
    height: 160rpx;
	margin-right: 6px;
}
.uni-uploader__img {
    width: 160rpx;
    height: 160rpx;
}
.icon-cuo {
    top: 5rpx;
    right: 5px;
	width: 20px;
	height: 20px;
    z-index: 999;
    /* color: #FFFFFF; */
    position: absolute;
	border-radius: 20px;
    /* background: linear-gradient(90deg,rgba(209, 209, 209, 1.0) 0%,rgba(209, 209, 209, 1.0) 100%); */
}
.video{
    width: 100%;
    height: 100%;
	position: absolute;
	z-index: -1;
}
 
.login-input-box{
    position: relative;
    border-bottom: 1rpx solid #EEEEEE;
}
.login-input-box .forget,.login-input-box .phone{
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 100;
}
.login-input-box .phone{
    width: 100rpx;
    left: 0;
    color: #666666;
    font-weight: bold;
}
.login-input-box .phone-input{
    padding-left: 100rpx;
}
.address-wrap,.open-info{
    margin-top: 20rpx;
}
.open-info>view:last-child{
    font-size: 28rpx;
    color: #999999;
}
.address-wrap .address {
    background: #F2F2F2;
    border-radius: 40rpx;
    padding: 0 20rpx;
}
.user-set-btn{
    margin: 40rpx;
    background: linear-gradient(90deg,rgba(251,91,80,1) 0%,rgba(240,45,51,1) 100%);
    color: #FFFFFF;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
}
.uni-uploader__input-box{
	width: 160rpx;
	height: 160rpx;
	margin-top: 5px;
}
.uni-uploader__input{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ebebeb;
}
.closeempty_icons{
	display: flex;
	line-height: 20px;
	justify-content: center;
}
.course-video{
	overflow: hidden;
	position: relative;
}
.relative-shadow{
	z-index:1;
	width:100%;
	height:100%;
	height: 240px;
	display: flex;
	position: absolute;
	align-items: center;
	justify-content: center;
}
</style>