<template>
    <Wraper noFooter :hidden="hidden">
        <a-space class="tw-mb-6" size="large">
            <span>
                地点
                <span class="tw-text-blue-500 tw-mx-1">{{ row.placeNum }}</span>
                个
            </span>
            <span>
                单元
                <span class="tw-text-blue-500 tw-mx-1">{{ row.unitNum }}</span>
                个
            </span>
            <span>
                项目
                <span class="tw-text-blue-500 tw-mx-1">{{ row.itemNum }}</span>
                个
            </span>
            <span>
                异常
                <span class="tw-text-red-500 tw-mx-1">{{ row.abnormalNum }}</span>
                个
            </span>
            <span>
                完成率
                <span class="tw-text-blue-500 tw-mx-1">
                    {{ row.unitNum ? (row.finishedNum / row.unitNum).toFixed(2) : 0 }}
                </span>
            </span>
        </a-space>
        <Table :url="tableUrl" rowKey="progressId" noPadding>
            <a-table-column title="地点名称" data-index="placeName" />
            <a-table-column title="开始时间" data-index="inspectionStartTime" />
            <a-table-column title="结束时间" data-index="inspectionEndTime" />
            <a-table-column title="状态" data-index="inspectionStateName" />
        </Table>
    </Wraper>
</template>

<script>
import Wraper from '@/components/table/wraper.vue';
import Table from '@/components/table/table.vue';

export default {
    props: { hidden: Function, row: Object },
    components: { Wraper, Table },
    mounted() {
        console.log(this.row);
    },
    computed: {
        tableUrl() {
            return `/ranger/inspection/api/v1/jobs/progress?jobId=${this.row.jobId}`;
        },
    },
};
</script>
