<template>
    <el-dialog custom-class="par-detail-dialog" v-model="visible" :destroy-on-close="true" append-to-body>
        <div class="detail-dialog-header">
            <img v-if="type === 'route'" src="~@/assets/images/patrolAndRescue/route.png" />
            <img v-else-if="type === 'video'" src="~@/assets/images/patrolAndRescue/video.png" />
            <span class="detail-dialog-title">{{ title }}</span>
        </div>
        <div class="detail-dialog-body">
            <div class="section-title-wrapper">
                <div class="section-title">基本信息</div>
                <div class="decoration-line"></div>
            </div>
            <div class="section-body basic-section">
                <div class="basic-item">
                    <div class="basic-item-title">所属路段</div>
                    <div class="basic-item-info">{{ patrolDetail.roadName || '-' }}</div>
                </div>
                <div class="basic-item">
                    <div class="basic-item-title">班次</div>
                    <div class="basic-item-info">{{ filterDictTextByKey(bcxjrw, patrolDetail.workclass) || '-' }}</div>
                </div>
                <div class="basic-item">
                    <div class="basic-item-title">巡检类型</div>
                    <div class="basic-item-info">{{ filterDictTextByKey(xjlxxjrw, patrolDetail.type) || '-' }}</div>
                </div>
                <div class="basic-item">
                    <div class="basic-item-title">往返类型</div>
                    <div class="basic-item-info">{{ filterDictTextByKey(wflxxjrw, patrolDetail.inspectType) || '-' }}
                    </div>
                </div>
                <div class="basic-item">
                    <div class="basic-item-title">巡检队伍</div>
                    <div class="basic-item-info">{{ patrolDetail.teamName || '-' }}</div>
                </div>
                <div class="basic-item">
                    <div class="basic-item-title">巡检里程</div>
                    <div class="basic-item-info">{{ patrolDetail.inspectLength || '-' }}</div>
                </div>
                <div class="basic-item">
                    <div class="basic-item-title">天气</div>
                    <div class="basic-item-info">{{ patrolDetail.weather || '-' }}</div>
                </div>
                <div class="basic-item">
                    <div class="basic-item-title">巡检开始时间</div>
                    <div class="basic-item-info">{{ patrolDetail.startTime || '-' }}</div>
                </div>
                <div class="basic-item">
                    <div class="basic-item-title">巡检结束时间</div>
                    <div class="basic-item-info">{{ patrolDetail.endTime || '-' }}</div>
                </div>
                <div class="basic-item basic-item-last">
                    <div class="basic-item-title">巡检人员</div>
                    <div class="basic-item-info" :title="patrolDetail.inspectUsersName">{{ patrolDetail.inspectUsersName
                        || '-' }}</div>
                </div>
            </div>
            <div class="section-title-wrapper">
                <div class="section-title">应巡查点位</div>
                <div class="decoration-line"></div>
            </div>
            <div class="section-body posiiton-section">
                <el-table size="mini" stripe :data="planData" style="width: 100%" height="160"
                    @row-click="handleRowClick">
                    <el-table-column type="index" label="序号" width="60" align="center" />
                    <el-table-column prop="name" label="点位名称" width="140" align="center" />
                    <el-table-column prop="direction" label="方向" min-width="120" align="center">
                        <template #default="scope">
                            <span>{{xsfx.find(item => item.value == scope.row.direction)?.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="pegVal" label="点位桩号" min-width="120" align="center" />
                    <el-table-column prop="type" label="点位类型" min-width="120" align="center">
                        <template #default="scope">
                            <span>{{xcdwlx.find(item => item.value == scope.row.type)?.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" label="内容" width="140" align="center" show-overflow-tooltip />
                    <el-table-column prop="category" label="点位类别" width="140" align="center">
                        <template #default="scope">
                            <span>{{xcdwlb.find(item => item.value == scope.row.category)?.name}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="section-title-wrapper">
                <div class="section-title">巡查记录</div>
                <div class="decoration-line"></div>
            </div>
            <div class="section-body record-section">
                <div class="record-item" v-for="item in resultDetails" :key="item.id">
                    <div class="info-box">
                        <span class="pegVal" :title="item.pegVal">{{ item.pegVal ? 'K' + item.pegVal : '-' }}</span>
                        <span
                            :class="['status', item.inspectStatus === '1' ? 'success' : item.inspectStatus === '0' ? 'danger' : '']">
                            {{ filterDictTextByKey(xcdwzt,
                                item.inspectStatus) || '-'
                            }}
                        </span>
                    </div>
                    <div :title="item.inspecetInfo" class="info-box">巡检情况： {{ item.inspecetInfo || '-' }}</div>
                    <div v-if="item.fileUrlArr.length" class="image-box">
                        <el-image class="image-item" v-for="(fileUrl, index) in item.fileUrlArr" :key="index"
                            fill="cover" :preview-src-list="item.fileUrlArr" :src="fileUrl">
                        </el-image>
                    </div>
                    <div v-else class="image-box empty">
                        无巡检图片
                    </div>
                    <div class="info-box">
                        <span :title="item.inspectTime">{{ item.inspectTime || '-' }}</span>
                        <span :title="`上报人：${item.inspectUserName}`">{{ item.inspectUserName || '-' }}</span>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import SectionTitle from '@/components/common/sectionTitle.vue'
import { getRoadPatrolDetail, getRoadPatrolPlanDetail, getDictByCode } from "@/api/patrolAndRescue";
import moment from 'moment'
export default {
    name: 'detailDialog',
    components: { SectionTitle },
    data() {
        return {
            visible: false,
            title: '巡查任务详情',
            type: 'route',
            xjlxxjrw: [], // 巡检类型xjlx-xjrw
            bcxjrw: [], // 班次bc-xjrw
            wflxxjrw: [], // 往返类型 wflx-xjrw
            xcdwlb: [], // 点位类别 xcdwlb
            xsfx: [], // 方向 xsfx
            xcdwlx: [], // 点位类型 xcdwlx
            xcdwzt: [], // 巡检状态 xcdwzt
            tableData: [],
            patrolData: {},
            patrolDetail: {},
            planData: [],
            resultDetails: [],
        }
    },
    methods: {
        show(data) {
            this.getDict()
            this.patrolData = data
            this.getData()
            this.visible = true
        },
        getDict() {
            const formData = new FormData()
            formData.append('codes', 'xjlx-xjrw,bc-xjrw,wflx-xjrw,xcdwlb,xsfx,xcdwlx,xcdwzt')
            getDictByCode(formData)
                .then((res) => {
                    if (res) {
                        this.xjlxxjrw = res[`xjlx-xjrw`] || []
                        this.bcxjrw = res[`bc-xjrw`] || []
                        this.wflxxjrw = res[`wflx-xjrw`] || []
                        this.xcdwlb = res.xcdwlb || []
                        this.xsfx = res.xsfx || []
                        this.xcdwlx = res.xcdwlx || []
                        this.xcdwzt = res.xcdwzt || []
                    }
                })
        },
        getData() {
            getRoadPatrolDetail(this.patrolData.id).then(res => {
                const { result } = res
                this.patrolDetail = result || {}
                const { resultDetails = [] } = this.patrolDetail
                this.resultDetails = resultDetails.map(i => ({
                    ...i,
                    fileUrlArr: i.files ? i.files.map(file => {
                        return file.filePreviewUrl ? file.filePreviewUrl : ''
                    }) : []
                }))
            })
            getRoadPatrolPlanDetail(this.patrolData.planId).then(res => {
                console.log(res, "planPatrolDetails")
                this.planData = res.planPatrolDetails || []
            })
        },
        filterDictTextByKey(dictData, key) {
            if (!key || dictData.length == 0) {
                return;
            }
            let item = dictData.filter(t => t["value"] == key)
            if (item && item.length > 0) {
                return item[0].name
            } else {
                return ''
            }
        },
        handleRowClick(row) {
            this.$emit('row-click', row)
        },
        hide() {
            this.visible = false
        },
    },
}
</script>
<style lang="scss">
.par-detail-dialog.el-dialog {
    margin-top: 8vh !important;
    width: 1400px !important;
    height: 800px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: url('@/assets/images/layout/common/marker-dilog-bg.png') no-repeat;
    background-size: cover;
    background-size: 100% 100%;

    .el-dialog__header {
        padding: 0 !important;
    }

    .el-dialog__headerbtn {
        top: 10px;
        right: 0px;
        z-index: 99;
    }

    .el-icon-close:before {
        font-size: 20px !important;
        color: #fff;
    }

    .el-dialog__body {
        padding: 0 20px 20px 20px !important;
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

    .detail-dialog-header {
        width: 240px;
        height: 60px;
        margin-left: 20px;
        display: flex;
        align-items: center;
        overflow: hidden;

        img {
            width: 18px;
            height: 18px;
            margin-right: 10px;
        }

        .detail-dialog-title {
            font-weight: 700;
            font-size: 18px;
            color: #FFFFFF;
        }
    }

    .detail-dialog-body {
        height: 680px !important;
        overflow-x: hidden;
        overflow-y: auto;
        margin-top: 10px;

        .el-table {
            background-color: transparent !important;

        }

        .el-table--border::after,
        .el-table--group::after,
        .el-table::before {
            background-color: transparent !important;
        }

        .el-table th {
            background-color: #024288 !important;
            font-weight: 700;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 18px;
        }

        .el-table th.is-leaf {
            border-bottom: none;
        }

        .el-table tr {
            background-color: transparent !important;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 18px;
        }

        .el-table td {
            border-bottom: none;
        }

        .el-table--striped .el-table__body tr.el-table__row--striped td {
            background: #08366c !important;
        }

        .el-table--enable-row-hover .el-table__body tr:hover>td {
            background-color: #0d4483 !important;
        }
    }

    .detail-page-wrapper {
        width: 100%;
        text-align: right;
        margin-top: 12px;

        .el-pagination__total {
            color: #CCE6FF !important;
        }

        .el-pagination.is-background .btn-next,
        .el-pagination.is-background .btn-prev,
        .el-pagination.is-background .el-pager li {
            color: #CCE6FF !important;
            background-color: transparent !important;
        }

        .el-pagination.is-background .el-pager li:not(.disabled).active {
            background-color: #00adff !important;
            color: #fff !important;
        }

        .ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .section-title-wrapper {
        width: 100%;
        height: 35px;

        .section-title {
            font-weight: 700;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 21px;
        }

        .decoration-line {
            width: 100%;
            height: 20px;
            background: url('@/assets/images/layout/common/title-bg.png') no-repeat;
            background-size: 100% 100%;
            margin-top: -5px;
        }
    }

    .section-body {
        width: 100%;
        height: auto;
        margin-top: 10px;
        margin-bottom: 20px;
        padding: 10px;
        box-sizing: border-box;
        background: rgba(0, 64, 128, 0.2);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(51.00000075995922, 153.00000607967377, 255, 1), rgba(51.00000075995922, 153.00000607967377, 255, 0.20000000298023224)) 1 1;
    }

    .basic-section,
    .posiiton-section {
        height: 188px;
    }


    .basic-section {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }

    .basic-item {
        width: 210px;
        height: 70px;
        background: url('@/assets/images/layout/common/info-box.png') no-repeat;
        background-size: 100% 100%;
        padding: 10px 20px;

        .basic-item-title {
            font-weight: 400;
            font-size: 14px;
            color: #3399FF;
            margin-bottom: 5px;
        }

        .basic-item-info {
            width: 100%;
            height: 20px;
            font-weight: 700;
            font-size: 14px;
            color: #FFFFFF;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .basic-item.basic-item-last {
        flex: 1;
        background: url('@/assets/images/layout/common/info-box-long.png') no-repeat;
        background-size: 100% 100%;

    }


    .record-section {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 80px;
    }

    .record-item {
        width: 384px;
        height: 209px;
        background: url('@/assets/images/layout/common/result-box.png') no-repeat;
        background-size: 100% 100%;
        padding: 20px 25px;
        box-sizing: border-box;

        div {
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
        }

        .info-box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            span {
                display: inline-block;
                width: 50%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            span:nth-of-type(2) {
                text-align: right;
            }

            .status {
                width: 100px;
            }

            .danger {
                color: #FF3E81;
            }

            .success {
                color: #2EE5A8;

            }

            .pegVal {
                flex: 1;
            }
        }

        .image-box {
            width: 100%;
            height: 70px;
            overflow: auto;
            margin-bottom: 10px;
        }

        .image-item {
            height: 70px;
            width: 70px;
            margin-right: 10px;
        }

        .image-box.empty {
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
        }

        .el-image__error {
            background: #002e63;
        }
    }
}

.detail-page__popper.el-select__popper.el-popper {
    background-color: #00285a !important;

    .el-select-dropdown__item {
        color: #fff;
    }
}
</style>
