<template>
    <div
        class="card-info mb-10"
        v-if="extensionApply.id"
    >
        <header class="flex">
            <span class="primary">延期申请中</span>
            <div class="step-item flex v-center">
                <div class="number" active="true">1</div>
                <span>延期申请</span>
            </div>
            <div class="step-item flex v-center">
                <div class="number">2</div>
                <span>二级机构专班审批</span>
            </div>
            <div class="step-item flex v-center">
                <div class="number" >3</div>
                <span>市局专班审批</span>
            </div>
        </header>
        <div class="flex">
            <div class="col col-6">
                <label>延期时长</label>
                <span>{{ extensionApply.extensionDays }}天</span>
            </div>
            <div class="col col-18">
                <label>延期理由</label>
                <span class="content" style="padding: 0">{{ extensionApply.comments }}</span>
            </div>
        </div>
        <!-- <div class="flex mt-20">
            <div class="col" style="width: 100%">
                <label>驳回理由</label>
                <span style="width: calc(100% - 74px)">{{  }}</span>
            </div>
        </div> -->
    </div>
</template>
<script setup>

const extensionApply = inject('extensionApply')
</script>
<style lang="scss" scoped>
.card-info {
    background: #f4f5ff;
    border: 1px solid rgba(195, 202, 245, 1);
    padding: 12px 20px;
    header {
        margin-bottom: 20px;
        .primary {
            font-size: 16px;
            color: var(--primary-color);
            margin-left: 20px;
            margin-right: 60px;
        }
        .step-item {
            font-size: 12px;
            padding-right: 52px;
            margin-right: 8px;
            position: relative;
            &::before {
                display: block;
                content: "";
                width: 45px;
                height: 1px;
                background: #ccc;
                position: absolute;
                top: 50%;
                right: 0;
            }
            &:last-child::before {
                display: none;
            }
            .number {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                text-align: center;
                line-height: 24px;
                margin-right: 6px;
                border: 1px solid #ccc;
                &[active="true"] {
                    background: var(--primary-color);
                    color: #fff;
                }
                &[return="true"] {
                    background: var(--danger-color);
                }
                
            }
        }
    }
}
</style>