<template>
    <a-spin :spinning="loading">
        <div style="width: 90%;margin: 0 auto;">
            <div style="margin: 25px 0;">
                <a-button type="primary" @click="router.back()" style="margin-left: 10px;">返回</a-button>
            </div>
            <table width="100%" style="width: 100%" border="1" cellspacing="1">
                <tbody>
                    <tr class="ant-table-cell ant-table-cell-ellipsis">
                        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">样点编号</td>
                        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.ydbh }}</td>
                        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">样点类型</td>
                        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.ydlx == 1 ? '土壤' : data?.ydlx == 2 ?
                            '地下水' : data?.ydlx == 3 ? '基坑' : '未知' }} </td>
                    </tr>
                    <tr class="ant-table-cell ant-table-cell-ellipsis">
                        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">经度</td>
                        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.jd }}</td>
                        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">纬度</td>
                        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.wd }}</td>
                    </tr>
                    <tr class="ant-table-cell ant-table-cell-ellipsis">
                        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">采样日期</td>
                        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.ydrq }}</td>
                        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">四面图(东)</td>
                        <td class="ant-table-cell ant-table-cell-ellipsis">
                            <a-button preIcon="ant-design:vertical-align-bottom-outlined" style="margin-left:10px"
                                @click="down(data?.smtd, data?.smtdmc?data?.smtdmc:'四面图(东)')" type="primary">
                                下载
                            </a-button>
                        </td>
                    </tr>
                    <tr class="ant-table-cell ant-table-cell-ellipsis">
                        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">四面图(南)</td>
                        <td class="ant-table-cell ant-table-cell-ellipsis">
                            <a-button preIcon="ant-design:vertical-align-bottom-outlined" style="margin-left:10px"
                                @click="down(data?.smtn, data?.smtnmc?data?.smtnmc:'四面图(南)')" type="primary">
                                下载
                            </a-button>
                        </td>
                        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">四面图(西)</td>
                        <td class="ant-table-cell ant-table-cell-ellipsis">
                            <a-button preIcon="ant-design:vertical-align-bottom-outlined" style="margin-left:10px"
                                @click="down(data?.smtx, data?.smtxmc?data?.smtxmc:'四面图(西')" type="primary">
                                下载
                            </a-button>
                        </td>
                    </tr>
                    <tr class="ant-table-cell ant-table-cell-ellipsis">
                        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">四面图(北)</td>
                        <td class="ant-table-cell ant-table-cell-ellipsis">
                            <a-button preIcon="ant-design:vertical-align-bottom-outlined" style="margin-left:10px"
                                @click="down(data?.smtb, data.smtbmc?data?.smtbmc:'四面图(北)')" type="primary">
                                下载
                            </a-button>
                        </td>
                        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">现场核查人员自拍图</td>
                        <td class="ant-table-cell ant-table-cell-ellipsis">
                            <a-button preIcon="ant-design:vertical-align-bottom-outlined" style="margin-left:10px"
                                @click="down(data?.xchczpt, data.xchczptmc?data?.xchczptmc:'现场核查人员自拍图')" type="primary">
                                下载
                            </a-button>
                        </td>
                    </tr>
                    <tr class="ant-table-cell ant-table-cell-ellipsis">
                        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">GPS设备坐标图</td>
                        <td class="ant-table-cell ant-table-cell-ellipsis">
                            <a-button preIcon="ant-design:vertical-align-bottom-outlined" style="margin-left:10px"
                                @click="down(data?.gpszbt, data.gpszbtmcdata?data?.gpszbtmcdata:'GPS设备坐标图')" type="primary">
                                下载
                            </a-button>
                        </td>
                        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">岩芯图</td>
                        <td class="ant-table-cell ant-table-cell-ellipsis">
                            <a-button preIcon="ant-design:vertical-align-bottom-outlined" style="margin-left:10px"
                                @click="down(data?.yxt, data.yxtmc?data?.yxtmc:'岩芯图')" type="primary">
                                下载
                            </a-button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </a-spin>
</template>
  
<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
import { ref } from 'vue';
import { getYdxxXq } from './api';
// import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import { downloadFile } from '/@/api/common/api';

const route = useRoute();
const router = useRouter();
let data = ref({})
let loading = ref(true)
async function init() {
    // 拿到路由传参 请求接口
    let result = await getYdxxXq({ ydxxId: route.query.ydxxId })
    data.value = result //响应式赋值
    loading.value = false //加载中状态
}
function down(url, name) {
  let fileExtension = url.split('.').pop();
  downloadFile('/sys/common/static' + url, `${name}.${fileExtension}`);
}
init()
// defineProps({
//     data: Object,
// })
</script>
  
<style scoped>
table {
    border-collapse: collapse;
    border: 1px #dfe6ec solid
}

tbody tr td {
    padding: 6px;
    height: 40px;
}

.bgColor {
    background-color: rgba(244, 247, 249, 0.8);
    text-align: center;
    width: 10%;
}
</style>
