<template>
    <div class="w-[98%] mx-auto pb-15">
        <div class="py-10 steps my-4">
            <a-steps progress-dot :current="1" class="w-[95%] mx-auto">
                <a-step v-for="v in steps" :key="v.title" :title="v.title" />
            </a-steps>
        </div>
        <a-collapse v-model:activeKey="activeKey" :expand-icon-position="expandIconPosition">
            <a-collapse-panel key="1" header="地块调查">
                <a-row>
                    <a-col :span="24" class="border border-bt">
                        <a-row>
                            <a-col :span="6">
                                <a-row>
                                    <a-col :span="9" class="bg-[#F4F7F9] py-4 pl-4">
                                        初步调查报告
                                    </a-col>
                                    <a-col :span="4" class=" py-4 pl-4"><a-button type="primary"
                                            size="small">下载</a-button></a-col>
                                </a-row>
                            </a-col>
                            <a-col :span="9">
                                <a-row>
                                    <a-col :span="4" class="bg-[#F4F7F9] py-4 pl-4">
                                        初步调查检测报告
                                    </a-col>
                                    <a-col :span="4" class=" py-4 pl-4">
                                        <a-space>
                                            <a-button type="primary" size="small">下载</a-button>

                                        </a-space>
                                    </a-col>
                                </a-row>
                            </a-col>
                        </a-row>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24" class="border ">
                        <a-row>
                            <a-col :span="6">
                                <a-row>
                                    <a-col :span="9" class="bg-[#F4F7F9] py-4 pl-4">
                                        详细调查报告
                                    </a-col>
                                    <a-col :span="4" class=" py-4 pl-4"><a-button type="primary"
                                            size="small">下载</a-button></a-col>
                                </a-row>
                            </a-col>
                            <a-col :span="9">
                                <a-row>
                                    <a-col :span="4" class="bg-[#F4F7F9] py-4 pl-4">
                                        详细调查检测报告
                                    </a-col>
                                    <a-col :span="4" class=" py-4 pl-4">
                                        <a-space>
                                            <a-button type="primary" size="small">下载</a-button>

                                        </a-space>
                                    </a-col>
                                </a-row>
                            </a-col>
                        </a-row>
                    </a-col>
                </a-row>
                <template #extra> <a-button type="primary" @click="handleClick('地块调查')">基本信息</a-button> </template>
            </a-collapse-panel>
            <a-collapse-panel key="2" header="风险评估">
                <a-row>
                    <a-col :span="24" class="border">
                        <a-row>
                            <a-col :span="6">
                                <a-row>
                                    <a-col :span="9" class="bg-[#F4F7F9] py-4 pl-4">
                                        风险评估报告
                                    </a-col>
                                    <a-col :span="4" class=" py-4 pl-4"><a-button type="primary"
                                            size="small">下载</a-button></a-col>
                                </a-row>
                            </a-col>

                        </a-row>
                    </a-col>
                </a-row>

                <template #extra> <a-button type="primary" @click="handleClick">基本信息</a-button> </template>
            </a-collapse-panel>
            <a-collapse-panel key="3" header="修复">
                <a-row>
                    <a-col :span="24" class="border">
                        <a-row>
                            <a-col :span="6">
                                <a-row>
                                    <a-col :span="9" class="bg-[#F4F7F9] py-4 pl-4">
                                        修复方案
                                    </a-col>
                                    <a-col :span="4" class=" py-4 pl-4"><a-button type="primary"
                                            size="small">下载</a-button></a-col>
                                </a-row>
                            </a-col>

                        </a-row>
                    </a-col>
                </a-row>

                <template #extra> <a-button type="primary" @click="handleClick('修复方案')">基本信息</a-button> </template>
            </a-collapse-panel>
            <a-collapse-panel key="3" header="修复效果评估">
                <a-row>
                    <a-col :span="24" class="border  boder-br">
                        <a-row>
                            <a-col :span="6">
                                <a-row>
                                    <a-col :span="9" class="bg-[#F4F7F9] py-4 pl-4">
                                        效果评估报告-方案1
                                    </a-col>
                                    <a-col :span="4" class=" py-4 pl-4"><a-button type="primary"
                                            size="small">下载</a-button></a-col>
                                </a-row>
                            </a-col>
                            <a-col :span="9">
                                <a-row>
                                    <a-col :span="4" class="bg-[#F4F7F9] py-4 pl-4">
                                        效果评估检测报告
                                    </a-col>
                                    <a-col :span="4" class=" py-4 pl-4">
                                        <a-space>
                                            <a-button type="primary" size="small">下载</a-button>
                                            <a-button type="primary" size="small">下载</a-button>
                                            <a-button type="primary" size="small">下载</a-button>
                                        </a-space>
                                    </a-col>
                                </a-row>
                            </a-col>
                        </a-row>
                    </a-col>
                </a-row>
                <template #extra> <a-button type="primary" @click="handleClick">基本信息</a-button> </template>
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { CollapseProps } from 'ant-design-vue';
import { useRouter } from 'vue-router';

let router = useRouter();

const emit = defineEmits(['handClick'])
const activeKey = ref(['1']);
const steps = ref([
    {
        title: '地块调查',
    },
    {
        title: '风险评估',
    },
    {
        title: '修复',
    },
    {
        title: '修复效果评估',
    },
])


const id = ref(router.currentRoute.value.query.wrdkid)
const expandIconPosition = ref<CollapseProps['expandIconPosition']>('left');

function handleClick(v: any) {
    if (v == '地块调查') {
        router.push(`/directory/mlzk/land/modules/Detail?wrdkid=${id.value}&scjdbm=S2`)
    } else if (v == '修复方案') {
        router.push(`/directory/mlzk/land/modules/Plans?wrdkid=${id.value}&scjdbm=S5`)
    }
}
</script>

<style lang="less" scoped>
:deep(.steps) {
    box-shadow: 0 2px 7px 0 #bfc1c4
}

:deep(.ant-steps) {
    width: 95%;
    margin: 0 auto;
}

:deep(.border) {
    border: 1px solid #E6E6E6;
    padding-left: 0 !important;
}

:deep(.border-bt) {
    border-bottom: 0 !important;

}

:deep(.boder-br) {
    border-right: 0;
}
</style>