<template>
    <PageContainer title="恢复重建" @click-back="handleClickBack">
        <SearchInput v-model="searchValue" />

        <CurrentSite />

        <div class="list-panel">
            <CardItem v-for="(item, index) in list" :key="index" :title="`${item.projectName}`"
                @click="handleClickItem(item)">
                <template #headerExtra>
                    <van-tag v-if="item.approvalStatus === 3 || item.approvalStatus === 1" type="success" plain size="medium">审批通过</van-tag>
                    <van-tag v-else-if="item.approvalStatus === 2 || item.approvalStatus === 4" type="danger" plain size="medium">审批驳回</van-tag>
                    <van-tag v-else type="warning" plain size="medium">待审批</van-tag>
                </template>

                <div class="content">
                    <div class="left-info">
                        <div><span class="label">起止桩号：</span><span class="value">{{ `${item.startStakeNo} -
                                ${item.endStakeNo}`}}</span>
                        </div>
                        <div><span class="label">路况位置：</span><span class="value">{{ item.roadLocation }}</span></div>
                        <div><span class="label">提交日期：</span><span class="value">{{ item.submitTime }}</span></div>
                    </div>
                    <div class="right-arrow" @click.stop="handleClickItem(item)">
                        <van-icon name="arrow" />
                    </div>
                </div>
            </CardItem>

            <!-- 空状态提示 -->
            <EmptyBox v-if="list.length === 0" placeholder="暂无相关预警信息" />
        </div>

        <van-button type="primary" class="add-btn" icon="plus" @click="handleAddDevice">
            项目填报
        </van-button>
    </PageContainer>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import PageContainer from '@/components/PageContainer.vue'
import SearchInput from '@/components/SearchInput.vue'
import CurrentSite from '@/components/CurrentSite.vue'
import CardItem from '@/components/CardItem.vue'
import EmptyBox from '@/components/EmptyBox.vue'
import { request } from "../../../../shared/utils/request";

const router = useRouter()

onMounted(() => {
    getData()
})

const getData = async () => {
    const params = {
        pageNum: 1,
        pageSize: 999,
    }
    if (searchValue.value) {
        params.districtName = searchValue.value
    }
    const res = await request({
        url: '/snow-ops-platform/recovery/list',
        method: 'GET',
        params
    })
    if (res.code === '00000') {
        list.value = res.data.records
    }
}

// 搜索关键词
const searchValue = ref('')

// 预警列表数据
const list = ref([])


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

const handleClickItem = (item) => {
    router.push({
        name: 'RebuildDetails',
        params: {
            data: encodeURIComponent(JSON.stringify(item.id))
        }
    })
}

const handleAddDevice = () => {
    router.push('/rebuild-add')
    // router.push({
    //   name: "RebuildAdd",
    //   params: {
    //     data: encodeURIComponent(JSON.stringify(11)),
    //   },
    // });
}

watch(() => searchValue.value, () => {
    getData()
})


</script>

<style scoped lang="scss">
.list-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;

    .label {
        color: #666;
    }

    .value {
        color: #aaa;
    }
}

.right-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
}

.add-btn {
    position: fixed;
    bottom: 20px;
    left: 16px;
    right: 16px;
    width: calc(100% - 32px);
    margin: 0 auto;
    border-radius: 24px;
    font-size: 16px;
    height: 44px;
    z-index: 999;
}
</style>