<template>
    <view style="display: flex;flex-direction: column;">
        <template v-for="(item,index) in fileList" :key="item.id">
            <div class="download-container">
                <div class="file-container">
                    <div class="filename">
                        {{ item.name }}
                    </div>
                </div>
                <div style="margin-left: 10px">
                    <uni-icons :size="25" color="#007aff" type="download" style=" padding: 0 5px;" @click="startDownloadContractFile(item)"></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 {  ref, PropType } from 'vue'
import { getDownloadWorkFileUrl, getUploadWorkFileUrl } from '@/api/project-center/work'
import customProgress from '@/components/cu-progress/index.vue'
import { downloadFile, saveFile } from '@/api/base/client';

const currentProgress = ref(0) // 控制进度条
const showUploadProgress = ref(false)

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


const props = defineProps({
    modelValue: {
        type: Array as PropType<{id: string, name: string}[]>,
        required: true,
        default: ()=> []
    },
    workId: {
        type: String
    },
    field: {
        type: Object,
        required: true
    }
})

const fileList = ref<{id:string, name: string}[]>(props.modelValue)

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

}

const startDownloadContractFile = async (item: {id: string, name: string}) => {
    uni.showActionSheet({
        itemList: ['分享到好友', '添加到收藏'],
        success: async (res: UniApp.ShowActionSheetRes) => {
            await handlerDownloadFile(item, res.tapIndex)
        }
    });

}


// 下载文件
const handlerDownloadFile = async (item: {id: string, name: string}, sheetIndex: number) => {
    try {
        const { url } = await getDownloadWorkFileUrl({
            id: item.id,
        })
        const { savedFilePath } = await downloadFile({ url, downloadProgress: onProgressResult })
        await saveFile(savedFilePath, item.name, sheetIndex)
        showUploadProgress.value = false
        currentProgress.value = 0
    } catch (_e) {
        showUploadProgress.value = false
        currentProgress.value = 0
    }
}

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

}
</script>
<style scoped>
.download-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>