<template>
    <!-- 全局文件下载 -->
    <view class="upload">
        <view class="upload-list">
            <view class="upload-item" v-for="(item, index) in getFileList" :key="item.id">
                <view class="upload-item-left">
                    <view class="label">
                        <template v-if="item.fileType == 'image'">
                            <image src="/static/mocp/image/common/image.png" mode="widthFix" />
                        </template>
                        <template v-else-if="item.fileType == 'video'">
                            <image src="/static/mocp/image/common/video.png" mode="widthFix" />
                        </template>
                        <template v-else>
                            <image src="/static/mocp/image/common/pdf.png" mode="widthFix" />
                        </template>
                        <view class="u-line-1">{{ item.fileName }}</view>
                    </view>
                    <view class="tool" @tap="previewFile(item.fileUrl)"><up-icon name="eye" size="18" color="#4E5969"></up-icon></view>
                </view>
                <view class="upload-item-right" @tap="deleteFile(index)"><global-icon icon="delete-01" color="#F53F3F"></global-icon></view>
            </view>
        </view>
        <view class="upload-button" v-if="isLoading">
            <up-loading-icon text="上传中" textSize="14"></up-loading-icon>
        </view>
        <lsj-upload
            v-else
            width="640rpx"
            height="88rpx"
            :option="getOptions"
            :size="30"
            :instantly="true"
            :distinct="true"
            @uploadEnd="onuploadEnd"
            @change="change"
        >
            <view class="upload-button">
                <up-icon name="plus" size="18" color="#4E5969"></up-icon>
                <text class="txt">上传文件</text>
            </view>
        </lsj-upload>
        <up-modal
            :width="250"
            content="确认删除吗？删除后不可恢复!"
            :show="show"
            showCancelButton
            closeOnClickOverlay
            @confirm="confirm"
            @cancel="show = false"
            @close="show = false"
        ></up-modal>
    </view>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { cloneDeep } from 'lodash'
import { httpInterceptor } from 'mocp/utils/http'

const es = defineEmits(['update:modelValue', 'change'])
const ps = defineProps({
    fileList: {
        type: Array,
        default: () => {
            return []
        }
    },
    url: {
        type: String,
        default: '/resource/uploadFile'
    },
    mapFieldName: {
        type: String,
        default: ''
    },
    mapFieldSplit: {
        type: String,
        default: ','
    }
})
const fileList = ref(cloneDeep(ps.fileList))
const getFileList = computed(() => {
    return fileList.value.map((item) => {
        return { ...item, url: item.fileUrl }
    })
})
const getOptions = computed(() => {
    return httpInterceptor({ url: ps.url, name: 'file' })
})
// 删除文件
const show = ref(false)
const index = ref(-1)
const deleteFile = (_index) => {
    show.value = true
    index.value = _index
}
//确认删除
const confirm = () => {
    show.value = false
    fileList.value.splice(index.value, 1)
}
//预览图片
const previewFile = (fileUrl) => {
    uni.downloadFile({
        url: fileUrl,
        success: function (res) {
            var filePath = res.tempFilePath
            uni.openDocument({
                filePath: filePath,
                showMenu: true,
                success: function (res) {
                    console.log('打开文档成功')
                }
            })
        }
    })
}
const isLoading = ref(false)
const onuploadEnd = (e) => {
    if (e.type == 'success') {
        const res = JSON.parse(e.responseText)
        if (res.code == 200) {
            fileList.value.push(res.data)
        } else {
            uni.$mocpMessage.showToast(res.message || '请求错误')
        }
    } else {
        uni.$mocpMessage.showToast('上传失败')
    }

    isLoading.value = false
}
const change = (e) => {
    isLoading.value = true
}
watch(
    fileList,
    (value) => {
        let files = cloneDeep(value)
        if (ps.mapFieldName) {
            files = files.map((v) => v[ps.mapFieldName]).join(ps.mapFieldSplit)
        }
        es('update:modelValue', files)
        es('change', files)
    },
    { deep: true, immediate: true }
)
</script>
<style lang="scss" scoped>
.upload {
    &-button {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f3f3f3;
        width: 640rpx;
        height: 88rpx;
        .txt {
            color: $mocp-text-5;
        }
    }
    &-item {
        height: 72rpx;
        line-height: 72rpx;
        margin-bottom: 16rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &-left {
            display: flex;
            align-items: center;
            width: 640rpx;
            background: #f3f3f3;
            box-sizing: border-box;
            padding: 0 20rpx 0 24rpx;
            .label {
                flex: auto;
                display: flex;
                align-items: center;
                margin-right: 10rpx;
                color: $mocp-text-5;
                image {
                    width: 32rpx;
                    min-width: 32rpx;
                    margin-right: 20rpx;
                }
                .name {
                    flex: auto;
                    word-break: break-all;
                }
            }
        }
    }
}
</style>
