<template>
    <view class="img-wrap">
        <uni-grid :column="4" :highlight="true" :show-border="false">
            <uni-grid-item v-for="(item, index) in list" :key="index" :index="index">
                <view class="grid-item-box" style="height: 100%;position: relative;">
                    <image :src="iconpath" mode="widthFix"
                           style="position: absolute;top:4px;right:4px;width:24px;height:24px;z-index:9" @tap="delimage(index)"></image>
                    <image v-if="item.type === 'image'" :src="item.url" mode="scaleToFill" style="height: 100%"
                           @tap="previewImage(item.url)"/>
                    <video v-else-if="item.type === 'video'" :id="`video_${index}`" :src="item.url"
                           style="width: 100%;height: 100%" @fullscreenchange="fullscreenchange" @play="playVideo(index)"
                           @tap="playVideo(index)"></video>
                </view>
            </uni-grid-item>
            <uni-grid-item>
                <view class="grid-item-box" style="height: 100%">
                    <view class="grid-item-box-add" @tap="chooseVideoImage">
                        <uni-icons color="#eae8eb" size="30" type="plusempty"></uni-icons>
                        <!-- <text>添加视频或图片</text> -->
                    </view>
                </view>
            </uni-grid-item>
        </uni-grid>
        <view style="font-size: 12px;color: #999999">
          请上传 大小不超过 <text style="color: #ff3333;">50MB</text><br>
          格式为<text style="color: #ff3333;">png/jpg/jpeg/mp4/m4v</text>的文件
        </view>
    </view>
</template>

<script>
import iconpath from "@/static/images/close.png";
import {updateImg} from "@/api/system";
import {warehousePictureCreate} from "@/pages/loading/api";

export default {
    props: {
        value: {
            type: Array,
            default: () => {
                return []
            }
        },
        bizId: {
            type: Number,
            default: undefined
        },
        type: {
            type: Number,
            default: undefined
        }
    },
    data() {
        return {
            iconpath,
            list: []
        }
    },
    mounted() {
        this.list = this.value
    },
    methods: {
        warehousePictureCreate(url){
            if (this.bizId && this.type) {
                return warehousePictureCreate({
                    bizId: this.bizId,
                    type: this.type,
                    url
                })
            }
        },
        delimage(index){
            this.$emit('delete', this.list[index].url)
            this.list.splice(index,1)
        },
        fullscreenchange(event) {
            // if (uni.getSystemInfoSync().platform == "ios") { return }
            if (!event.detail.fullScreen) {
                // this.videoContext.pause()
            }
        },
        playVideo(index) {
            setTimeout(() => {
                this.videoContext = uni.createVideoContext(`video_${index}`)
                // this.videoContext.play()
                // this.videoContext.requestFullScreen()
            }, 500)
        },
        chooseVideoImage() {
            uni.showActionSheet({
                title: this.$t('选择上传类型'),
                itemList: [this.$t('图片'), this.$t('视频')],
                success: res => {
                    if (res.tapIndex == 0) {
                        this.chooseImages(true);
                    } else {
                        this.chooseVideo();
                    }
                }
            });
        },
        previewImage(url) {
            //uniapp预览轮播图
            uni.previewImage({
                current: 0, //预览图片的下标
                urls: [url] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
            })
        },
        chooseImages(flag) {
            uni.chooseImage({
                count: 9, //默认是9张
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], //从相册选择
                success: res => {
                    // let imgFile = res.tempFilePaths;
                    res.tempFilePaths.forEach((item, index) => {
                        updateImg(item).then(data => {
                            this.warehousePictureCreate(data.data)
                            if (flag) {
                                this.list.push({ type: 'image', url: data.data })
                            } else {
                                // this.exceptionList.push({ url: data.data })
                                this.$set(this.exceptionList, this.exceptionList.length, { url: data.data })
                            }
                        })
                    })
                }
            })
        },

        //上传视频
        chooseVideo(index) {
            uni.chooseVideo({
                maxDuration: 60, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
                count: 9,
                // camera: this.cameraList[this.cameraIndex].value, //'front'、'back'，默认'back'
                // sourceType: sourceType[this.sourceTypeIndex],
                success: res => {
                    let videoFile = res.tempFilePath;
                    // res.tempFilePaths.forEach((item, index) => {
                    updateImg(videoFile).then(data => {
                        this.list.push({ type: 'video', url: data.data })
                    })
                    // })
                },
                fail:(error)=>{
                    uni.hideLoading();
                    uni.showToast({
                        title: error,
                        icon: 'none'
                    })
                }
            })
        },
    }

}
</script>

<style lang="scss" scoped>

.img-wrap {
    ::v-deep .uni-grid-item {
        background: #fbf8fb;
    }
    .grid-item-box-add {
        height: 100%;
        display: flex;
        flex-flow: column;
        font-size: 10px;
        padding: 16px 0;
        text-align: center;
        justify-content: center;
    }
}
</style>
