<template>
    <div class="edit-add-detail detail">
        <div class="form-content">
            <el-form ref="formInfo" :model="detailForm" label-position="right" label-suffix="：" class="detail-form">
                <div class="rows">
                    <div class="rows-left">
                        <div class="rows-hr"></div>
                    </div>
                    <div class="rows-title">
                        <div class="text-overflow">涵洞信息</div>
                    </div>
                </div>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="涵洞编号">
                            <span class="text" :title="detailForm.number">
                                {{ detailForm.number || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="涵洞类型">
                            <span class="text" :title="detailForm.typeValue">
                                {{ detailForm.typeValue || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="所属行政区">
                            <span class="text" :title="detailForm.administrativeRegion">
                                {{ detailForm.administrativeRegion || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="所属路段">
                            <span class="text" :title="detailForm.roadSegmentName">
                                {{ detailForm.roadSegmentName || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="用途">
                            <span class="text" :title="detailForm.usesValue">
                                {{ detailForm.usesValue || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="方向">
                            <span class="text" :title="detailForm.directionValue">
                                {{ detailForm.directionValue || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="孔数">
                            <span class="text" :title="detailForm.holeCount">
                                {{ detailForm.holeCount || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="完成日期">
                            <span class="text" :title="detailForm.finishDay">
                                {{ detailForm.finishDay || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="洞顶材料">
                            <span class="text" :title="detailForm.topMaterialValue">
                                {{ detailForm.topMaterialValue || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="洞身材料">
                            <span class="text" :title="detailForm.bodyMaterialValue">
                                {{ detailForm.bodyMaterialValue || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="入口材料">
                            <span class="text" :title="detailForm.entranceMaterialValue">
                                {{ detailForm.entranceMaterialValue || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="出口材料">
                            <span class="text" :title="detailForm.exitMaterialValue">
                                {{ detailForm.exitMaterialValue || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="入口形式">
                            <span class="text" :title="detailForm.entranceFormValue">
                                {{ detailForm.entranceFormValue || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="起始桩号">
                            <span class="text" :title="detailForm.startPeg">
                                {{ detailForm.startPeg || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="结束桩号">
                            <span class="text" :title="detailForm.endPeg">
                                {{ detailForm.endPeg || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="匝道桩号">
                            <span class="text" :title="detailForm.rampPeg">
                                {{ detailForm.rampPeg || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="匝道桩号KM">
                            <span class="text" :title="detailForm.rampPegK">
                                {{ detailForm.rampPegK || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="交叉角度">
                            <span class="text" :title="detailForm.crossAngle">
                                {{ detailForm.crossAngle || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="经度">
                            <span class="text" :title="detailForm.lng">
                                {{ detailForm.lng || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="纬度">
                            <span class="text" :title="detailForm.lat">
                                {{ detailForm.lat || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="rows">
                    <div class="rows-left">
                        <div class="rows-hr"></div>
                    </div>
                    <div class="rows-title">
                        <div class="text-overflow">公路管理机构信息</div>
                    </div>
                </div>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="管养单位">
                            <span class="text" :title="detailForm.officeName">
                                {{ detailForm.officeName || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="中心桩号">
                            <span class="text" :title="detailForm.centPeg">
                                {{ detailForm.centPeg || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="中心桩号KM">
                            <span class="text" :title="detailForm.centPegK">
                                {{ detailForm.centPegK || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="功能类型">
                            <span class="text" :title="detailForm.functionTypeValue">
                                {{ detailForm.functionTypeValue || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="设计荷载">
                            <span class="text" :title="detailForm.designload">
                                {{ detailForm.designload || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="路线编号">
                            <span class="text" :title="detailForm.height">
                                {{ detailForm.height || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="rows">
                    <div class="rows-left">
                        <div class="rows-hr"></div>
                    </div>
                    <div class="rows-title">
                        <div class="text-overflow">结构技术信息</div>
                    </div>
                </div>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="涵洞长度(m)">
                            <span class="text" :title="detailForm.length">
                                {{ detailForm.length || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="涵洞高度(m)">
                            <span class="text" :title="detailForm.height">
                                {{ detailForm.height || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="出口形式">
                            <span class="text" :title="detailForm.exitFormValue">
                                {{ detailForm.exitFormValue || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="路面类型">
                            <span class="text" :title="detailForm.pavementType">
                                {{ detailForm.pavementType || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="基础形式">
                            <span class="text" :title="detailForm.basicFormValue">
                                {{ detailForm.basicFormValue || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="涵底纵坡">
                            <span class="text" :title="detailForm.longitudinalSlope">
                                {{ detailForm.longitudinalSlope || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="涵底铺砌">
                            <span class="text" :title="detailForm.bottomPaving">
                                {{ detailForm.bottomPaving || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="填土高度（m）">
                            <span class="text" :title="detailForm.banketHight">
                                {{ detailForm.banketHight || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="路面宽度">
                            <span class="text" :title="detailForm.pavementWidth">
                                {{ detailForm.pavementWidth || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="路基宽度">
                            <span class="text" :title="detailForm.subgradeWidth">
                                {{ detailForm.subgradeWidth || '-' }}
                            </span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-backtop target=".detail-form" :visibility-height="10">
            <div class="top-box">UP</div>
        </el-backtop>
    </div>
</template>

<script>
import { tableDetail } from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/culvertInfo'
import PubSub from 'pubsub-js'

export default {
    name: 'DetailPage',
    props: {
        componentName: {
            default: 'DetailPage',
            type: String,
        },
    },
    components: {},
    data() {
        return {
            detailForm: {},
            pubSub: null,
        }
    },
    computed: {},
    watch: {
        componentName: {
            handler(newVal) {
                if (newVal === this.$options.name) {
                    this.openPage()
                } else {
                    this.closePage()
                }
            },
        },
    },
    mounted() {
        this.pubSub = PubSub.subscribe('DetailPage', (_, data) => {
            if (data.id) {
                this.getDetail(data.id)
            }
        })
    },
    methods: {
        // 打开页面执行
        openPage() { },

        // 关闭页面执行
        closePage() {
            // 重置组件数据
            Object.assign(this.$data, this.$options.data.call(this), {
                pubSub: this.pubSub,
            })
            this.$nextTick((_) => {
                this.$refs.formInfo.$el.scrollTop = 0
            })
        },

        // 获取详情
        async getDetail(id) {
            const {
                startDate = '',
                endDate = '',
                meetingResultData: { fileInfo = JSON.stringify([]) } = {},
                specialMeeting = {},
                ...detailForm
            } = await tableDetail(id)
            const { meetingObjects = [], ..._specialMeeting } = specialMeeting
            let topicYearMonth = '',
                startEndDate = []
            if (startDate && endDate) {
                startEndDate = [startDate, endDate]
                    .map((time) => moment(time).format('YYYY-MM-DD HH:mm'))
                    .join(',')
                    .replace(',', '  至  ')
            }
            const meetingObjectsOpt = {
                user: { objName: 'fullname', objId: 'id' },
                ogn: { objName: 'name', objId: 'id' },
                dept: { objName: 'name', objId: 'id' },
                post: { objName: 'name', objId: 'id' },
            }

            this.detailForm = {
                ...detailForm,
                topicYearMonth,
                startEndDate,
                meetingResultData: {
                    fileInfo,
                    fileList: JSON.parse(fileInfo)?.map((i) => ({
                        ...i,
                        timeRemaining: () => 0,
                        isComplete: () => true,
                        cancel: (_) => _,
                        status: 'success',
                        size: i.fileSizes,
                        isVideo: i.fileType === '1',
                        currentSpeed: 0,
                        id: i.fileId,
                    })),
                },
                specialMeeting: {
                    ..._specialMeeting,
                    ...Object.entries(meetingObjectsOpt).reduce(
                        (newObj, [key, value]) => {
                            newObj[key + 'Arr'] = meetingObjects.flatMap(
                                (item) => {
                                    if (item.objType !== key) return []
                                    return Object.entries(value).reduce(
                                        (_newObj, [_key, _value]) => {
                                            _newObj[_value] = item[_key]
                                            return _newObj
                                        },
                                        {}
                                    )
                                }
                            )
                            return newObj
                        },
                        {}
                    ),
                },
            }
        },
    },
    beforeDestroy() {
        // 在组件销毁之前 清除订阅消息
        PubSub.unsubscribe(this.pubSub)
    },
}
</script>

<style lang="scss" scoped></style>
