<template>
  <div>
    <el-dialog :destroy-on-close="true" :modal="true" :modal-append-to-body="false" :visible="showInfo" width="993px"
      @close="handleClose" style="z-index: 120;">
      <div class="m-table">
        <div style="display: flex; flex-direction: row;">
          <div style=" width: 50%;">
            <h2 style="color: #fff; width: 50%;">告警详情</h2>
            <div style="display: flex; flex-direction: column; margin: 0 10px 10px  40px; color: #3884d1;">
              <span style=" margin: 0  0 10px 0 ;">设备类型：视频监控 </span>
              <span style=" margin: 0  0 10px 0 ">设备名称：视频监控 </span>
              <span style=" margin: 0  0 10px 0 ">设备编号:</span>
              <span style=" margin: 0  0 10px 0 ">报警时间：视频监控</span>
              <span style=" margin: 0  0 10px 0 ">报警状态：视频监控 </span>
              <span style=" margin: 0  0 10px 0 ">安装位置：视频监控 </span>
            </div>
          </div>
          <div style=" width: 50%;">
            <h2 style="color: #fff; width: 50%;">实时画面</h2>

          </div>
        </div>
        <div>
          <h2 style="color: #fff;">处理</h2>
          <div style="display: flex; flex-direction: column; margin: 0 10px 10px  40px; color: #3884d1;">
            <div style=" margin: 0  0 10px 0 ;"><span>处理方式：</span>
              <el-checkbox v-model="checked" style="  color:  #3884d1;"  class="round-checkbox">指派</el-checkbox>
              <el-checkbox v-model="checked" class="round-checkbox">完成</el-checkbox>
            </div>
            <span style=" margin: 0  0 10px 0 ">处理部门：视频监控 </span>
            <span style=" margin: 0  0 10px 0 ">转办意见:</span>
            <span style=" margin: 0  0 10px 0 ">图片/附件：视频监控</span>
          </div>
        </div>

      </div>


    </el-dialog>

  </div>
</template>
<script>
import Title from "@/views/dataBoard/satisfactionEval/components/Title";
export default {
    name: "moreDialog",
    components: {
        Title,

    },
    props: {
      showInfo: {
            type: Boolean,
            default: false
        },

    },
    data() {
        return {
            colList: [
				{
					align: "left",
					width: "25%",
				},
				{
					align: "left",
					width: "30%",
				},
				{
					align: "left",
					width: "30%",
				},
				{
					align: "left",
					width: "15%",
				},
			
			],
			header: [
				"设备类型",
				"设备编号",
				"设备位置",
				"操作",
			],
        list: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        equipmentListType: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        equipmentType: '',
            bubbleList: [
                {
                    w: 8,
                    x: 10
                },
                {
                    w: 9,
                    x: 50
                },
                {
                    w: 4,
                    x: 30
                },
                {
                    w: 5,
                    x: 80
                },
                {
                    w: 4,
                    x: 30
                },
                {
                    w: 4,
                    x: 70
                },
                {
                    w: 6,
                    x: 20
                },
                {
                    w: 8,
                    x: 50
                },
                {
                    w: 4,
                    x: 60
                },
                {
                    w: 6,
                    x: 65
                }
            ],
            // list: [
            //     {
            //         title: '常用功能',
            //         children: [
            //             {
            //                 label: '物联一张图',
            //                 navigator: ''
            //             },
            //             {
            //                 label: '居民选举',
            //                 navigator: ''
            //             },
            //             {
            //                 label: '派件管理',
            //                 navigator: 'shequzhili-Delivery-index'
            //             }, {
            //                 label: '社区宣传',
            //                 navigator: 'communityParty-comPromotion-index'
            //             }, {
            //                 label: '社区活动',
            //                 navigator: 'volunteer-activityArchive-index'
            //             }
            //         ]
            //     },
            //     {
            //         title: '人房管理',
            //         children: [
            //             {
            //                 label: '房屋管理',
            //                 navigator: 'base-community-community'
            //             },
            //             {
            //                 label: '居民信息',
            //                 navigator: 'base-resi'
            //             },
            //             {
            //                 label: '居民分类',
            //                 navigator: 'base-classification'
            //             }, {
            //                 label: '迁入记录',
            //                 navigator: 'base-huji-immigration-index'
            //             }, {
            //                 label: '迁出记录',
            //                 navigator: 'plugins-change-changerelocation'
            //             },
            //             {
            //                 label: '死亡记录',
            //                 navigator: 'plugins-change-changedeath'
            //             },
            //             {
            //                 label: '虚拟网格居民',
            //                 navigator: 'base-virtualResi'
            //             },
            //             {
            //                 label: '智能导入',
            //                 navigator: 'base-smartImport'
            //             }
            //         ]
            //     },
            //     {
            //         title:'社区党建',
            //         children:[
            //             {
            //                 label: '党组织管理',
            //                 navigator: 'communityParty-partyOrg-orgTree'
            //             },{
            //                 label: '党员信息',
            //                 navigator: 'communityParty-members-memberList'
            //             },{
            //                 label: '联建单位',
            //                 navigator: 'communityParty-regionalParty-units'
            //             },{
            //                 label: '联建活动',
            //                 navigator: 'communityParty-regionalParty-activitys'
            //             },{
            //                 label: '社区宣传',
            //                 navigator: 'communityParty-comPromotion-index'
            //             },{
            //                 label: '社区活动',
            //                 navigator: 'communityParty-activity-index'
            //             }
            //         ]
            //     }
            // ],
            loading: false,
            loading1: false,
            user: this.$store.state.user
        };
    },
    computed: {},
    watch: {
      showInfo: {
            handler(val) {
                if (val) {
                    this.bubbleList.forEach((i, index) => {
                        this.$set(
                            i,
                            'c',
                            this.forArrayValue(
                                [
                                    'rgba(255,255,255,0.2)',
                                    'rgba(255,255,255,0.4)',
                                    'rgba(255,255,255,0.6)'
                                ],
                                index
                            )
                        )
                    })
                    console.log(this.bubbleList);
                } else {
                  
                }
            },
            immediate: true,
        },
    },

    created() {
        console.log('showDialog:', this.equipmentListMore);  // 输出 showDialog 的值
         console.log('type:', this.type);  // 输出 type 的值
        
        this.bubbleList.forEach((i, index) => {
        this.$set(
            i,
            'c',
            this.forArrayValue(
            [
                'rgba(255,255,255,0.2)',
                'rgba(255,255,255,0.4)',
                'rgba(255,255,255,0.6)'
            ],
            index
            )
        )
        })
    },
    methods: {
        
        forArrayValue(array, sort) {
            return array[sort % array.length]
        },
        handleClose() {
            this.$emit("close", false);
            this.item = {};
        },
        // handelClickNavigator(navigator) {
        //     this.$emit('handelClickNavigator', navigator)
        // }
    },
    mounted() {
    console.log('showDialog:', this.showDialog);  // 输出 showDialog 的值
    console.log('type:', this.type);  // 输出 type 的值
  }
};
</script>
<style lang="scss" scoped src="@/assets/scss/dataBoard/popup-info.scss"></style>
<style lang="scss" scoped>
@import "@/assets/scss/modules/shequzhili/event-info.scss";
@import "@/assets/scss/dataBoard/dialog.scss";

@mixin fontStyle {
    color: #fff !important;
    font-size: 14px !important;
}

.title {
    margin: 0 0 20px 20px;
    color: #ffffff;
    font-size: 18px;
}

section {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px;
    box-sizing: border-box;

    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin-right: 68px;

        .imgBox {
            cursor: pointer;
            width: 90px;
            height: 73px;
            background: url("@/assets/images/shuju/home/map/1.png") no-repeat !important;
            background-size: 100% !important;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 36px;
                height: 36px;
                animation: moveUpDown 3s infinite linear;
            }
        }

        .label {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #B3E7FF;
            line-height: 60px;
        }

        .bubbles {
            position: absolute;
            width: 100%;
            height: 45%;
            top: -15px;
            left: 0;
            z-index: -1;
            overflow: hidden;
        }

        .bubble {
            position: absolute;
            width: calc(1px * var(--w));
            height: calc(1px * var(--w));
            background: var(--c);
            border-radius: 50%;
            left: calc(50% - calc(1px * calc(var(--w) / 2)));
            opacity: 0;
            bottom: 10%;
            animation: rise 3s infinite linear;
            animation-delay: calc(600ms * var(--d));
        }

        @keyframes rise {
            0% {
                left: calc(50% - calc(1px * calc(var(--w) / 2)));
                opacity: 0;
                bottom: 10%;
            }

            50% {
                opacity: 0.8;
            }

            100% {
                left: calc(1% * var(--x));
                bottom: 90%;
                opacity: 0;
            }
        }

        @keyframes moveUpDown {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-15px);
            }

            100% {
                transform: translateY(0);
            }
        }
    }
}


.el-table .thead{
    color: #c0c4cd !important;
    background: #0d2b57 !important;
   }
  /deep/ .el-input__inner {
      width: 110px !important;
      height: 32px !important;
      background: #021c49 !important;
      border: 1px solid #125aaa !important;
    //   border-radius: 12px !important;
      color: #a0cdff;
    }
    /deep/ .el-input__icon {
      line-height: 24px !important;
      color: #a0cdff;
    }
  .f-hflex{
    width: 100px;
  }
  .f-flex{
    margin-top: 20px;
  }
  .f-darkGray{
    margin-top: 10px;
  }
  .event-statistics {
    margin-bottom: 27px;
  }
  .m-table {
    padding: 20px;
		// margin-top: 5px;
		// overflow: hidden;
		// min-height: 200px;
		.table {
			box-sizing: border-box;
			width: 100%;
			border: none;
			table-layout: fixed;
			&-header {
				width: 100%;
				// height: 56px;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.65);
				line-height: 20px;
				&-th {
					text-align: left;
					border: none;
					padding: 10px 5px 10px 24px;
					// width: calc(100% / 5);
				}
			}
			&-body {
				box-sizing: border-box;
				width: 100%;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				line-height: 20px;
				&-tr {
					box-sizing: border-box;
					width: 100%;
					min-height: 56px;
					.td {
						box-sizing: border-box;
						text-align: left;
						border: none;
						padding: 18px 5px 18px 24px;
						>div {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							word-wrap: normal;
						}
						a {
							font-size: 14px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #1a95ff;
							line-height: 20px;
							cursor: pointer;
						}
					}
				}
				&-tr:nth-child(2n-1) {
					background: rgba(26, 149, 255, 0.15);
				}
				// &-tr:hover {
				//   background: url("../../../../assets/img/modules/visual/hover-bac.png")
				//     no-repeat center;
				//   background-size: 100% 100%;
				// }
			}
			/deep/ .el-scrollbar__wrap {
				width: 100% !important;
				overflow-x: hidden !important;
			}
		}
		.g-scrollar {
			width: 100%;
			overflow-x: hidden;
			overflow-y: auto;
		}
		.orange {
			color: #FFAA00
		}
		.green {
			color: #04C790
		}
		.table-status {
			position: relative;
			height: 300px;
			// 暂无数据
			.no-data {
				&-img {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					width: 120px;
				}
			}
		}
/* 设置 el-checkbox 为圆形样式 */
/deep/.round-checkbox .el-checkbox__input {
  width: 18px;
  height: 18px;
  border-radius: 50%; /* 外部边框设置为圆形 */
}

/deep/.round-checkbox .el-checkbox__inner {
  width: 18px;
  height: 18px;
  border-radius: 50%; /* 内部圆形边框 */
  border: 2px solid #f8f8f8; /* 自定义边框颜色 */
  background-color: transparent; /* 未选中状态背景透明 */

}

/* 选中状态样式 */
/deep/.round-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #007FF1; /* 选中状态的内部填充颜色 */
  border-color: #007FF1;
}

/* 修改选中后的中心圆点 */
/deep/.round-checkbox .el-checkbox__input.is-checked .el-checkbox__inner::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ffffff; /* 圆形中心点的颜色 */
  transform: scale(1);
}
	}
</style>