<template>
    <view style="margin-top: 10rpx;">
        <uni-card margin="0px" padding="0px" :is-shadow="false" :border="false" spacing="0px">
            <template #title>
                <view class="card-title">
                    <view style="flex: 0 0 32px; line-height: 32px;">
                        <uni-icons :size="20" color="#323233" type="undo"
                            @tap.stop="redirectOutcomeListPage()"></uni-icons>
                    </view>
                    <view style="line-height: 32px;font-weight: 600;">
                        <text>{{ detail.outcome?.name }}</text>
                        <text></text>
                    </view>
                    <view class="divider">
                    </view>
                    <view class="sub-title">
                        <text>交付物详情</text>
                    </view>
                </view>
            </template>
            <uni-list :border="true">
                <uni-list-item title="创建人" :rightText="detail.outcome?.creator_name" />
                <uni-list-item title="创建时间" :rightText="detail.outcome?.created_at" />
                <uni-list-item title="编号" :rightText="detail.outcome?.id">
                </uni-list-item>
                <uni-list-item title="名称" :rightText="detail.outcome?.name">
                </uni-list-item>
                <uni-list-item title="状态">
                    <template #footer>
                        <view class="uni-list-item__extra" style="text-align: right;">
                            <uni-tag :text="fTagColor.label" :inverted="true" style="margin-left: 10px;"
                                :custom-style='"font-weight:bolder;border: 1px solid transparent;background:" + fTagColor.bg + ";color:" + fTagColor.color'>
                            </uni-tag>
                        </view>
                    </template>
                </uni-list-item>
                <uni-list-item title="计划交付时间" :rightText="detail.outcome?.plan_time" />
                <uni-list-item title="负责人" :rightText="detail.outcome?.handler_name" />
                <uni-list-item title="所属项目" :rightText="detail.outcome?.prj_name" />
                <uni-list-item title="所属任务" :rightText="detail.outcome?.task_name" />
                <uni-list-item title="附件名称" link v-if="detail.outcome?.uploaded">
                    <template #footer>
                        <view class="uni-list-item__extra" style="text-align: right;">
                            <view v-if="!showProgress"
                                @click="startDownloadFileItem(detail.outcome?.id, detail.outcome?.filename)">
                                <text style="color:#007aff;font-size: 13px;">{{ detail.outcome?.filename }}</text>
                            </view>
                            <view v-else><custom-progress :value="progress" style="min-width: 200px"
                                    :stroke-width="16"></custom-progress></view>
                        </view>
                    </template>
                </uni-list-item>
                <uni-list-item v-if="detail.outcome?.uploaded" title="文件大小" :rightText="formatBytesOptimized(detail.outcome?.file_size)" />
            </uni-list>
            <!-- <view class="font-size-sm card-actions ">
                <text class="subtitle font-size-base">创建时间：<text class="paragraph font-size-sm">{{
                    detail.outcome?.created_at }}</text></text>
            </view>
            <view class="font-size-sm card-actions ">
                <text class="subtitle font-size-base">创建人：<text class="paragraph font-size-sm">{{
                    detail.outcome?.creator_name }}</text></text>
            </view>
            <view class="font-size-sm card-actions ">
                <text class="subtitle font-size-base">编号：<text class="paragraph font-size-sm">{{
                    detail.outcome?.id }}</text></text>
            </view>
            <view class="font-size-sm card-actions ">
                <text class="subtitle font-size-base">状态：<text class="paragraph font-size-sm">{{
                    detail.outcome?.id }}</text></text>
            </view> -->
        </uni-card>
    </view>
</template>
<script lang="ts" setup>
import { getDownloadOutcomeUrl, getOutcomeDetail } from '@/api/project-center/outcome';
import { OutcomeStatusList } from '@/enums/api';
import { useEmitt } from '@/logics/mitt/useEmitt';
import { Outcome, OutcomeDetailResParams } from '@/types/outcome';
import { tagColor, formatBytesOptimized } from '@/utils'
import customProgress from '@/components/cu-progress/index.vue'
import { downloadFile, saveFile } from '@/api/base/client';



const props = defineProps({
    draft: {
        type: Boolean,
        required: true,
        default: () => {
            return false
        }
    },
    outcomeId: {
        type: String,
        required: true
    }
})



const fTagColor = computed(() => {
    const outcome = OutcomeStatusList.find(item => item.status === detail.outcome?.status)
    const tag = tagColor(outcome?.color || 'gray')
    return {
        label: outcome?.label,
        color: tag.color,
        bg: tag.bg
    }
})


// const fTagColor = (status?: number)=>{
//     const color = OutcomeStatusList.find(item => item.status === status)?.color
//     return  tagColor(color!)
// }

const { emitter } = useEmitt()
const showProgress = ref(false)
const progress = ref(0)
const detail = reactive<{ outcome?: OutcomeDetailResParams }>({
    outcome: undefined
}) // 客户详情

const getDetail = async () => {
    const outcomeDetail = await getOutcomeDetail({
        draft: props.draft,
        outcome_id: props.outcomeId
    })
    detail.outcome = outcomeDetail
}

const redirectOutcomeListPage = () => {
    emitter.emit('redirectOutcomeListPage')
}

const startDownloadFileItem = async (outcome_id?: string, filename?: string) => {
    uni.showActionSheet({
        itemList: ['分享到好友', '添加到收藏'],
        success: async (res: UniApp.ShowActionSheetRes) => {
            await downloadFileItem(outcome_id, filename, res.tapIndex)
        }
    });

}

// 监听进度条
const onProgressResult = (e: UniApp.OnProgressDownloadResult | UniApp.OnProgressUpdateResult) => {
    showProgress.value = true
    progress.value = e.progress
}


// 下载文件
const downloadFileItem = async (outcome_id?: string, filename?: string, sheetIndex: number) => {
    try {
        const { url } = await getDownloadOutcomeUrl({
            id: outcome_id!,
        })
        const { savedFilePath } = await downloadFile({ url, downloadProgress: onProgressResult })
        await saveFile(savedFilePath, filename, sheetIndex)
        showProgress.value = false
        progress.value = 0
    } catch (_e) {
        showProgress.value = false
        progress.value = 0
    }
}

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

}
</script>
<style lang="less" scoped>
.card-title {
    flex: 1;
    align-items: center;
    display: flex;
    padding: 10rpx 20rpx;
    background: #fff;

    .divider {
        width: 1px;
        height: 16px;
        margin: 0 12px;
        background-color: #e5e6eb;
    }

    .sub-title {
        display: flex;
        color: #86909c;
        font-size: 24rpx;
    }


}

:deep(.uni-list-item__content) {
    flex-direction: row;
    align-items: center;
    flex: 0 0 80px;
}

:deep(.uni-list-item__content-title) {
    font-size: 13px;
    color: #3b4144a8;
}

:deep(.uni-list-item__extra) {
    flex: 1 1 auto;
}

:deep(.uni-list-item__extra-text) {
    color: #5d5959;
    font-size: 13px;
    width: 200px;
    text-overflow: ellipsis;
    text-align: right;
    text-wrap: wrap;
    overflow-wrap: anywhere;
    white-space-collapse: collapse;
}
</style>