<template>
	<view class="padding-lr-lg" style="padding-top:48rpx;">
		<view style="background:#FFFFFF;border-radius:16rpx;overflow:hidden;" class="_video ">
			<view class="flex flex-direction align-center justify-center" style="border: 1px dashed #FFDBD2;width:100%;height:100%;" @tap="uploadCoverShow=true" v-if="!hasFaceUrl">
				<img style="width: 64rpx;height:64rpx;" src="../../static/main/add-icon.png">
				<text style="color:#999999;font-size: 30rpx;margin-top:24rpx;">上传视频封面</text>
			</view>
			<img v-if="hasFaceUrl" :src="videoMsg.videoFaceUrl" alt="" class="image-box ">

			<view class="mask-box flex flex-direction align-center justify-center" v-if="hasFaceUrl" @tap.stop="uploadCoverShow=true">
				<img style="width: 32rpx;height:32rpx;" src="../../static/main/change-icon.png">
				更换视频封面
			</view>
			
		</view>
        <view style="" class="font-30 color-99 text-center margin-top-sm">建议格式支持jpg，png, 图片清晰，像素不小于1090x545像素</view>

		<view class="btn-box flex justify-center">
		    <view class="btn" :class="hasFaceUrl?'comitBtn':''" @tap.stop="addVideo()" v-if="!isEdit">确认上传</view>
		    <view class="btn" :class="hasFaceUrl?'comitBtn':''" @tap.stop="editVideo()" v-else>确认上传</view>
		</view>

		<com-select-picture :show="uploadCoverShow" :length="1" @addProperties="chooseImageSuccess" @cancelSheet="cancelSheetClick" chooseUploadFileType='image'></com-select-picture>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uploadCoverShow: false,
				hasFaceUrl: false,
				videoMsg: {
					videoFaceUrl: "",
				},
                isEdit: false,
			}
		},
        onLoad(options) {
            if(options.isEdit=='add') {
                this.isEdit = false
            } else {
                this.isEdit = true
            }
            let videoData = uni.getStorageSync('uploadVideo')
			// console.log(videoData)
			this.videoMsg = Object.assign(this.videoMsg,videoData)
			
			this.hasFaceUrl = !this.$isNull(this.videoMsg.videoFaceUrl)
        },
		methods: {
			chooseImageSuccess(url) {
				// console.log(url)
				this.videoMsg.videoFaceUrl = url
				this.hasFaceUrl = true
                this.$forceUpdate()
			
			},
			cancelSheetClick() {
				this.uploadCoverShow = false;
			},
			addVideo() {
				if(!this.hasFaceUrl) return;
				let obj = JSON.parse(JSON.stringify(this.videoMsg));
				// console.log(obj)
				this.$u.api.addServerVideo(obj).then(res => {
                    console.log(res,'add')
                    if(res.code==200) {
                        uni.navigateTo({
                            url: '/pages/video/videoList?isBack=back'
                        })
                    }
                }).catch(err => {
                    console.log(err)
                })
			},
            editVideo() {
				if(!this.hasFaceUrl) return;
				let obj = JSON.parse(JSON.stringify(this.videoMsg));
                // console.log(obj)
				this.$u.api.editServerVideo(obj).then(res => {
                    console.log(res,'edit')
                    if(res.code==200) {
                        uni.navigateTo({
                            url: '/pages/video/videoList?isBack=back'
                        })
                    }
                }).catch(err => {
                    console.log(err)
                })
			}
		}
	}
</script>


<style lang='scss' scoped>

._video, .image-box, .mask-box {
	width: 670rpx;
	height: 400rpx;
}
._video {
	position: relative;
}
.mask-box {
	position: absolute;
	left: 0;
	top: 0;
	background: rgba($color: #4A4A4A, $alpha: 0.5);
	color: #fff;
	font-size: 30rpx;
}
.btn-box {
	position: fixed;
	top: 650rpx;
	left: calc(50% - 300rpx);
    /* margin-top: 43rpx; */
    padding-bottom: 40rpx;
    .btn {
        width: 600rpx;
        height: 90rpx;
        color: #FFFFFF;
        line-height: 90rpx;
        text-align: center;
        font-size: 32rpx;
        background: #E0E0E0;
        border-radius: 46rpx;

    }
	.comitBtn {
		background: linear-gradient(160deg, #FF6E47 0%, #FF4E1F 100%);
	}
}
</style>
