<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 ;">设备类型：{{ warnItem.baoxiu }} </span>
              <span style=" margin: 0  0 10px 0 ">设备名称：智能摄像头</span>
              <span style=" margin: 0  0 10px 0 ">设备编号: {{ warnItem.id }}</span>
              <span style=" margin: 0  0 10px 0 ">报警时间：{{ warnItem.date }}</span>
              <span style=" margin: 0  0 10px 0 ">报警状态：{{ warnItem.type }} </span>
              <span style=" margin: 0  0 10px 0 ">安装位置：{{ warnItem.address }} </span>
            </div>
          </div>
          <div style=" width: 50%;">
            <h2 style="color: #fff; width: 50%;">实时画面</h2>
            <div class="video-right">
              <img style="width:100%;height: 120px;" :src="warnItem.imgUrl?warnItem.imgUrl:require('../image/jiedaotu.jpg')" />
                  <div class="prism-big-play-btn" @click="videoPlay(warnItem.inspectCode)">
                  <div class="outter"></div>
              </div>
            </div>
            
          </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="isAssigned"
                style="color: #3884d1;"
                class="round-checkbox"
                @change="handleCheck('assign')"
              >
                指派
              </el-checkbox>
              <el-checkbox
                v-model="isCompleted"
                class="round-checkbox"
                @change="handleCheck('complete')"
              >
                完成
              </el-checkbox>
            </div>
            <div style=" margin: 0  0 10px 0 "><span>处理部门：</span>
                <el-cascader
                    ref="agencyIdArray"
                    v-model.trim="agencyIdArray"
                    :options="orgOptions"
                    :props="orgOptionProps"
                    :show-all-levels="false"
                    class="select"
                    popper-class="selectPopClass"
                    @change="handleChangeAgency"
                />
            </div>
            <div style=" margin: 0  0 10px 0 "><span>转办意见：</span>

            </div>
            <div style=" margin: 0  0 10px 0 ">

            <el-input
                v-model.trim="form.content"
                :autosize="{ minRows: 5, maxRows: 10}"
                style="width: 50%;"
                maxlength="500"
                placeholder="请输入转办意见"
                type="textarea"/>
            </div>
            <div style=" margin: 0  0 10px 0 "><span>图片/附件：</span>
              <el-upload
                  :action="uploadUlr"
                  :before-upload="beforeUpload"
                  :file-list="fileList"
                  :headers="$getElUploadHeaders()"
                  :limit="3"
                  :on-preview="handleFileDownload"
                  :on-remove="handleFileRemove"
                  :on-success="handleFileSuccess"
                  accept=".doc,.pdf,.xls,.docx,.xlsx,.jpg,.png,.jpeg,.bmp,.mp4,.wma,.m4a,.mp3"
                  >
                <el-button :disabled="fileList.length === 3" size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">支持图片、word、pdf</div>
              </el-upload>
            </div>

            <!-- 按钮居中显示 -->
             <div style="display: flex; flex-direction: row; justify-content: center;">
              <el-button size="small" style="width: 100px;" type="primary" @click="handleCancle">处理告警</el-button>
             </div>
            


          </div>
        </div>

      </div>


    </el-dialog>

    <video-dialog :showDialog="showVideoDialog" :monitorCode="monitorCode"  @close="close"></video-dialog>

  </div>
</template>
<script>
import {requestPost} from "@/js/dai/request";
import Title from "@/views/dataBoard/satisfactionEval/components/Title";
import videoDialog from "../Videosurveillance/cpts/videoDialog.vue"
export default {
    name: "moreDialog",
    components: {
        Title,
        videoDialog
    },
    props: {
      showInfo: {
            type: Boolean,
            default: false
        },
      warnItem: {
        type: Object,
        default: () => {}
      },
    },
    data() {
        return {
            colList: [
				{
					align: "left",
					width: "25%",
				},
				{
					align: "left",
					width: "30%",
				},
				{
					align: "left",
					width: "30%",
				},
				{
					align: "left",
					width: "15%",
				},
			
			],
            agencyIdArray: [],
            orgOptions: [],
            orgOptionProps: {
              multiple: false,
              value: 'agencyId',
              label: 'agencyName',
              children: 'subAgencyList',
              checkStrictly: true
            },
            loading: false,
            loading1: false,
            user: this.$store.state.user,
            form: {
              operationType: "5", //处理方式[0:已回复 5、指派  6、完成并回复]
              content: "",//转办意见
              timeLimit: "",//办结时限
              categoryId: "",//事件分类
              deptId: "", //指派部门
              deptName: "",
              categoryList: [],
              files: [] //附件
            },

            fileList: [],
            uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile",
            isAssigned: false,
            isCompleted: false,
            showVideoDialog:false,
        };
    },
    computed: {},
    watch: {
    },

    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)
        // }
        handleChangeAgency(val) {
          let obj = this.$refs["agencyIdArray"].getCheckedNodes()[0].data
          if (obj) {
            this.form.orgType = obj.level === 'grid' ? 'grid' : 'agency'
            this.form.deptId = obj.agencyId
            this.form.deptName = obj.agencyName
          } else {
            this.form.orgType = ''
            this.form.orgId = ''
          }
        },

        close(){
          this.showVideoDialog = false;
        },

        //组织机构树
        async getOrgTreeList() {
          const url = "/gov/org/customeragency/agencygridtree"
          let params = {
            agencyId: this.agencyId,
            purpose: "query"
          }
          const {data, code, msg} = await requestPost(url, params)
          if (code === 0) {
            this.orgOptions = []
            this.orgOptions.push(data)
          } else {
            this.$message.error(msg)
          }
        },

        beforeUpload(file) {
          const array = file.name.split(".");
          const extension = array[array.length - 1];
          const formatarray = [
            "jpg",
            "png",
            "jpeg",
            "bmp",
            "mp4",
            "wma",
            "m4a",
            "mp3",
            "doc",
            "docx",
            "xls",
            "xlsx",
            "pdf",
          ];
          if (formatarray.indexOf(extension) === -1) {
            this.$message.error("只支持图片、word、pdf");
            return false;
          }
        },
        handleFileRemove(file) {
          if (file && file.status === "success") {
            this.fileList.splice(
                this.fileList.findIndex((item) => item.uid === file.uid),
                1
            );
          }
        },
        handleFileSuccess(res, file) {
          if (res.code === 0 && res.msg === "success") {
            const array = file.name.split(".");
            const fileType = array[array.length - 1];
            const picArray = ["jpg", "png", "jpeg", "bmp"];
            const videoarray = ["mp4", "wma", "m4a"];
            const docArray = ["doc", "docx", "xls", "xlsx", "pdf"];
            const mp3Array = ["mp3"];

            if (picArray.indexOf(fileType) > -1) {
              file.attachmentFormat = "image";
            } else if (videoarray.indexOf(fileType) > -1) {
              file.attachmentFormat = "video";
            } else if (docArray.indexOf(fileType) > -1) {
              file.attachmentFormat = "doc";
            } else if (mp3Array.indexOf(fileType) > -1) {
              file.attachmentFormat = "voice";
            }

            file.url = res.data.url;
            file.type = fileType;

            file.attachmentName = file.name;
            file.attachmentType = file.type;
            file.attachmentUrl = file.url;

            this.fileList.push(file);
          } else this.$message.error(res.msg);
        },
        //下载
        handleFileDownload(file) {
          var a = document.createElement("a");
          var event = new MouseEvent("click");
          a.download = file.name;
          a.target = '_blank';
          a.href = file.url;
          a.dispatchEvent(event);
        },

        handleCancle () {
          this.$message.success("操作成功");
          this.$emit('handleCancle')
        },

        handleCheck(type) {
          if (type === 'assign') {
            this.isCompleted = !this.isAssigned;
          } else if (type === 'complete') {
            this.isAssigned = !this.isCompleted;
          }
        },

        videoPlay(code) {
          this.showVideoDialog = true;
          this.monitorCode = code
        },
    },
    mounted() {
      this.getOrgTreeList();
    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);
}
	}


  .video-right {
        position: relative;
        background: #000;
        width: 50%;
        .prism-big-play-btn {
          position: absolute;
          transform: translate(-50%, -50%);
          left: 50%;
          top: 50%;
          width: 32px;
          height: 32px;
          background: url("../image/vidio.png") no-repeat;
          background-size: contain;
          cursor: pointer;
          .outter {
            border: 7px solid rgba(255, 255, 255, 0.51);
            width: 32px;
            height: 32px;
            border-radius: 100%;
            position: absolute;
            box-sizing: border-box;
            top: 0;
            left: 0;
          }
          .outter:hover {
            content: "";
            width: 80px;
            height: 80px;
            position: absolute;
            left: 25%;
            top: 50%;
            margin-left: -40px;
            margin-top: -40px;
            border-radius: 50%;
            //a1为经过@keyframes 规则建立的动画名称，可本身定义web
            // a2 为动画时常 ，例如：1s   2s   可自行规定浏览器
            // a3 为css自带的动画效果，有以下几个：
            // 类名称+持续时间+（变化方式,延迟时间，重复次数（infinite循环），重复方式，开始结束的状态）
            animation: warn 1s ease-out 0s infinite;
          }
          // 在warn方法里,用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
          // 0% 是动画的开始，100% 是动画的完成，建议使用百分比，会更加详细：
          @keyframes warn {
            0% {
              // transform: scale表示缩放，值表示倍数，可以指定X/Y轴
              transform: scale(0.5);
              opacity: 1;
            }
 
            30% {
              opacity: 1;
            }
 
            100% {
              transform: scale(1.4);
              opacity: 0;
            }
          }
        }
      }
</style>