<template>
    <view class="commitDocument">
        <view>
            <view v-if="auditStatus == 0 || auditStatus == 2" class="checkBox" :style="{
                color: auditStatus === 2 ? '#F53F3F' : '#FF7D00',
                background: auditStatus === 2 ? '#FFF5F5' : '#FFF8EC'
            }">
                <view style="display: flex;align-items: center;justify-content: space-between;">
                    <view class="checkStatus">
                        <image :src="auditStatus == 0 ? '/static/login/status1.png' : '/static/login/status2.png'"
                            mode="" style="width: 32rpx;height: 32rpx;margin-right: 8rpx;">
                        </image>
                        {{ auditStatus == 2 ? '审核驳回' : '审核中' }}
                    </view>
                    <view class="contactCustomer" :style="{
                        border: auditStatus === 2 ? '1px solid #F53F3F' : '1px solid #FF7D00',
                    }">联系客服</view>
                </view>

                <view class="text">{{ auditStatus == 2 ? '审核驳回' : '审核中' }}，审核结果将会在X-X个工作日通知您</view>
            </view>
            <view class="content">
                <view class="title">承诺书</view>
                <view class="tip">请上传 大小不超过 2MB 格式为 jpg/jpeg/png 的文件</view>
                <Upload :maxCount="9" @fileList="onUpload($event, 'commitment')" :fileList="commitment" :width="76"
                    :height="76">
                    <view class="upload-block" slot="content">
                        <view class="icon-bg">
                            <image src="/static/login/cameraIcon.png" mode="widthFix"
                                style="width: 52rpx;height: 52rpx;">
                            </image>
                            <view style="font-weight: 400;font-size: 26rpx;color: #C9CDD4;margin-top: -13rpx;">上传</view>

                        </view>

                    </view>


                </Upload>
            </view>
            <view class="content">
                <view class="title">承诺录音</view>
                <view class="tip">请上传 大小不超过 10MB 格式为 mp3/wav/wma/m4a 的文件</view>
                <view class="media-area">
                    <view v-if="formData.audioUrl">
                        <view class="icon iconfont icon-cuo">
                            <image src="/static/login/close2.png" mode="" style="width: 32rpx;height: 32rpx;"
                                @tap="delectAudio">
                            </image>
                        </view>
                        <audio :src="formData.audioUrl" class="audio-container" controls></audio>
                    </view>
                    <clUpload v-else :fileList="recording" :action="uploadApi" :headers="headers" :count="maxCount"
                        :listStyle="{
                            columnGap: '20rpx',
                            rowGap: '20rpx',
                            width: '130rpx',
                            radius: '12rpx',
                        }" :imageFormData="{
                        count: 9,
                        size: 2,
                    }" :audioFromData="{
                            count: 1,
                            size: 10,
                        }" :maxAudio="1" :fileType="mediaType" addImg="/static/login/cameraIcon.png"
                        deleteImg="/static/login/cameraIcon.png" @onSuccess="onSuccess"
                        @onMediaTypeSelect="selectMediaType" @onError="onCancel">


                    </clUpload>
                </view>

            </view>
            <view class="content">
                <view class="title">承诺录像</view>
                <view class="tip">请上传 大小不超过 50MB 格式为 mp4/mov/mkv/wmv 的文件</view>

                <view class="media-area">
                    <view v-if="formData.videoUrl">
                        <!-- <uni-icons class="icon iconfont icon-cuo" type="trash-filled" size="20"
                            @tap="delectVideo"></uni-icons> -->
                        <view class="icon iconfont icon-cuo">
                            <image src="/static/login/close2.png" mode="" style="width: 32rpx;height: 32rpx;"
                                @tap="delectVideo">
                            </image>
                        </view>

                        <video ref="myVideo" :src="formData.videoUrl" class="video-container" controls></video>
                    </view>
                    <clUpload v-else :fileList="videoRecording" :action="uploadApi" :headers="headers" :count="maxCount"
                        :listStyle="{
                            columnGap: '20rpx',
                            rowGap: '20rpx',
                            width: '130rpx',
                            radius: '12rpx',
                        }" :imageFormData="{
                            count: 9,
                            size: 2,
                        }" :videoFromData="{
                            count: 1,
                            size: 50,
                        }" :maxVideo="1" :fileType="mediaType" addImg="/static/login/cameraIcon.png"
                        deleteImg="/static/login/cameraIcon.png" @onSuccess="onSuccess"
                        @onMediaTypeSelect="selectMediaType" @onError="onCancel">


                    </clUpload>
                </view>
            </view>

            <view class="footer-bar" v-if="auditStatus != 0">
                <u-button :customStyle="{
                    padding: '24rpx 48rpx',
                    color: '#fff',
                    background: 'var(--theme-color-gradient)',
                    width: '654rpx',
                    height: '88rpx',
                    background: '#333335',
                    borderRadius: '60rpx 60rpx 60rpx 60rpx',
                }" @click="onSubmit">保存</u-button>
            </view>
        </view>
    </view>
</template>

<script>
import clUpload from '@/components/cl-upload/cl-upload/cl-upload.vue'
import Upload from '@/components/upload/index.vue';
import { initWechatSDKWithRecorder, wechatRecorder } from '@/utils/wechat';
import { baseUrl } from '@/common/config.js'

export default {
    components: { Upload, clUpload, },
    data() {
        return {
            auditStatus: 1,
            isRecording: false,
            localId: null,
            serverId: null,

            headers: {
                Authorization: `tf: ${uni.getStorageSync('access-token')}`,
            },
            uploadApi: baseUrl + '/common/upload', // 默认使用图片上传接口
            videoUrl: '',
            audioUrl: '',
            audioCoverUrl: '',
            fileList: [],
            fileList1: [],
            formData: {
                title: '',
                content: '',
                location: '',
                address: '',
                latitude: '',
                longitude: '',
                visibleRange: '',
                videoUrl: '',
                videoCoverUrl: '',
                imageUrls: [],
                audioUrl:''
            },
            mediaType: 'all', // 默认为图片模式，上传第一个文件后确定类型
            uploadApi: baseUrl + '/common/upload', // 默认使用图片上传接口
            fieldName: '',
            commitment: [],
            recording: [],
            videoRecording: [],
        }
    },
    computed: {
        maxCount() {
            return this.mediaType === 'video' ? 1 : 9
        },
    },

    onLoad(query) {
        console.log(query,'query')
        if (query.fieldName) this.fieldName = query.fieldName
        if (query.fieldVal) {
            let fieldVal = JSON.parse(query.fieldVal)
            this.commitment = fieldVal[0] ? fieldVal[0] : []
            this.recording = fieldVal[1] ? fieldVal[1] : []
            if(this.recording.length){
                this.formData.audioUrl = this.recording[0].url
            }
            this.videoRecording = fieldVal[2] ? fieldVal[2] : []
            if (this.videoRecording.length > 0) {
                this.formData.videoUrl = this.videoRecording[0].url
                this.formData.videoCoverUrl = this.videoRecording[0].coverUrl
            }
            if (query.auditStatus) this.auditStatus = Number(query.auditStatus)       
           
        }
    },
    onReady() {

    },
    onShow() {
    },
    beforeUnmount() {
        this.stopDurationTimer();
    },
    methods: {

        onSuccess(reslut, tempFile) {
            console.log(reslut, tempFile)
            // 把服务端返回的图片地址添加到list中与组件数据同步
            if (reslut.code === 200) {
                const isVideo =
                    reslut.url.endsWith('.mp4') ||
                    reslut.url.endsWith('.mov') ||
                    reslut.url.endsWith('.mkv') ||
                    reslut.url.endsWith('.wmv')
                const isAudio =
                    reslut.url.endsWith('.mp3') ||
                    reslut.url.endsWith('.wav') ||
                    reslut.url.endsWith('.aac') ||
                    reslut.url.endsWith('.m4a')
                if (isVideo) {
                    this.formData.videoUrl = baseUrl + reslut.url
                    this.formData.videoCoverUrl = baseUrl + reslut.coverUrl
                    this.videoRecording = [{
                        url: baseUrl + reslut.url,
                        contentType: tempFile.tempFile.type,
                        size: tempFile.size,
                        coverUrl: baseUrl + reslut.coverUrl,
                    }]
                } else if (isAudio) {
                    this.formData.audioUrl = baseUrl + reslut.url
                    this.recording = [{
                        url: baseUrl + reslut.url,
                        contentType: tempFile.type,
                        size: tempFile.size,
                    }]
                } else {
                    this.fileList.push(baseUrl + reslut.url)
                }
            } else {
                this.mediaType = 'all'
            }
        },
        // 确定媒体类型
        selectMediaType(type) {
            if (type === 'image') {
                this.uploadApi = baseUrl + '/common/uploads'
                this.mediaType = 'image'
            } else if (type === 'video') {
                this.uploadApi = baseUrl + '/common/uploadVi'
                this.mediaType = 'video'
            } else if (type === 'audio') {
                this.uploadApi = baseUrl + '/common/uploadVi'
                this.mediaType = 'audio'
            }
        },
        // 处理媒体类型取消事件
        onCancel() {
            this.uploadApi = baseUrl + '/common/uploads'
            this.mediaType = 'all'
        },
        delectVideo() {
            uni.showModal({
                title: '提示',
                content: '是否要删除此视频',
                success: res => {
                    if (res.confirm) {
                        this.formData.videoUrl = ''
                        this.formData.videoCoverUrl = ''
                        this.videoRecording = []
                        // 重置媒体类型
                        this.mediaType = 'all'
                    }
                },
            })
        },
        delectAudio() {
            uni.showModal({
                title: '提示',
                content: '是否要删除此音频',
                success: res => {
                    if (res.confirm) {
                        this.recording = []
                        this.formData.audioUrl = ''
                        this.$set(this.formData, 'audioUrl', '')
                        // 重置媒体类型
                        this.mediaType = 'all'
                        console.log(this.formData,'this.formData')
                    }
                },
            })
        },

        // upload事件
        onUpload(e, t) {
            this[t] = e;
        },
        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]
            console.log(prevPage.$data.baseInfo, '99999999999999')
            uni.navigateBack()
        }

    }
}
</script>

<style scoped lang="scss">
::v-deep .audio-container {
    width: 100%;
    
}
::v-deep .uni-audio-default{
        min-width: 340rpx!important;
    }

.commitDocument {
    height: 100vh;
    background-color: #F7F8FA;
    /* 添加以下属性修复文字模糊 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    backface-visibility: hidden;
    transform-style: flat;


    .checkBox {
        padding: 30rpx 32rpx 24rpx 32rpx;
        height: 134rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;

        //color: #FF7D00;
        .checkStatus {
            font-weight: 500;
            font-size: 30rpx;
            text-align: left;
            display: flex;
            align-items: center;

        }

        .contactCustomer {
            width: 144rpx;
            height: 44rpx;
            border-radius: 24rpx 24rpx 24rpx 24rpx;

            font-weight: 400;
            font-size: 26rpx;
            text-align: center;

        }

        .text {
            margin-top: 8rpx;
            font-weight: 400;
            font-size: 26rpx;
            text-align: left;
        }
    }


    .content {
        background-color: #fff;
        padding: 32rpx;
        margin-bottom:16rpx ;
       

        .upload-block {
            width: 160rpx;
            height: 160rpx;
            background-color: #F7F8FA;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 12rpx;
        }

        .title {
            font-weight: 500;
            font-size: 30rpx;
            color: #1D2129;
        }

        .tip {
            margin-top: 16rpx;
            font-weight: 400;
            font-size: 26rpx;
            color: #86909C;
            margin-bottom: 16rpx;
        }
    }

}

/* 身份证上传样式 */
.id-upload-row {
    gap: 10rpx;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
}

::v-deep .file-list-row {
    width: 160rpx;
    height: 160rpx;
    background: #F7F8FA;
    border-radius: 12rpx;

    .add-image {
        border: none !important;
    }
}

::v-deep .u-upload__success {
    display: none;
}
 ::v-deep .u-upload__wrap__preview{
    margin: 0 16rpx 0 0;
            
}

::v-deep .u-upload__wrap__preview__image {
    border-radius: 12rpx !important;
}

::v-deep .u-upload__deletable {
    border-top-right-radius: 12rpx;
    border-bottom-left-radius: 12rpx;

}

::v-deep .u-upload__deletable__icon {
    // position: static !important;
    // -webkit-transform: scale(0.8) !important;
    position: static !important;
    width: 80%; // 使用宽度缩放代替 transform
    height: 80%;

}

.media-area {
    margin: 20rpx 0 0 0;
    justify-content: space-between;
    position: relative;
    width: 340rpx;

    .icon-cuo {
        background-color: #0000009c;
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        right: 0;
        top: 0;
        color: #f80000 !important;
        z-index: 999;
        border-bottom-left-radius: 12rpx;
        border-top-right-radius: 12rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }



    .video-container {
        width: 340upx;
        height: 240upx;
        border-radius: 12rpx;
    }
}
</style>
