<template>
    <el-dialog
        :title="data.name"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        width="900px"
        :close-on-click-modal="false"
    >
        <div class="info-window">
            <div class="left">
                <ul>
                    <li
                        v-for="item in tablist"
                        :key="item.id"
                        :class="{'border-active': item.id == current}"
                        @click="handleTabChange(item)"
                    >
                        {{ item.label }}
                    </li>
                </ul>
            </div>
            <div class="right">
                <template v-if="current == 0">
                    <div class="bridge-picture">
                        <div class="bridge-picture_box">
                            <img
                                v-if="infoData.bridgeName === '郁江河特大桥'"
                                style="width: 100%; height: 100%"
                                src="../img/yjhtdq.jpg"
                            />
                            <img
                                v-if="infoData.bridgeName === '涪江特大桥'"
                                style="width: 100%; height: 100%"
                                src="../img/fjtdq.jpg"
                            />
                            <img
                                v-if="infoData.bridgeName === '东溪河特大桥'"
                                style="width: 100%; height: 100%"
                                src="../img/dxh_brideg.png"
                            />
                            <img
                                v-if="infoData.bridgeName === '西溪河特大桥'"
                                style="width: 100%; height: 100%"
                                src="../img/xxhdq.png"
                            />
                            <img
                                v-if="infoData.bridgeName === '油溪长江特大桥'"
                                style="width: 100%; height: 100%"
                                src="../img/yxcjtdq.jpeg"
                            />
                        </div>
                        <div class="bridge-picture_text">
                            {{ infoData.bridgeName }}
                        </div>
                    </div>
                    <div class="bridge-descriptions">
                        <el-descriptions class="margin-top" :column="2" border>
                            <el-descriptions-item>
                                <template slot="label"> 监测设备 </template>
                                {{ onLineCount }}个
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 设备在线率 </template>
                                {{ onLineRate }}%
                            </el-descriptions-item>
                            <!-- <el-descriptions-item>
                                <template slot="label"> 今日车流量 </template>
                                100辆
                            </el-descriptions-item> -->
                            <el-descriptions-item>
                                <template slot="label"> 健康状态 </template>
                                <span
                                    style="color: #f35675"
                                    v-if="infoObjData.healthAssessmentLevel == 4"
                                >
                                    严重异常
                                </span>
                                <span
                                    style="color: #ff884d"
                                    v-if="infoObjData.healthAssessmentLevel == 3"
                                >
                                    中等异常
                                </span>
                                <span
                                    style="color: #ffea80"
                                    v-if="infoObjData.healthAssessmentLevel == 2"
                                >
                                    轻微异常
                                </span>
                                <span
                                    style="color: #1affd9"
                                    v-if="infoObjData.healthAssessmentLevel == 1"
                                >
                                    基本完好
                                </span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 建设时间 </template>
                                {{ data.createTime && data.createTime.split(' ')[0] }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 长度 </template>
                                {{ data.length }} 米
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 桥梁类型 </template>
                                {{ data.typeValue }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 所在路段 </template>
                                {{ data.roadSegmentName }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 桥梁方向 </template>
                                {{ data.directionValue }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 桥面铺装 </template>
                                {{ data.surfaceinstallValue }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> </template>
                            </el-descriptions-item>
                            <el-descriptions-item :span="2">
                                <template slot="label"> 地址 </template>
                                重庆市彭水县莲湖镇多家村喇叭寨
                            </el-descriptions-item>
                            <el-descriptions-item :span="2">
                                <template slot="label"> 设计单位 </template>
                                {{ data.designUnit }}
                            </el-descriptions-item>
                            <el-descriptions-item :span="2">
                                <template slot="label"> 监视单位 </template>
                                {{ data.watchUnit }}
                            </el-descriptions-item>
                            <el-descriptions-item :span="2">
                                <template slot="label"> 施工单位 </template>
                                {{ data.constructUnit }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </template>

                <template v-if="current == 1">
                    <div class="video-content">
                        <div class="video-content_select">
                            <el-select
                                v-model="cameraIndexCode"
                                placeholder="请选择"
                                @change="hanldeChange"
                            >
                                <el-option
                                    v-for="item in resources"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </div>
                        <div class="video-play-window">
                            <video-player
                                playerId="playerID"
                                :cameraIndexCode="cameraIndexCode"
                                :resources="resources"
                                v-if="showplay"
                                ref="player"
                                :isShowScreen="true"
                            />
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <!-- <div class="info-window">
            <div class="box">
                <div class="container">
                    <div class="item">
                        <el-select
                            v-model="cameraIndexCode"
                            placeholder="请选择"
                            @change="hanldeChange"
                        >
                            <el-option
                                v-for="item in resources"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="main">
                        <div class="video-play-window">
                            <video-player
                                :playerId="'player'"
                                :cameraIndexCode="cameraIndexCode"
                                :resources="resources"
                                v-if="showplay"
                                ref="player"
                                :isShowScreen="true"
                            />
                        </div>
                        <div class="detail-info-show">
                            <div class="tag">
                                <div class="tag-item">
                                    <span class="tag-active">健康状态</span>
                                    <span v-if="infoObjData.healthAssessmentLevel == 4"
                                        >严重异常</span
                                    >
                                    <span v-if="infoObjData.healthAssessmentLevel == 3"
                                        >中等异常</span
                                    >
                                    <span v-if="infoObjData.healthAssessmentLevel == 2"
                                        >轻微异常</span
                                    >
                                    <span v-if="infoObjData.healthAssessmentLevel == 1"
                                        >基本完好</span
                                    >
                                </div>
                                <div class="tag-item">
                                    <span class="tag-active">健康报告</span>
                                    <span>{{ infoObjData.count }} 份</span>
                                </div>
                            </div>
                            <div
                                class="info"
                                v-loading="loading"
                                element-loading-text="加载中"
                                element-loading-spinner="el-icon-loading"
                                element-loading-background="rgba(0, 0, 0, 0.1)"
                            >
                                <span>
                                    <p>建设时间</p>
                                    <p>:</p>
                                    <p>
                                        {{
                                            data.createTime &&
                                            data.createTime.split(' ')[0]
                                        }}
                                    </p>
                                </span>
                                <span>
                                    <p>长度</p>
                                    <p>:</p>
                                    <p>{{ data.length }}</p>
                                </span>
                                <span>
                                    <p>桥梁类型</p>
                                    <p>:</p>
                                    <p>{{ data.typeValue }}</p>
                                </span>
                                <span>
                                    <p>所在路段</p>
                                    <p>:</p>
                                    <p>{{ data.roadSegmentName }}</p>
                                </span>
                                <span>
                                    <p>桥梁方向</p>
                                    <p>:</p>
                                    <p>{{ data.directionValue }}</p>
                                </span>
                                <span>
                                    <p>桥面铺装</p>
                                    <p>:</p>
                                    <p>{{ data.surfaceinstallValue }}</p>
                                </span>
                                <span>
                                    <p>设计单位</p>
                                    <p>:</p>
                                    <p>{{ data.designUnit }}</p>
                                </span>
                                <span>
                                    <p>监视单位</p>
                                    <p>:</p>
                                    <p>{{ data.watchUnit }}</p>
                                </span>
                                <span>
                                    <p>施工单位</p>
                                    <p>:</p>
                                    <p>{{ data.constructUnit }}</p>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    </el-dialog>
</template>

<script>
import videoPlayer from './videoPlayer.vue'
export default {
    name: 'infoWindow',
    components: {
        videoPlayer,
    },
    data() {
        return {
            data: {},
            loading: false,
            showplay: false,
            showDialog: false,
            infoObjData: {},
            resources: [],
            cameraIndexCode: '',
            dialogVisible: false,
            infoData: {},
            current: 0,
            bridgeCode: null, //桥梁编码
            bridgeId: null, //桥梁id
            onLineCount: 0, //在线设备数量统计
            onLineRate: 0, //设备在线率
            tablist: [
                {
                    id: 0,
                    label: '桥梁简介',
                },
                {
                    id: 1,
                    label: '视频监控',
                },
                {
                    id: 2,
                    label: '桥梁监测',
                },
            ],
        }
    },
    mounted() {},
    methods: {
        handleTabChange(data) {
            this.current = data.id
            if (data.id == 2) {
                // this.$router.push({
                //     name: 'SingleBridge',
                // })
                this.current = 0

                let tokenKey = sessionStorage.getItem('jkjcKey')
                window.open(
                    `https://cqtz.luancloud.cn:31081/ims/CQTZ/Tjyl/index?tokenKey=${tokenKey}&bridgeCode=${this.bridgeCode}`
                )
            } else {
                if (data.id === 1) {
                    this.$nextTick(() => {
                        this.showplay = true
                        this.loadData()
                    })
                }
            }
        },
        handleClose(done) {
            this.$refs.player && this.$refs.player.closeVideo()
            this.showplay = false
            done()
        },
        open(data) {
            this.infoData = data
            console.log('this.infoData', data)
            this.bridgeId = data.bridgeId
            this.bridgeCode = data.bridgeCode
            this.dialogVisible = true
            this.loadData()
            this.getBridgeNumber()
        },
        loadData() {
            this.loading = true
            let {tpBridgeId, bridgeId} = this.infoData
            this.$http.get('${yhxt}/bizTpBridge/v1/detail/' + bridgeId).then((res) => {
                this.loading = false
                this.infoObjData = res.data
                this.data = res.data.bridgeInformation
                let resources = res.data.resources

                if (resources.length !== 0) {
                    this.resources = resources.map((i) => {
                        return {
                            label: i.name,
                            value: i.cameraIndexCode,
                            ...i,
                        }
                    })
                    this.cameraIndexCode = this.resources[0].value
                } else {
                    this.cameraIndexCode = ''
                    this.resources = []
                }

                console.log(this.$refs, ' this.$refs.player')
                setTimeout(() => {
                    console.log(this.$refs, ' this.$refs.player')
                    // this.$refs.player.createPlayer(this.cameraIndexCode)
                    this.$refs.player.getVideoURL(this.cameraIndexCode)
                }, 500)
            })
        },
        hanldeChange(val) {
            // this.$refs.player.closeVideo()
            this.$nextTick(() => {
                // this.$refs.player.createPlayer(val)
                this.$refs.player.getVideoURL(this.cameraIndexCode)
            })
        },
        //获取桥梁在线设备数量
        getBridgeNumber() {
            let params = {
                pageBean: {
                    pageSize: -1,
                },
                querys: [
                    {
                        group: 'main',
                        operation: 'EQUAL',
                        parentGroup: '',
                        property: 'TP_BRIDGE_ID_',
                        relation: 'AND',
                        value: this.bridgeId,
                    },
                ],
            }
            this.$http
                .post('${yhxt}/bizTpDevice/v1/deviceCountTotal', params)
                .then((res) => {
                    let data = res.data || {}
                    this.onLineCount = data.onlineCount
                    this.onLineRate = parseFloat(
                        (data.onlineCount / data.total) * 100
                    ).toFixed(2)
                })
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/ .el-select {
    min-width: 300px;
}
/deep/ .el-dialog {
    min-width: 800px !important;
    //   padding: 30px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: url('../img/bg_border.png') no-repeat;
    background-size: cover;
    background-size: 100% 100%;
}
/deep/ .el-dialog__header .el-dialog__title {
    display: none;
}
/deep/ .el-dialog__body {
    width: 98%;
    padding: 0;
    background: transparent !important;
}
/deep/ .el-dialog__headerbtn {
    width: 20px;
    height: 20px;
    display: flex;
    background-color: #0094ff;
    border-radius: 50%;
    /* padding: 5px; */
    justify-content: center;
    align-items: center;
    i {
        color: #fff !important;
        font-size: 18px !important;
    }
}
/deep/ .el-descriptions__body,
/deep/ .el-descriptions-item__label.is-bordered-label {
    background-color: transparent;
    color: #fff;
}
/deep/ .el-descriptions .is-bordered .el-descriptions-item__cell {
    border-color: #0e3a66;
    height: 45px;
}
/deep/ .el-dialog__header {
    background: transparent;
    border: none;
}
p {
    margin: 0;
    padding: 0;
}
h4 {
    text-align: center;
    font-size: 16px;
    margin: 0;
    padding: 0;
    line-height: 30px;
}
ul,
li {
    list-style: none;
    padding: 0;
    margin: 0;
}
.info-window {
    width: 100%;
    height: 432px;
    color: #f6f9fd;
    display: flex;
    padding: 16px 10px;
    box-sizing: border-box;
    background-color: #001f3d;
}
.left {
    width: 140px;
    height: 100%;
    ul {
        display: flex;
        flex-direction: column;
        li {
            cursor: pointer;
            width: 100%;
            height: 40px;
            margin: 8px 0;
            line-height: 40px;
            text-align: center;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            background-size: 100% 100%;
            background-image: url('../img/icon-border-normal.png');
        }
        .border-active {
            background-image: url('../img/icon-border-active.png');
        }
    }
}
.right {
    flex: 1;
    height: 100%;
    margin-left: 16px;
    padding: 18px;
    display: flex;
    background: #00254a;
    .bridge-picture {
        width: 280px;
        height: 100%;
        .bridge-picture_box {
            height: 300px;
            width: 100%;
            border: 1px solid #25579b;
            border-radius: 10px;
            overflow: hidden;
        }
        .bridge-picture_text {
            text-align: center;
            margin-top: 32px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 700;
            font-size: 18px;
            color: #ffffff;
        }
    }
    .bridge-descriptions {
        flex: 1;
        height: 100%;
        padding-left: 16px;
        padding-right: 8px;
    }
}
.video-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .video-play-window {
        width: 100%;
        flex: 1;
        margin-top: 16px;
        background-color: rgba($color: #000000, $alpha: 0.3);
    }
}
.container {
    display: flex;
    flex-direction: column;
}
.item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .active {
        background-color: #ffc03c;
    }
    span {
        background-color: #156fd8;
        color: #fff;
        padding: 0 18px;
        line-height: 20px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        &:nth-child(n + 1) {
            margin-right: 10px;
        }
    }
}
.main {
    display: flex;
}
// .video-play-window {
//     width: 400px;
//     height: 400px;
//     margin-right: 10px;
// }

.detail-info-show {
    flex: 1;
    height: 400px;
    display: flex;
    flex-direction: column;
    .tag {
        display: flex;
        .tag-item {
            &:nth-child(2) {
                margin-left: 10px;
            }
            .tag-active {
                background: #0eb6ff;
            }
            span {
                display: inline-block;
                width: 80px;
                border: 1px solid #0c6797;
                line-height: 28px;
                text-align: center;
                &:first-child {
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                }
                &:nth-child(n + 1) {
                    border-right: none;
                }
                &:last-child {
                    border-right: 1px solid #0c6797;
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                }
            }
        }
    }
    .info {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        span {
            display: flex;
            p {
                font-size: 14px;
                line-height: 40px;
                text-align-last: justify;
                &:nth-child(1) {
                    width: 60px;
                }
                &:nth-child(2) {
                    margin-left: 3px;
                    margin-right: 5px;
                }
            }
        }
    }
}
</style>
<style>
[data-v-22d46076] .el-input .el-input__inner {
    background-color: #00254a !important;
}
</style>
