<template>
    <el-dialog custom-class="par-marker-dialog" v-model="visible" :destroy-on-close="true">
        <div class="marker-dialog-header">
            <img src="~@/assets/images/layout/common/dialog-point-icon.png" />
            <span class="marker-dialog-title" v-if="type === 'xcPlace' || type === 'jyPlace'">{{ pointData.name || ""
            }}</span>
            <span class="marker-dialog-title" v-else-if="type === 'event'"> 实时事件 </span>
            <span class="marker-dialog-title" v-else-if="type === 'task'"> 救援任务 </span>
            <span class="marker-dialog-title" v-else-if="type === 'xcCar'"> {{ "巡查车 " + pointData.carNumber || ""
                }}</span>
        </div>
        <div class=" marker-dialog-body">
            <template v-if="type === 'xcPlace' || type === 'jyPlace'">
                <section-title type="line" title="驻点基础信息"></section-title>
                <div class="marker-info">
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">场所类型：</div>
                        <div class="marker-info-item-value ellipsis">{{ filterDictTextByKey(jydcslx, pointData.type)
                            ||
                            '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">驻点类型：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.type === 1 ? '巡查驻点' : '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">巡查队伍：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.teamName || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">所属监控中心电话：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.monitorTel || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">辖区交通综合执法大队：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.managementD || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">辖区交通综合执法支队</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.managementZ || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">辖区交巡警大队：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.trafficPoliceD || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">辖区交巡警支队：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.trafficPoliceZ || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">点位桩号：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.peg || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">点位桩号附加：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.pegAdd || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">点位桩号全值：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.pegVal || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">方向：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.direction || '-' }}</div>
                    </div>
                </div>
                <section-title type="line" title="驻点人员信息"></section-title>
                <div class="marker-info">
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">负责人：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.linkName || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">负责人电话：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.linkTel || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">值班电话：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.dutyTel || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">值班人数：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.dutyNum || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">轮班人数：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.turnNum || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">救援服务电话：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.rescusTel || '-' }}</div>
                    </div>
                </div>
                <div class="marker-btn-wrap" v-if="type === 'jyPlace'">
                    <el-button type="primary" size="mini" @click="showArea(pointData)">显示救援区域</el-button>
                    <el-button type="primary" size="mini" @click="hideArea(pointData)">隐藏救援区域</el-button>
                </div>
            </template>
            <template v-if="type === 'event'">
                <section-title type="line" title="事件信息"></section-title>
                <div class="marker-info">
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">所属路段：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.roadName || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">事件类型：</div>
                        <div class="marker-info-item-value ellipsis">{{ filterDictTextByKey(sjlx,
                            pointData.eventType)
                            ||
                            '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">发生时间：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.eventTime || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">事件等级：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.eventLevel ? pointData.eventLevel
                            +
                            '级' : '-' }}</div>
                    </div>

                    <div class="marker-info-item">
                        <div class="marker-info-item-label">拥堵里程：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.blockLength || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">伤亡情况：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.hurtUserNum ? '伤' +
                            pointData.hurtUserNum + '人' : '' }} {{ pointData.deadUserNum ? '亡' +
                                pointData.deadUserNum + '人' : '' }}</div>
                    </div>
                    <div class="marker-info-item marker-info-item-row">
                        <div class="marker-info-item-label">位置：</div>
                        <div class="marker-info-item-value ellipsis">{{ filterDictTextByKey(xsfx,
                            pointData.direction)
                            ||
                            '-' }} {{ pointData.pegSVal || '-' }} 至 {{ pointData.pegEVal || '-' }}</div>
                    </div>
                    <div class="marker-info-item marker-info-item-row">
                        <div class="marker-info-item-label">事件概述：</div>
                        <div class="marker-info-item-value">{{ pointData.memo || '-' }}</div>
                    </div>
                </div>
                <section-title type="line" title="周边摄像头"></section-title>
                <div class="camera-list-wrap">
                    <div class="no-more" v-if="cameraInfos.length === 0">
                        暂无周边摄像头
                    </div>
                    <div class="camera-list" v-else v-for="(item, index) in cameraInfos" :key="index">
                        <div :class="['title', item.status === 1 ? 'online' : '']">{{ item.name || '-' }}</div>
                        <div :class="['status', item.status === 1 ? 'online' : 'offline']">{{ item.status === 1 ? '在线' :
                            '离线' }}</div>
                    </div>
                </div>
                <section-title type="line" title="处置流程"></section-title>
                <div class="handle-process-wrapper" :class="{ 'all-handle': showAllHandle }">
                    <div @click="handleAll" class="more-handle" v-if="!showAllHandle"></div>
                    <div :class="['handle-process-item', { 'handle-process-item-after': index !== pointData.handles.length - 1 }]"
                        v-for="(item, index) in pointData.handles" :key="index">
                        <div class="process-info">
                            <div class="process-time">{{ item.createTime || '-' }}</div>
                            <div class="process-content">处置环节：{{ filterDictTextByKey(sj_zt, item.eventNode + '') || '-'
                            }}
                            </div>
                            <div class="process-content">处置人：{{ item.handleUserName || '-' }}</div>
                            <div class="process-content">所属队伍：{{ item.handleTeamName || '-' }}</div>
                            <div class="process-content">处置时间：{{ item.handleTime || '-' }}</div>
                            <div class="process-content" :title="item.handleInfo">处置情况：{{ item.handleInfo || '-' }}
                            </div>
                        </div>
                        <div class="dispose-img">
                            <el-image v-if="item.filesList && item.filesList.length > 0" fill="cover" class="img-comp"
                                :src="item.filesList[0]" :preview-src-list="item.filesList">
                            </el-image>
                            <div v-else class="img-comp empty"> 无处置图片 </div>
                        </div>
                    </div>
                    <div v-if="pointData.handles && pointData.handles.length > 0" class="no-more">没有更多了</div>
                    <div v-if="!pointData.handles || pointData.handles.length === 0" class="no-more">暂无处置流程</div>
                </div>
            </template>
            <template v-if="type === 'task'">
                <section-title type="line" title="救援信息"></section-title>
                <div class="marker-info">
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">所属路段：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.roadName || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">救援类型：</div>
                        <div class="marker-info-item-value ellipsis">{{ filterDictTextByKey(jylx,
                            pointData.rescueType)
                            ||
                            '-' }}</div>
                    </div>

                    <div class="marker-info-item">
                        <div class="marker-info-item-label">报案时间：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.rescueTime || '-' }}</div>
                    </div>


                    <div class="marker-info-item">
                        <div class="marker-info-item-label">事发天气：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.weather || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">故障车牌：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.holdupUserNum || '-' }}</div>
                    </div>
                    <div class="marker-info-item">
                        <div class="marker-info-item-label">车主电话：</div>
                        <div class="marker-info-item-value ellipsis">{{ pointData.carUserTel || '-' }}</div>
                    </div>
                    <div class="marker-info-item marker-info-item-row">
                        <div class="marker-info-item-label">位置：</div>
                        <div class="marker-info-item-value ellipsis">{{ filterDictTextByKey(xsfx,
                            pointData.direction)
                            ||
                            '-' }} {{ pointData.pegVal || '-' }}</div>
                    </div>
                    <div class="marker-info-item marker-info-item-row">
                        <div class="marker-info-item-label">占道情况：</div>
                        <div class="marker-info-item-value">
                            <span class="type-tag" v-for="(item, index) in pointData.occupy">
                                {{ filterDictTextByKey(zdqk, item) || '-' }}
                            </span>
                        </div>
                    </div>
                </div>
                <section-title type="line" title="周边摄像头"></section-title>
                <div class="camera-list-wrap">
                    <div class="no-more" v-if="cameraInfos.length === 0">
                        暂无周边摄像头
                    </div>
                    <div class="camera-list" v-else v-for="(item, index) in cameraInfos" :key="index">
                        <div :class="['title', item.status === 1 ? 'online' : '']">{{ item.name || '-' }}</div>
                        <div :class="['status', item.status === 1 ? 'online' : 'offline']">{{ item.status === 1 ? '在线' :
                            '离线' }}</div>
                    </div>

                </div>
                <section-title type="line" title="处置流程"></section-title>
                <div class="handle-process-wrapper" :class="{ 'all-handle': showAllHandle }">
                    <div class="marker-btn-wrap" v-if="pointData.handles && pointData.handles.length > 0">
                        <el-button type="primary" size="mini" @click="showHandlePlace(pointData)">显示处置点位</el-button>
                        <el-button type="primary" size="mini" @click="hideHandlePlace(pointData)">隐藏处置点位</el-button>
                    </div>
                    <div @click="handleAll" class="more-handle" v-if="!showAllHandle"></div>
                    <div :class="['handle-process-item', { 'handle-process-item-after': index !== pointData.handles.length - 1 }]"
                        v-for="(item, index) in pointData.handles" :key="index">
                        <div class="process-info">
                            <div class="process-time">{{ item.createTime || '-' }}</div>
                            <div class="process-content">处置环节：{{ filterDictTextByKey(jy_czlc, item.rescueNode + '') ||
                                '-'
                                }}
                            </div>
                            <div class="process-content">处置人：{{ item.handleUserName || '-' }}</div>
                            <div class="process-content">所属队伍：{{ item.handleTeamName || '-' }}</div>
                            <div class="process-content">处置时间：{{ item.handleTime || '-' }}</div>
                            <div class="process-content" :title="item.handleInfo">处置情况：{{ item.handleInfo || '-' }}
                            </div>
                        </div>
                        <div class="dispose-img">
                            <el-image v-if="item.filesList && item.filesList.length > 0" fill="cover" class="img-comp"
                                :src="item.filesList[0]" :preview-src-list="item.filesList">
                            </el-image>
                            <div v-else class="img-comp empty"> 无处置图片 </div>
                        </div>
                    </div>
                    <div v-if="pointData.handles && pointData.handles.length > 0" class="no-more">没有更多了</div>
                    <div v-if="!pointData.handles || pointData.handles.length === 0" class="no-more">暂无处置流程</div>
                </div>
            </template>
            <template v-if="type === 'xcCar'">
                <section-title type="line" title="车辆视频"></section-title>
                <div class="car-video-wrap">
                    <div class="car-list">
                        <div v-for="(item, index) in pointData.cameraInfos" :key="index"
                            :class="['car-item', item.id === currentCameraId ? 'active' : '']"
                            @click="handlePlay(item)">
                            <div class="title">{{ item.cameraType }}</div>
                            <span :class="['status', item.status === 1 ? 'online' : 'offline']">{{ item.status === 1 ?
                                '在线' :
                                '离线' }}</span>
                        </div>
                    </div>
                    <div class="player-wrap">
                        <div class="player" v-if="cameraUrl">
                            <videoPlayer ref="videoplayer"></videoPlayer>
                        </div>
                        <div v-else class="player">当前监控设备暂时无法预览</div>
                    </div>
                </div>
            </template>
        </div>
    </el-dialog>
</template>
<script>
import SectionTitle from '@/components/common/sectionTitle.vue'
import { getPatrolPointDetail, getDictByCode, getEventDetail, getRescueTaskDetail, getMonitorVideo, getRescueRegionByTeam } from "@/api/patrolAndRescue";
import videoPlayer from "@/components/common/videoPlayer.vue";
export default {
    name: 'markerDialog',
    components: { SectionTitle, videoPlayer },
    data() {
        return {
            visible: false,
            pointOriginData: {},
            pointData: {},
            jydcslx: [], // 场所类型
            xsfx: [], // 行驶方向
            sjly: [], // 事件来源
            sjlx: [], // 事件类型
            sj_zt: [], // 事件处置环节
            jylx: [], // 救援类型
            baly: [], // 报案来源
            gzcl: [], // 故障车类
            gzcx: [], // 故障车型
            zdqk: [], // 占道情况
            jy_czlc: [], // 救援处置环节
            currentCameraId: '',
            cameraInfos: [
                // {
                //     name: '摄像头1',
                //     status: '1'
                // }, {
                //     name: '摄像头1',
                //     status: '1'
                // }
            ],
            showAllHandle: false,
            cameraUrl: ''
        }
    },
    methods: {
        show(type, data) {
            this.pointData = {}
            this.visible = true
            this.type = type
            this.pointOriginData = { ...data }
            this.getData()
            this.showAllHandle = false
        },
        handleAll() {
            this.showAllHandle = true //!this.showAllHandle
        },
        async getData() {
            if (this.type === 'xcPlace' || this.type === 'jyPlace') {
                const formData = new FormData()
                formData.append('codes', 'jyd-cslx')
                getDictByCode(formData)
                    .then((res) => {
                        if (res.xcdwlx) {
                            this.jydcslx = res.xcdwlx
                        }
                    })
                const res = await getPatrolPointDetail(this.pointOriginData.id)
                this.pointData = res || {}
            } else if (this.type === 'event') {
                const formData = new FormData()
                formData.append('codes', 'xsfx,sjly,sjlx,sj_zt')
                getDictByCode(formData)
                    .then((res) => {
                        if (res) {
                            this.xsfx = res.xsfx || []
                            this.sjly = res.sjly || []
                            this.sjlx = res.sjlx || []
                            this.sj_zt = res.sj_zt || []
                        }
                    })
                const res = await getEventDetail(this.pointOriginData.id)
                this.pointData = res || {}
                this.pointData.handles = this.pointData.handles.map((item) => {
                    if (item.files && item.files.length > 0) {
                        item.filesList = item.files.map(file => {
                            return file.filePreviewUrl
                        })
                    }
                    return item
                })
            } else if (this.type === 'task') {
                const formData = new FormData()
                formData.append('codes', 'xsfx,jylx,baly,gzcl,gzcx,zdqk,jy_czlc')
                getDictByCode(formData)
                    .then((res) => {
                        if (res) {
                            this.xsfx = res.xsfx || []
                            this.jylx = res.jylx || []
                            this.baly = res.baly || []
                            this.gzcl = res.gzcl || []
                            this.gzcx = res.gzcx || []
                            this.zdqk = res.zdqk || []
                            this.jy_czlc = res.jy_czlc || []
                        }
                    })
                const res = await getRescueTaskDetail(this.pointOriginData.id)
                this.pointData = res || {}
                this.pointData.handles = this.pointData.handles.map((item) => {
                    if (item.files && item.files.length > 0) {
                        item.filesList = item.files.map(file => {
                            return file.filePreviewUrl
                        })
                    }
                    return item
                })
            } else if (this.type === 'xcCar' || this.type === 'jyCar') {
                this.pointData = { ...this.pointOriginData }
                if (this.pointData.cameraInfos && this.pointData.cameraInfos.length > 0) {
                    const target = this.pointData.cameraInfos.find((item) => item.status === 1)
                    this.currentCameraId = target.id || ''
                    if (target.id) {
                        this.cameraUrl = await this.getVideoData(target.id)
                        console.log(this.cameraUrl)
                        this.$nextTick(() => {
                            this.$refs.videoplayer.createPlayer(this.cameraUrl, target.id);
                        })
                    }
                }
            }
        },
        handlePlay(data) {
            if (data.status === 1 && this.currentCameraId !== data.id) {
                this.currentCameraId = data.id
                this.cameraUrl = this.getVideoData(data.id)
                this.$nextTick(() => {
                    this.$refs.videoplayer.createPlayer(this.cameraUrl, data.id);
                })
            }
        },
        getVideoData(id) {
            return new Promise(async (resolve) => {
                const { state, value = [] } = await getMonitorVideo({ monitorPointInfoIds: [id] })
                if (state) {
                    const url = value[0].url || ''
                    resolve(url)
                } else {
                    resolve('')
                }
            })
        },
        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 ''
            }
        },
        hideArea(data) {
            this.$parent.$refs.mainMap.clearResion(data.id)
        },
        showArea(data) {
            if (!data.teamId) {
                this.$message.warning('该驻点无关联巡查队伍，暂时无法显示救援区域信息')
                return
            }
            getRescueRegionByTeam(data.teamId).then((res) => {
                console.log(res)
                if (res.state && res.value && res.value.length > 0) {
                    const region = res.value[0].coordinate || ''
                    if (region) {
                        let regionArr = JSON.parse(region)
                        this.$nextTick(() => {
                            this.$parent.$refs.mainMap.resuceRegion(data.id, regionArr)
                        })
                    } else {
                        this.$message.warning('暂无救援区域信息')
                    }
                } else {
                    this.$message.warning('暂无救援区域信息')
                }
            })
        },
        hideHandlePlace(data) {
            this.$parent.$refs.mainMap.clearResucePlace(data.id)
        },
        showHandlePlace(data) {
            if (!data.handles || data.handles.length === 0) {
                this.$message.warning('暂时任务处置流程信息')
                return
            }
            const places = data.handles.map((item) => {
                return {
                    name: this.filterDictTextByKey(this.jy_czlc, item.rescueNode + '') || '',
                    lng: item.handleLng || '104.062283',
                    lat: item.handleLat || '30.540374',
                }
            })
            if (places && places.length > 0) {
                this.$nextTick(() => {
                    this.$parent.$refs.mainMap.resuceHandlePlace(data.id, places)
                })
            } else {
                this.$message.warning('暂时任务处置流程信息')
            }
        },
        hide() {
            this.visible = false
            this.showAllHandle = false
        },
    },
}
</script>
<style lang="scss">
.par-marker-dialog.el-dialog {
    width: 660px !important;
    height: 440px !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: -2px;
        right: -5px;
        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;
    }

    .marker-dialog-header {
        width: 240px;
        height: 40px;
        display: flex;
        align-items: center;
        overflow: hidden;

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

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

    .marker-dialog-body {
        height: 370px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .marker-info {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0 20px 0;

        .marker-info-item {
            width: 50%;
            height: 40px;
            line-height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid rgba(51, 153, 255, 0.2);

            .marker-info-item-label {
                width: 160px;
                text-align: left;
                font-weight: 700;
                font-size: 12px;
                color: #CCE6FF;
                padding: 0 10px;
            }

            .marker-info-item-value {
                flex: 1;
                text-align: left;
                font-weight: 400;
                font-size: 12px;
                color: #CCE6FF;
                border-left: 1px solid rgba(51, 153, 255, 0.2);
                padding: 0 10px;
            }

            .type-tag {
                padding: 0 5px;
            }
        }

        .marker-info-item.marker-info-item-row {
            width: 100%;
            height: auto;

            .marker-info-item-value {
                line-height: 20px;
                padding: 6px;
            }
        }
    }


    .camera-list-wrap {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .camera-list {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border: 1px solid rgba(51, 153, 255, 0.2);
        display: flex;

        .title {
            flex: 1;
            text-align: left;
            font-weight: 700;
            font-size: 12px;
            color: #CCE6FF;
            padding: 0 10px;
            box-sizing: border-box;
        }

        .title.online {
            cursor: pointer;
        }

        .title.online:hover {
            color: #41c0ff;
        }

        .status {
            width: 80px;
            box-sizing: border-box;
            padding: 0 10px;
            font-size: 12px;
            font-weight: 700;
            color: #CCE6FF;
            border-left: 1px solid rgba(51, 153, 255, 0.2);
            text-align: center;
        }

        .online {
            color: #2EE5A8;
        }

        .offline {
            color: #e05e5e;
        }

    }

    .handle-process-wrapper {
        margin-top: 10px;
        margin-bottom: 20px;
        height: 188px;
        overflow: hidden;
        position: relative;
    }

    .handle-process-wrapper.all-handle {
        height: auto;
        overflow: initial;
    }

    .no-more {
        width: 80%;
        margin: 0 auto;
        text-align: center;
        font-size: 14px;
        color: #CCE6FF;
        margin-top: 20px;
    }

    .more-handle {
        width: 45px;
        height: 28px;
        background: url('@/assets/images/layout/common/triangle-down.png') no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        animation: downicon 0.8s linear infinite alternate;
        z-index: 99;
    }

    @keyframes downicon {
        from {
            transform: translate(-50%, -5px);
            opacity: 0.2;
        }

        to {
            transform: translate(-50%, 0);
            opacity: 1;
        }
    }

    .handle-process-item {
        width: 80%;
        padding: 20px 20px;
        background-color: rgba(51, 153, 255, 0.2);
        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;
        display: flex;
        gap: 20px;
        margin: 0 auto;
        margin-bottom: 40px;
        position: relative;

        .process-info {
            flex: 1;
            position: relative;
        }

        .dispose-img {
            width: 140px;
            height: 140px;

            .img-comp {
                width: 100%;
                height: 100%;
            }

            .img-comp.empty {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 14px;
                background: #002e63;
            }

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

        .process-time {
            font-size: 16px;
            color: #CCE6FF;
            margin-bottom: 4px;
        }

        .process-content {
            font-size: 12px;
            color: #CCE6FF;
            margin-bottom: 4px;
            width: 100%;
            white-space: wrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .process-info::before {
        content: "";
        position: absolute;
        left: -10px;
        top: -10px;
        background: url('@/assets/images/layout/common/decoration-square.png') no-repeat;
        background-size: 100% 100%;
        width: 25px;
        height: 6px;
    }

    .handle-process-item::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        background: url('@/assets/images/layout/common/decoration-triangle.png') no-repeat;
        background-size: 100% 100%;
        width: 16px;
        height: 16px;
    }

    .handle-process-item-after::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -32px;
        transform: translateX(-50%);
        width: 40px;
        height: 20px;
        background: url('@/assets/images/layout/common/triangle-down.png') no-repeat;
        background-size: 100% 100%;
    }

    .car-video-wrap {
        width: 100%;
        display: flex;
        gap: 16px;
    }

    .car-list {
        width: 120px;
        height: auto;
        padding-top: 10px;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        gap: 16px;

        .car-item {
            width: 120px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid rgba(51, 153, 255, 0.3);
            background-color: rgba(51, 153, 255, 0.1);
            position: relative;

            .title {
                width: 100%;
                text-align: left;
                font-weight: 700;
                text-align: center;
                font-size: 14px;
                color: #9eb2c5;
                padding: 0 10px;
                box-sizing: border-box;
            }

            .status {
                font-size: 12px;
                position: absolute;
                right: 0px;
                top: 0px;
                color: #fff;
                padding: 0px 4px;
            }

            .status.online {
                background-color: #00d07e;

            }

            .status.offline {
                background-color: rgb(175, 175, 175);
            }
        }

        .car-item.active {
            border: 1px solid;
            border-image: linear-gradient(180deg, rgba(51, 153, 255, 1), rgba(51, 153, 255, 0.2)) 1 1;
            background-color: rgba(51, 153, 255, 0.3);
            cursor: pointer;

            .title {
                color: #d6e9fa;
            }
        }
    }

    .car-item.online {
        border: 1px solid rgba(51, 224, 255, 0.4);
        background-color: rgba(51, 224, 255, 0.2);
    }

    .car-item.online.active {
        border: 1px solid rgba(40, 218, 250, 0.6);
        background-color: rgba(40, 218, 250, 0.3);
    }

    .player-wrap {
        width: calc(100% - 140px);
        height: 342px;
        box-sizing: border-box;

        .player {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #9eb2c5;
            background-color: rgba(51, 153, 255, 0.1);
        }
    }

    .marker-btn-wrap {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
