<template>
    <view>
        <uni-swipe-action ref="swiper_action">
            <uni-swipe-action-item :right-options="options" v-for="item in contractList" :key="item.id"
                @click="handlerRemoveContract(item)" class="swipe-action-item" :threshold="20">
                <uni-card margin="5px" padding="0px" :title="item.name" :sub-title="item.prj_name || '-'" :extra="item.id"
                    spacing="5px" thumbnail="../../../../../static/images/contract.png"
                    @click="redirectContractDetailPage(item)">
                    <view>
                        <view class="card-actions">
                            <text class="subtitle font-size-base">合同生效：<text class="paragraph font-size-sm">{{
                                item.begin_at }}~{{
                                        item.end_at }}</text></text>
                            <text class="subtitle font-size-base">合同金额：<text class="font-size-base"
                                    style="color: #007aff;">{{ item.amount }}万元</text></text>
                        </view>
                    </view>
                </uni-card>
            </uni-swipe-action-item>
        </uni-swipe-action>
    </view>
</template>



<script setup lang="ts">
import { removeContract } from '@/api/project-center/contract';
import { useEmitt } from '@/logics/mitt/useEmitt';
import { Contract } from '@/types/contract';
const swiper_action = ref()

defineProps({
    contractList: {
        type: Array as PropType<Contract[]>,
        required: true
    }
})
const { emitter } = useEmitt()
const options = [
    {
        text: '删除',
        style: {
            backgroundColor: '#dd524d',
            margin: "5px 0"
        }
    }
]

// 跳转到详情页面
const redirectContractDetailPage = (contract: Contract) => {
    uni.navigateTo({ url: `/pages/profile/contract/detail?id=${contract.id}` })
}

// 删除合同
const handlerRemoveContract = (contract: Contract) => {
    uni.showModal({
        title: '警告',
        content: `是否删除合同：${contract.name}`,
        success: async (res: { confirm: boolean }) => {
            const { confirm } = res;
            if (confirm) {
                await removeContract(contract.id)
                emitter.emit('get_contract_list')
            }
        }
    })
    swiper_action.value?.closeAll()
}

</script>



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

}
</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 0 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 0 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>