<template>
    <el-dialog
        :title="device.name"
        :visible.sync="visible"
        :before-close="handleClose"
        width="800px"
        :close-on-click-modal="false"
    >
        <div class="info-window">
            <div class="box">
                <div class="detail-header">
                    <div
                        class="detail-header-item"
                        v-for="item in deviceheader"
                        :key="item.name"
                        :style="`width:${item.width}`"
                    >
                        {{ item.name }}
                    </div>
                </div>
                <div class="detail-content">
                    <div
                        class="detail-content-item"
                        v-for="(item, index) in deviceDetailData"
                        :key="item.id"
                    >
                        <div class="detail-label show-ellipsis" style="width: 7%">
                            {{ index + 1 }}
                        </div>
                        <div
                            class="detail-label show-ellipsis"
                            style="width: 13%"
                            :title="item.tpBridgeName"
                        >
                            {{ item.tpBridgeName }}
                        </div>
                        <div
                            class="detail-label show-ellipsis"
                            style="width: 12%"
                            :title="item.roadSegmentName"
                        >
                            {{ item.roadSegmentName }}
                        </div>
                        <div
                            class="detail-label show-ellipsis"
                            style="width: 25%"
                            :title="item.deviceName"
                        >
                            {{ item.deviceName }}
                        </div>
                        <div
                            class="detail-label show-ellipsis"
                            style="width: 13%"
                            :title="formatType(item.type)"
                        >
                            {{ formatType(item.type) }}
                        </div>
                        <div
                            class="detail-label show-ellipsis"
                            style="width: 20%"
                            :title="item.detailTypeName"
                        >
                            {{ item.detailTypeName }}
                        </div>
                        <div
                            :class="`detail-label show-ellipsis label-color-${item.state}`"
                            style="width: 10%"
                            :title="formatState(item.state)"
                        >
                            {{ formatState(item.state) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'DetailDialog',
    data() {
        return {
            visible: false,
            device: {
                name: '',
            },
            deviceDetailData: [],
            deviceheader: [
                {
                    name: '序号',
                    width: '7%',
                },
                {
                    name: '所在桥梁',
                    width: '13%',
                },
                {
                    name: '所在路段',
                    width: '12%',
                },
                {
                    name: '设备名称',
                    width: '25%',
                },
                {
                    name: '设备类型',
                    width: '13%',
                },
                {
                    name: '设备详细类型',
                    width: '20%',
                },
                {
                    name: '设备状态', //状态 离线0 在线1 故障2
                    width: '10%',
                },
            ],
        }
    },
    methods: {
        open(typeData, listData) {
            this.device = typeData
            this.visible = true
            this.deviceDetailData = listData
        },
        formatState(state) {
            let label = ''
            switch (state) {
                case 0:
                    label = '离线'
                    break
                case 1:
                    label = '在线'
                    break
                case 2:
                    label = '故障'
                    break
                default:
                    break
            }
            return label
        },
        formatType(state) {
            let label = ''
            switch (state) {
                case 1:
                    label = '环境'
                    break
                case 2:
                    label = '作用'
                    break
                case 3:
                    label = '结构响应'
                    break
                case 4:
                    label = '结构变化'
                    break
                default:
                    break
            }
            return label
        },
        handleClose() {
            this.visible = false
        },
    },
}
</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 {
  padding: 0;
  background: transparent !important;
  width: 90%;
  margin: 0 auto;
}
/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;
  }
}
.detail-header{
    display: flex;
    background-color: rgba(#0a4966, 0.6);
    margin-top: 20px;
    .detail-header-item{
        font-size: 16px;
        font-weight: bold;
        padding: 10px 4px;
        box-sizing: border-box;
        text-align: center;
    }
}
.detail-content{
    height: 360px;
    overflow-y:auto ;
    .detail-content-item{
        display: flex;
        border-bottom: 1px solid #0a4966;
        // border-left: 1px solid #0a4966;
        // border-right: 1px solid #0a4966;
    }
    .detail-content-item:nth-of-type(2n){
        background-color: rgba(#0a4966, 0.2);
    }
    .detail-label{
        font-size: 14px;
        padding: 6px 4px;
        box-sizing: border-box;
        text-align: center;
    }
    .label-color-0{
        color: #ff9a00; 
    }
    .label-color-1{
        color: #0283fc;
    }
    .label-color-2{
        color: #e43c2f;
    }
}
::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
    background-color: #0f3a5c;
    border-radius: 6px;
}

</style>
