<template>
    <view>
        <view class="images">
            <view>承诺书
                <view>请上传 大小不超过 10MB 格式为 pdf/jpg/jpeg/png 的文件</view>
                <Upload accept="file" :maxSize="10240" :maxCount="2" @fileList="onUpload($event, 'commitment')" :fileList="commitment"/>
            </view>
            <view>承诺录音
                <view>请上传 大小不超过 10MB 格式为 mp3/wav/wma 的文件</view>
                <Upload accept="file" :maxSize="10240" :maxCount="2" @fileList="onUpload($event, 'recording')" :fileList="recording"/>
            </view>
            <view>承诺录像
                <view>请上传 大小不超过 50MB 格式为 mp4/mov/mkv/wmv 的文件</view>
                <Upload accept="file" :maxSize="51200" :maxCount="2" @fileList="onUpload($event, 'videoRecording')"  :fileList="videoRecording"/>
            </view>

            <view class="footer-bar">
                <u-button shape="circle" :customStyle="{
                    color: '#fff',
                    background: 'var(--theme-color-gradient)'
                }" @click="onSubmit">确认修改</u-button>
            </view>
        </view>
    </view>
</template>

<script>

import Upload from '@/components/upload/index.vue';

export default {
    components: { Upload },
    data() {
        return {
            fieldName: '',
            commitment: [],
            recording: [],
            videoRecording: [],
        }
    },

    onLoad(query) {
        console.log(query)
        if (query.fieldName) this.fieldName = query.fieldName
        if (query.fieldVal) {
            let fieldVal = JSON.parse(query.fieldVal)
            console.log(fieldVal,'fieldVal')
            this.commitment = fieldVal[0] ? fieldVal[0] : []
            this.recording = fieldVal[1] ? fieldVal[1] : []
            this.videoRecording = fieldVal[2] ? fieldVal[2] : []
        }

        console.log(this.commitment, 'query')
        console.log(this.recording, 'query')
        console.log(this.videoRecording, 'query')
        // console.log(this.title, 'query')
    },
    onReady() {

    },
    onShow() {
    },
    methods: {

        // upload事件
        onUpload(e, t) {
            this[t] = e;
            console.log(this[t])
        },
        goBack() {
            uni.navigateBack()
        },
        onSubmit() {
            // 获取页面栈
            const pages = getCurrentPages()
            // 上一页实例
            const prevPage = pages[pages.length - 2]
            // 直接修改上一页data里的字段
            prevPage.$data.baseInfo[this.fieldName] = [this.commitment, this.recording, this.videoRecording]
            uni.navigateBack()
        }

    }
}
</script>

<style scoped lang="scss">
/* 身份证上传样式 */
.id-upload-row {
    gap: 10rpx;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
}

.upload-block {
    // width: 100%;
    height: 220rpx;
    background-color: #f9f9f9;
    border-radius: 12rpx;
    border: 1rpx dashed #eee;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;

    &.full-width {
        width: 100%;
        height: 240rpx;
    }

    .icon-bg {
        width: 60rpx;
        height: 60rpx;
        background-color: #00cba3;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16rpx;
    }

    .up-text {
        font-size: 24rpx;
        color: #666;
    }
}
</style>
