<template>
    <uni-file-picker v-if="!showUploadProgress" file-mediatype="all" :auto-upload="false" :limit="field.limitCount"
        mode="list" @select="(e: any) => handlerSelectFileUpload(e)">
        <button size="mini" style="color:#ffffff;background-color:#007aff;border-color:#007aff"
            hover-class="is-hover">上传文件</button>
    </uni-file-picker>
    <view style="display: flex;flex-direction: column;">
        <template v-for="(item,index) in fileList" :key="item.id">
            <div class="upload-container">
                <div class="file-container">
                    <div class="filename">
                        {{ item.name }}
                    </div>
                </div>
                <div style="margin-left: 10px">
                    <uni-icons :size="25" color="#dd524d" type="trash" style=" padding: 0 5px;" @click="removeFileItem(index)"></uni-icons>
                </div>
            </div>
        </template>
    </view>
    <custom-progress v-if="showUploadProgress" :value="currentProgress" style="min-width: 250px"
        :stroke-width="16"></custom-progress>
</template>

<script lang="ts" setup>
import { computed, useAttrs, h, ref, PropType } from 'vue'
import { getUploadWorkFileUrl } from '@/api/project-center/work'
import customProgress from '@/components/cu-progress/index.vue'
import { uploadFile } from '@/api/base/client';
const fileList = ref<{id:string, name: string}[]>([])
const objectNameList = ref<{ id: string; name: string }[]>([])
const currentProgress = ref(0) // 控制进度条
const showUploadProgress = ref(false)

const emits = defineEmits(['update:modelValue'])

const listStyles = {
    // 是否显示边框
    border: true,
    // 是否显示分隔线
    dividline: true,
    // 线条样式
    borderStyle: {
        width: 1,
        color: 'blue',
        style: 'dashed',
        radius: 2
    }
}
const props = defineProps({
    modelValue: {
        type: Array as PropType<string[]>
    },
    workId: {
        type: String
    },
    field: {
        type: Object,
        required: true
    }
})

// 获取上传进度信息
const onProgressResult = (e: UniApp.OnProgressUpdateResult) => {
    showUploadProgress.value = true
    currentProgress.value = e.progress

}

// 选择合同上传文件，并上传
const handlerSelectFileUpload = async (e: {
    tempFilePaths: string[], tempFiles: {
        name: string
        extname: string
        url: string
    }[]
}) => {
    try {
        const { tempFiles, tempFilePaths } = e
        if (tempFilePaths.length > 0) {
            const {
                url,
                form_data,
                object_name,
                headers
            } = await getUploadWorkFileUrl({
                work_id: props.workId!,
                filename: tempFiles[0].name
            })
         
            await uploadFile({ url, object_name, headers, formData: form_data, filePath: tempFilePaths[0], uploadProgress: onProgressResult })
            fileList.value.push({
                id: object_name,
                name: tempFiles[0].name
            })
            emits('update:modelValue', fileList.value)
            showUploadProgress.value = false
            currentProgress.value = 0
        }

    } catch (_e) {
        showUploadProgress.value = false
        currentProgress.value = 0

    }

}

/**
 * 删除
 * @param index 
 */
const removeFileItem = (index: number)=>{
    fileList.value.splice(index, 1)
    emits('update:modelValue', fileList.value)
}

</script>
<script lang="ts">
export default {
    options: {
        styleIsolation: 'apply-shared', //解除样式隔离
    }

}
</script>
<style scoped>
.upload-container {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-top: 10rpx;

}

.file-container {
    display: flex;
    align-items: center;
    overflow: hidden;
    font-size: 14px;
    border-radius: 3px;
    transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
}

.filename {
    padding: 8px 0px 8px 10px;
    flex: 1;
    width: 300px;
    background-color: #f7f8fa;
    align-items: center;
    font-size: 13px;
    overflow: hidden;
    color: #606266;
    font-size: 14px;
    line-height: 1.4286;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.file-extra {
    margin-left: 20px;
    color: #606266;
}

:deep(.is-text-box) {
    display: none;
}
</style>