<template>
    <PageContainer title="项目填报" @click-back="handleClickBack">
        <div class="content">
            <PanelItem>
                <div class="detail">
                    <div class="header">
                        <div class="header-title">{{ data.projectName }}</div>
                        <div class="header-extra">
                            <van-tag v-if="data.approvalStatus === 3 || data.approvalStatus === 1" type="success" plain
                                size="medium">审批通过</van-tag>
                            <van-tag v-else-if="data.approvalStatus === 2 || data.approvalStatus === 4" type="danger"
                                plain size="medium">审批驳回</van-tag>
                            <van-tag v-else type="warning" plain size="medium">待审批</van-tag>
                        </div>
                    </div>
                    <div class="item">区县名称： {{ data.districtName }}</div>
                    <div class="item">线路编号： {{ data.routeNo }}</div>
                    <div class="item">起点桩号： {{ data.startStakeNo }}</div>
                    <div class="item">止点桩号： {{ data.endStakeNo }}</div>
                    <div class="item">实施里程： {{ `${data.implementMileage} 公里` }}</div>
                    <div class="item">塌方及损失： {{ data.earthworkLoss }}</div>
                    <div class="item">灾害类型： {{ data.disasterType }}</div>
                    <div class="item">地点路线： {{ data.locationRoute }}</div>
                    <div class="item">阻断点小地名： {{ data.blockedPointName }}</div>
                    <div class="item">提交时间： {{ data.submitTime }}</div>
                    <div class="item">恢复重建预估费用： {{ data.estimatedCost }}</div>
                </div>
            </PanelItem>
            <PanelItem title="附件">
                <div class="fileArea">
                    <van-image v-for="(item, index) in data?.fileList" :key="index" :src="item.fileUrl" fit="cover"
                        width="100px" height="100px" style="margin: 10px" @click="showImage(item.fileUrl)"></van-image>
                </div>
            </PanelItem>
            <PanelItem v-if="data.rejectReason">
                <div class="detail">
                    <div class="item">驳回理由： {{ data.rejectReason }}</div>
                </div>
            </PanelItem>
        </div>

    </PageContainer>

</template>


<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import PageContainer from '@/components/PageContainer.vue'
import { showToast, showLoadingToast, showImagePreview } from "vant";
import PanelItem from '@/components/PanelItem.vue'
import { request } from "../../../../shared/utils/request";

const router = useRouter()
const route = useRoute()

const data = ref({})

onMounted(() => {
    if (route.params.data) {
        const data = JSON.parse(decodeURIComponent(route.params.data));
        getDetaillData(data)

    } else {
        console.log('无传入数据');
    }
})

const getDetaillData = async (id) => {
    try {
        const res = await request({
            url: '/snow-ops-platform/recovery/getById',
            method: 'GET',
            params: {
                id: id
            }
        })
        if (res.code === '00000') {
            data.value = res.data
        }
    } catch (error) {
        showToast('获取详情失败，请稍后重试')
        console.log('error', error);
    }
}

const handleClickBack = () => {
    router.push('/rebuild')
}

const showImage = (url) => {
    showImagePreview([url]);
};
</script>

<style scoped lang="scss">
.content {
    padding: 20px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail {
    display: flex;
    flex-direction: column;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.header-title {
    font-weight: 500;
    font-size: 20px;
    color: #4a4a4a;
    line-height: 16px;
}

.item {
    margin-bottom: 18px;
}

.fileArea {
    display: flex;
    flex-direction: row;
    gap: 20px;
}
</style>
