<template>
    <view style="margin:10rpx">
        <uni-list :border="true">
            <uni-swipe-action ref="swiper_action">
                <uni-swipe-action-item :right-options="options" v-for="item in workList" :key="item.id"
                    @click="redirectWorkTimelinePage(item)">
                    <uni-list-item>
                        <template v-slot:header>
                            <view class="slot-box">
                                <uni-badge style="width: 90rpx;height: 90rpx;" :is-dot="true" absolute="rightTop"
                                    :text="item.status === 0 ? 1 : 0" class="uni-badge-left-margin" :offset="[1, 1]"
                                    :customStyle="{
                                        fontSize: '14px',
                                        padding: '2px 6px',
                                        height: '24px'
                                    }">
                                    <image v-if="item.status === 0" src="@img/work.png"></image>
                                    <image v-else src="@img/work-disabled.png"></image>

                                </uni-badge>
                            </view>
                        </template>
                        <template v-slot:body>
                            <view class="slot-content" @click="processWorkInfo(item)">
                                <view class="slot-panel">
                                    <view class="slot-title">{{ item.name }}</view>
                                    <view class="slot-subtitle">
                                        <uni-tag :text="curStatus(item.status!)?.label" :inverted="true" style=""
                                            :custom-style='"padding:2px 4px;font-size:10px;font-weight:bolder;border: 1px solid transparent;background:" + tagColor(curStatus(item.status!)!.color).bg + ";color:" + tagColor(curStatus(item.status!)!.color).color'>
                                        </uni-tag>
                                    </view>
                                    <view class="slot-subtitle">{{ item.prj_name }}</view>
                                </view>
                                <view class="slot-desc">
                                    <view class="slot-desc-text">
                                        {{ item.started_at }}
                                    </view>
                                    <view>
                                        <text :style="{
                                            color: item.status === 2 && item.process_type === 1 ? '' : '#007aff'
                                        }">{{ item.process_type === 1 ? '办理' : '阅读' }}</text>
                                    </view>
                                </view>
                            </view>
                        </template>
                    </uni-list-item>
                </uni-swipe-action-item>
            </uni-swipe-action>
        </uni-list>
        <ProcessWork ref="processWorkRef" />
    </view>
</template>


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

}
</script>
<script setup lang="ts">
import ProcessWork from '@/components/process-work/index.vue'
import { tagColor } from '@/utils'
import { Work } from '@/types/work';
import { ProjectDetailTabTitleList } from '@/enums/api';

const swiper_action = ref()

const options = [
    {
        text: '时间线',
        style: {
            backgroundColor: '#007aff',
            margin: "5px 0"
        }
    }
]

defineProps({
    workList: {
        type: Array as PropType<Work[]>,
        required: true
    }
})

const processWorkRef = ref()

const statusList: {
    label: string
    value: number
    color: string
    subLable?: string
}[] = [
        {
            label: '未完成',
            subLable: '未阅',
            value: 0,
            color: 'gray'
        },
        {
            label: '已过期',
            value: 1,
            color: 'gray'
        },
        {
            label: '已完成',
            subLable: '已阅',
            value: 2,
            color: 'green'
        }
    ]

const curStatus = (status: number) => {
    return statusList?.find(item => item.value === status)
}

// 跳转到详情页面
const processWorkInfo = (work: Work) => {
    console.log(work)
    if (!work.target_type) {
        processWorkRef.value?.showWorkModal(work.id)
        return
    }

    if (work.status === 2 && work.process_type === 1) {
        return
    }

    const tab = ProjectDetailTabTitleList.find(item => item.redirectId?.includes(work.target_type))
    if (work.target_type === "project-detail") {
        uni.navigateTo({ url: `/pages/project/components/detail?id=${work.prj_id}` })
    }
    if (work.target_type === 'project-plan') {
        const params = work.params;
        let url = `/pages/project/components/detail?id=${work.prj_id}&tabActiveKey=${tab?.path}`
        if (params?.draft !== undefined) {
            url += `&draft=${params?.draft}`
        }
        if (params?.task_id) {
            url += `&task_id=${params?.task_id}`
        }
        if (params?.outcome_id) {
            url += `&outcome_id=${params?.outcome_id}`
        }
        uni.navigateTo({ url,
            success:(success)=>{
                console.log(success)
            },
            fail:(fail)=>{
                console.log(fail)
            },
         })
    }

}

// 跳转到工作时间线页面
const redirectWorkTimelinePage = (work: Work) => {
    uni.navigateTo({
        url: `/pages/project/components/work-chain?id=${work.id}`,
        success: () => {
            swiper_action.value?.closeAll()
        }
    })
}

</script>
<style scoped lang="less">
.slot-box {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    margin-right: 10px;

    image {
        width: 90rpx;
        height: 90rpx;
    }
}


.slot-content {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    overflow: hidden;
    /* height: 45px; */
}

.slot-panel {
    display: flex;
    padding-right: 8px;
    flex: 1;
    color: #3b4144;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
}

.slot-title {
    font-size: 14px;
    color: #3b4144;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.slot-subtitle {
    display: flex;
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 5px;
    overflow: hidden;
}

.slot-desc {
    color: #999;
    font-size: 13px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    margin-left: 5px;

    .slot-desc-text {
        color: #999;
        font-size: 12px;
        font-weight: 400;
    }

}

.chat-custom-text {
    font-size: 12px;
    color: #999;
}
</style>