<template>
    <view>
        <uni-swipe-action ref="swiper_action">
            <uni-swipe-action-item :right-options="options" v-for="item in projectList" :key="item.id"
                @click="handlerRemoveProject(item)" class="swipe-action-item" :threshold="5">
                <uni-card :title="item.name" :extra="item.id" margin="5px" padding="0px"
                    @click="redirectProjectDetailPage(item)">
                    <view class="font-size-sm card-actions ">
                        <text class="subtitle font-size-base">创建时间：<text class="paragraph font-size-sm">{{
                            item.created_at }}</text></text>
                    </view>
                    <view class="font-size-sm progress-actions ">
                        <text class="subtitle font-size-base">项目阶段：</text>
                        <uni-tag :text="item.phase_name" :inverted="true" style="margin-left: 10px;"
                            v-for="tag in selectedPhase(prjPhaseList, item.phase_id)" :key="tag.id"
                            :custom-style='"font-weight:bolder;border: 1px solid transparent;background:" + tagColor(tag.color).bg + ";color:" + tagColor(tag.color).color'>
                        </uni-tag>
                    </view>
                    <view class="progress-actions">
                        <text class="subtitle font-size-base">项目进度：
                        </text>
                        <custom-progress :value="item.progress" style="min-width: 250px" :stroke-width="16"></custom-progress>
                    </view>
                    <view slot="actions" class="card-actions border-top">
                        <text class="subtitle font-size-base">项目负责人：<text class="paragraph font-size-sm">{{
                            item.leader_name
                            || '暂无' }}</text></text>
                        <text class="subtitle font-size-base">预计交付时间：<text class="paragraph font-size-sm">{{
                            item.deliver_at || '暂无' }}</text></text>
                    </view>
                </uni-card>
            </uni-swipe-action-item>
        </uni-swipe-action>
    </view>
</template>


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

}
</script>
<script setup lang="ts">
import { useEmitt } from '@/logics/mitt/useEmitt';
import customProgress from '@/components/cu-progress/index.vue'
import { Project } from '@/types/project';
import { selectedPhase, tagColor } from '@/utils'
import { removeProject } from '@/api/project-center/info';

const { emitter } = useEmitt()
const swiper_action = ref()
const options = [
    {
        text: '删除',
        style: {
            backgroundColor: '#dd524d',
            margin: "5px 0"
        }
    }
]


defineProps({
    projectList: {
        type: Array as PropType<Project[]>,
        required: true
    },
    prjPhaseList: {
        type: Array as PropType<{ id: string; name: string; color: string }[]>,
        required: true
    }
})



const handlerRemoveProject = async (item: Project) => {
    uni.showModal({
        title: '警告',
        content: `是否删除项目：${item.name}`,
        success: async (res: { confirm: boolean }) => {
            const { confirm } = res;
            if (confirm) {
                await removeProject(item.id)
                emitter.emit('remove_project', item.id)
            }
        }
    })
    swiper_action.value?.closeAll()
}
// 跳转客户详情
const redirectProjectDetailPage = async (item: Project) => {
    uni.navigateTo({ url: `/pages/project/components/detail?id=${item.id}` })
}
</script>
<style scoped lang="scss">
:deep(.uni-swipe_button-group) {
    top: 5px;
    bottom: 5px;
}

.uni-mt-5 {
    margin-top: 5px;
}

.border-top {
    border-top: 1px #eee solid;
}

.card-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 25px;
    line-height: 25px;
    font-size: $uni-font-size-sm;
    padding: 5px 10px;
}

.progress-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 25px;
    line-height: 25px;
    font-size: $uni-font-size-sm;
    padding: 5px 10px;
}

.font-size-sm {
    font-size: $uni-font-size-sm;
}

.font-size-base {
    font-size: 26rpx;
}

.paragraph {
    color: #b2a9a6;
    font-weight: 600;
}

.subtitle {
    color: #b2a9a6;
}
</style>