<template>
    <view class="diy-form-uvideo dir-top-nowrap" :style="[boxStyle]">
        <view class="_diy-form-label"
              :style="{ color: data.title_color}"
              :class="{required: data.is_required}">
            {{ data.title }}
        </view>
        <view class="dir-left-wrap cross-center"
              :style="[uploadStyle]">
            <view
                v-for="(image,index) of videoList" :key="index"
                @click="playVideo(image)"
                class="ordinary-pic img-list dir-left-nowrap cross-center main-center"
                :style="{backgroundColor: data.icon_bg_color}">
                <image :src="appImg.uimage_close" class="close" @click.stop="delImage"></image>
                <video :src="image" class="img"
                       :show-center-play-btn="false"
                       :show-loading="false"
                       :enable-progress-gesture="false"
                       :show-play-btn="false"
                       :controls="false"
                ></video>
                <view class="play-btn">
                    <view></view>
                </view>
            </view>
            <view
                v-if="videoList.length < data.max_num"
                @click="chooseImage(-1)"
                class="ordinary-pic dir-left-nowrap cross-center main-center"
                :style="{backgroundColor: data.icon_bg_color}">
                <image :src="appImg.uvideo_photo"></image>
            </view>
            <view class="ordinary-text" v-if="!videoList || !videoList.length"
                  :style="{color: data.place_color}">
                最多上传{{ data.max_num }}个
            </view>
        </view>
    </view>
</template>

<script>
import {mapState} from "vuex";

export default {
    name: 'diy-form-uvideo',
    props: {
        index: [Number, String],
        value: {
            type: Object
        }
    },
    computed: {
        ...mapState({
            appImg: state => state.mallConfig.plugin.diy.app_image,
        }),
        boxStyle() {
            let {
                bg_color,
                box_padding,
            } = this.data;
            return {
                backgroundColor: bg_color,
                padding: `20rpx ${box_padding}rpx`,
            }
        },
        uploadStyle() {
            let {
                border_color,
                pd_color,
            } = this.data;
            return {
                borderWidth: '1px',
                borderStyle: 'solid',
                borderColor: border_color ? border_color : pd_color,
                backgroundColor: pd_color,
                borderRadius: '12rpx',
                padding: '16rpx 44rpx 0 3rpx',
            };
        },
    },
    data() {
        return {
            videoList: [],
            data: {
                is_required: 0,
                title: '上传视频',
                min_num: 1,
                max_num: 1,
                box_padding: 24,
                pd_color: '#F1F5F8',
                border_color: '#F1F5F8',
                title_color: '#545B60',
                place_color: '#545B60',
                icon_bg_color: '#FFFFFF',
                bg_color: '#FFFFFF',
            }
        }
    },
    created() {
        this.data = this.value
    },
    methods: {
        playVideo(video) {
            this.$emit('show', {
                video: video,
            })
        },
        validateRules() {
            let {min_num, max_num, is_required} = this.data;
            let length = this.videoList;
            if (is_required == 0) {
                return true;
            }
            if (length < min_num) {
                throw new Error(`最少上传${min_num}张视频`);
            }
            if (length > max_num) {
                throw new Error('最多上传${max_num}张视频');
            }
            return true;
        },
        videoEvent() {
            this.$emit('updateValue', {
                index: this.index,
                value: this.videoList,
            });
        },
        delImage(index) {
            this.videoList.splice(index, 1);
            this.videoEvent();
        },
        // 上传
        chooseImage(addIndex) {
            let self = this;
            let {
                videoList,
            } = self;

            uni.chooseVideo({
                count: 1,
                success: function (e) {
                    console.log(e);
                        let fileName = '';
                        // #ifdef MP-BAIDU
                        fileName = e.tempFilePath.substr(e.tempFilePath.lastIndexOf('/') + 1);
                        // #endif
                        uni.uploadFile({
                            url: self.$api.upload.file,
                            filePath: e.tempFilePath,
                            name: 'file',
                            fileType: 'mp4',
                            formData: {
                                file: e.tempFilePath,
                                file_name: fileName,
                            },
                            success(res) {
                                const data = res.data;
                                let result = null;
                                if (typeof data === 'string') {
                                    result = JSON.parse(data);
                                } else {
                                    result = data;
                                }
                                if (result.code == 0) {
                                    let num = addIndex > self.videoList.length ? addIndex - self.videoList.length : 0;
                                    let paras = new Array(num).concat(result.data.url);
                                    self.videoList.splice(addIndex, self.videoList[addIndex] ? 1 : 0, ...paras);
                                    self.videoEvent();
                                } else {
                                    uni.showModal({
                                        title: '',
                                        content: result.msg,
                                        showCancel: false,
                                    });
                                }
                            },
                            fail(e) {
                                if (e && e.errMsg) {
                                    uni.showModal({
                                        title: '错误',
                                        content: e.errMsg,
                                        showCancel: false,
                                    });
                                }
                            },
                        });

                },
                complete: function (e) {
                    self.videoEvent();
                }
            })
        },
    }
}
</script>

<style scoped lang="scss">
._diy-form-label {
    padding-left: #{20rpx};
    font-size: #{30rpx};
    white-space: nowrap;
    margin-bottom: #{18rpx};
}

._diy-form-label.required:after {
    content: '*';
    margin-left: 6#{rpx};
    color: #FF4544;
}

.diy-form-uvideo {
    .idcard-photo {
        height: 60#{rpx};
        width: 60#{rpx};
        display: block;
    }

    .ordinary-pic {
        height: 100#{rpx};
        width: 100#{rpx};
        border-radius: 10#{rpx};
        margin: 10#{rpx} 17#{rpx} 28#{rpx};

        > image {
            height: 60#{rpx};
            width: 60#{rpx};
            display: block;
        }
    }

    .ordinary-pic.img-list {
        position: relative;

        .close {
            position: absolute;
            top: -18#{rpx};
            right: -18#{rpx};
            height: 36#{rpx};
            width: 36#{rpx};
            display: block;
            z-index: 10;
        }

        .play-btn {
            position: absolute;
            border-radius: 50%;
            width: 60#{rpx};
            height: 60#{rpx};
            background: #242424;
            opacity: 0.5;

            view {
                margin-top: 18#{rpx};
                margin-left: 18#{rpx};
                width: 0;
                height: 0;
                border-left: 18#{rpx} solid transparent;
                border-right: 18#{rpx} solid transparent;
                border-bottom: 24#{rpx} solid white;
                font-size: 0;
                line-height: 0;
                transform: rotate(90deg);
            }
        }

        .img {
            height: 100%;
            width: 100%;
            border-radius: inherit;
        }
    }

    .ordinary-text {
        margin-left: auto;
        color: #545B60;
        margin-bottom: #{16rpx};
        font-size: 24#{rpx};
    }
}
</style>