<template>
    <view class="lifePhotosEdit">
        <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="u-cell-group">
            <!-- <Upload :maxCount="1" @fileList="onUpload($event, 'cImgList')" /> -->
            <Upload v-if="title != '宣传视频'" :accept="title == '宣传视频' ? 'video' : 'image'" :maxCount="maxCount"
                :width="76" :height="76" @fileList="onUpload" :fileList="fileList">
                <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 v-if="title == '宣传视频'" class="media-area">
                <view v-if="videoUrl">
                    <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="videoUrl" class="video-container" controls></video>
                </view>
                <clUpload v-else :fileList="fileList" :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('video')" @onError="onCancel">


                </clUpload>
            </view>

            <view class="tagText" v-if="title == '生活照'">简单介绍自己的生活照，可以说说自己的基本信息，工作场景，等等;
                或者上传自己清晰露脸半身照/全身照/工作照。最多上传{{ maxCount }}张</view>
            <view class="tagText" v-if="title == '宣传视频'">请上传 大小不超过 50MB 格式为 mp4/mov/mkv/wmv 的文件</view>
            <view class="tagText" v-if="title == '健康证' || title == '从业资格证' || title == '无犯罪证明'">请上传小于10MB的{{ title
            }}图片，最多上传{{ maxCount }}张
            </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 { baseUrl } from '@/common/config.js'

export default {
    components: { Upload, clUpload },

    data() {
        return {
            auditStatus: 1,
            headers: {
                Authorization: `tf: ${uni.getStorageSync('access-token')}`,
            },
            videoCoverUrl: '',
            videoUrl: '',
            fileList: [],
            fieldName: '',
            title: '',
            img: '/static/login/cameraIcon.png',
            mediaType: 'all', // 默认为图片模式，上传第一个文件后确定类型
            uploadApi: baseUrl + '/common/upload', // 默认使用图片上传接口
        }
    },
    computed: {
        maxCount() {
            return this.mediaType === 'video' ? 1 : 9
        },
    },

    onLoad(query) {
        console.log(query)
        if (query.fieldName) this.fieldName = query.fieldName
        if (query.fieldVal) {
            this.fileList = JSON.parse(query.fieldVal)

            if (this.fileList.length > 0 && this.fileList[0].type) {
                if (this.fileList[0].type.includes('video')) {
                    this.videoUrl = this.fileList[0].url
                    this.videoCoverUrl = this.fileList[0].coverUrl
                }
                // 找到第一个1/3就返回对应数值，找不到返回默认值0

            }
        }
        console.log(this.fileList)
        if (query.maxlength) this.maxlength = Number(query.maxlength)
        if (query.auditStatus) this.auditStatus = Number(query.auditStatus)
        if (query.title) this.title = query.title
    },
    onReady() {
        // 页面渲染完成后再设置标题
        uni.setNavigationBarTitle({
            title: this.title
        })
    },
    onShow() {
    },
    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')
                if (isVideo) {
                    this.videoUrl = baseUrl + reslut.url
                    this.videoCoverUrl = baseUrl + reslut.coverUrl
                    this.fileList = [{
                        url: baseUrl + reslut.url,
                        type: tempFile.tempFile.type,
                        size: tempFile.size,
                        coverUrl: baseUrl + reslut.coverUrl,
                    }]
                } else {
                    this.fileList.push(baseUrl + reslut.url)
                }
            } else {
                this.mediaType = 'all'
            }
        },
        delectVideo() {
            uni.showModal({
                title: '提示',
                content: '是否要删除此视频',
                success: res => {
                    if (res.confirm) {
                        this.videoUrl = ''
                        this.videoCoverUrl = ''
                        // 重置媒体类型
                        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'
            }
            console.log(this.mediaType, 'mediaType')
        },
        // 处理媒体类型取消事件
        onCancel() {
            this.uploadApi = baseUrl + '/common/uploads'
            this.mediaType = 'all'
        },

        // upload事件
        onUpload(e) {
            console.log(e, '6666')
            this.fileList = e
        },
        goBack() {
            uni.navigateBack()
        },
        onSubmit() {
            console.log(this.fileList, 'fileList')
            // 获取页面栈
            const pages = getCurrentPages()
            // 至少要有上一页才执行
            if (pages.length < 2) {
                uni.navigateBack()
                return
            }
            // 上一页实例
            const prevPage = pages[pages.length - 2]
            // 再校验页面实例是否存在
            if (!prevPage) {
                uni.navigateBack()
                return
            }
            // 直接修改上一页data里的字段
            console.log(this.fileList, 'fileList')
            console.log(this.fieldName, 'fieldName')
            prevPage.$data.baseInfo[this.fieldName] = this.fileList
            uni.navigateBack()
        }

    }
}
</script>

<style scoped lang="scss">
.lifePhotosEdit {
    height: 100vh;
    background-color: #F7F8FA;

    .tagText {
        margin-top: 32rpx;
        font-weight: 400;
        font-size: 26rpx;
        color: #86909C;
    }
    .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;
        }
    }

    ::v-deep .u-cell-group {
        padding: 32rpx;
        background-color: #fff;

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

        .u-upload__wrap {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 14rpx;
        }

        .u-upload__button {
            margin: 0 !important;
        }

        .u-upload__wrap__preview {
            margin: 0 !important;
        }

        .u-upload__success {
            display: none;
        }
    }
}

::v-deep .u-upload__success {
    display: none;
}

::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;

}

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

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



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