<template>
  <div>
    <d2-container>
      <!-- <template slot="header">首页/数据查询</template> -->
      <div class="main">
        <div class="zt_right">
          <!-- <template slot="header">首页/数据查询</template> -->
          <div class="nav">当前所在位置:首页>报警记录</div>
          <div class="right_main">
            <div class="right_title">
              <i class="fa fa-file-text" aria-hidden="true" style="padding-right: 5px"></i>
              报警记录
            </div>
            <div class="right_table">
              <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          id="formLabel"
        >
          <el-form-item label="报警时间:">
            <el-date-picker
              v-model="formInline.scanTime"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="反馈状态:">
            <el-select v-model="formInline.zskName" placeholder="请选择">
              <el-option label="全部" value="shanghai"></el-option>
              <el-option label="已反馈" value="beijing"></el-option>
              <el-option label="未反馈" value="beijing1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="仓房名称:">
            <el-select
              v-model="formInline.houseName"
              multiple
              placeholder="请选择"
            >
              <el-option label="1号仓" value="first"></el-option>
              <el-option label="2号仓" value="second"></el-option>
              <el-option label="3号仓" value="third"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <el-button-group>
              <el-button type="primary">全部</el-button>
              <el-button type="primary">已反馈</el-button>
              <el-button type="primary">未反馈</el-button>
            </el-button-group>
          </el-form-item> -->

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search"
              >查询</el-button
            >
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-refresh-left" @click="reset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <el-table
          :data="alarmRecord"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#0064b9', color: '#c9f5fa' }"
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="100px"
            :index="indexMethod"
            show-overflow-tooltip
          ></el-table-column>
          <!-- <el-table-column
            prop="branchOffice"
            label="所属分公司"
            align="center"
          > 
          </el-table-column>-->
          <el-table-column prop="zskName" label="企业名称" align="center">
          </el-table-column>
          <!-- <el-table-column prop="subTreasury" label="仓库名称" align="center">
          </el-table-column> -->
          <el-table-column prop="houseName" label="仓房名称" align="center">
          </el-table-column>
          <el-table-column prop="operName" label="保管员" align="center">
          </el-table-column>
          <el-table-column prop="phoneO" label="联系方式" align="center">
          </el-table-column>

          <el-table-column prop="scanNum" label="扫描点数" align="center">
          </el-table-column>

          <el-table-column prop="excNum" label="异常点数" align="center">
          </el-table-column>
          <el-table-column prop="policTime" label="报警时间" align="center">
          </el-table-column>
          <el-table-column prop="policType" label="报警类型" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.policType === '1'">设备断开链接</div>
              <div v-if="scope.row.policType === '2'">数量异动报警</div>
            </template>
          </el-table-column>
     <!-- <el-table-column align="center" label="处理" width="180">
            <template slot-scope="scope">
              <el-button
                @click="handleCheck(scope.row)"
                type="detailbtn"
                class="fa fa-info-circle"
                size="mini"
                >查看</el-button
              >
              <el-button
                type="editbtn"
                class="fa fa-edit"
                size="mini"
                @click="fanKui(scope.row)"
                >反馈</el-button
              >
            </template>
          </el-table-column>  -->
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        >
        </el-pagination>
            </div>
          </div>
        </div>
      </div>
     <!-- 反馈弹框 -->
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogBreakFeedback"
        width="800px"
        :destroy-on-close="true"
      >
        <div class="dialogContent">
          <div class="div_top" v-if="curPointData.type == 2">
            <div class="top_left">
              <div style="display: flex">
                <div style="padding: 5px; font-weight: bold; width: 50%">
                  本次
                </div>
                <div style="padding: 5px; font-weight: bold; width: 50%">
                  上次
                </div>
              </div>

              <!-- <div class="uploadFile" id="THREEContrainer">             
            </div>-->
              <!-- 
            <iframe
              id="threeIFrame"
              width="360px"
              height="200px"
              frameborder="0"
              scrolling="auto"
              ref="dataQueryFrame"
              name="dataFrame1"
            ></iframe>-->
              <iframe
                id="threeIFrame"
                src
                width="100%"
                height="200px"
                style="border: none"
              ></iframe>
            </div>

            <!-- <div class="top_right">
            <div style="padding:5px;font-weight:bold">上次</div>
        
            <div class="uploadFile" id="THREEContrainer1"></div>

            <iframe
              id="threeIFrame2"
              width="340px"
              height="200px"
              margin-right="10px"
              frameborder="0"
              scrolling="auto"
              ref="dataQueryFrame"
              name="dataFrame2"
            ></iframe>
          </div>-->
          </div>

          <div class="div_bottom">
            <div class="bottom_left">
              <!--uploadFile start-->
              <div class="uploadFile" v-if="curPointData.status == '0'">
                <input
                  @change="uploadFileChangeEvt"
                  type="file"
                  id="file1"
                  name="file1"
                  style="display: none"
                />
                <i
                  class="el-icon-plus"
                  v-if="file1.url == ''"
                  @click="uploadImgEvt(1)"
                ></i>
                <img v-if="file1.url != ''" class="img" :src="file1.url" />
                <div class="tool" v-if="file1.url != ''">
                  <i @click="deleteFile(1)" class="el-icon-delete"></i>
                  <i @click="zoomInFile(1)" class="el-icon-zoom-in"></i>
                </div>
              </div>
              <div class="checkUploadFile" v-if="curPointData.status == '1'">
                <img
                  :src="formData.thPicture"
                  v-if="formData.thPicture != ''"
                />
              </div>
              <!--uploadFile end-->
            </div>
            <div class="bottom_right">
              <!--uploadFile start-->
              <div class="uploadFile" v-if="curPointData.status == '0'">
                <input
                  @change="uploadFileChangeEvt"
                  type="file"
                  id="file2"
                  name="file2"
                  style="display: none"
                />
                <i
                  class="el-icon-plus"
                  v-if="file2.url == ''"
                  @click="uploadImgEvt(2)"
                ></i>
                <img v-if="file2.url != ''" class="img" :src="file2.url" />
                <div class="tool" v-if="file2.url != ''">
                  <i @click="deleteFile(2)" class="el-icon-delete"></i>
                  <i @click="zoomInFile(2)" class="el-icon-zoom-in"></i>
                </div>
              </div>

              <div class="checkUploadFile" v-if="curPointData.status == '1'">
                <img
                  :src="formData.laPicture"
                  v-if="formData.laPicture != ''"
                />
              </div>
              <!--uploadFile end-->
            </div>
          </div>
        </div>
        <el-form
          :model="formData"
          ref="ruleForm"
          class="demo-ruleForm"
          label-width="100px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="扫描点数">
                <el-input
                  type="text"
                  v-model="formData.scanNum"
                  :disabled="disabled"
                ></el-input>
              </el-form-item>
              <el-form-item label="异常点数">
                <el-input
                  type="text"
                  v-model="formData.excNum"
                  :disabled="disabled"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报警类型">
                <el-input
                  type="text"
                  v-model="formData.policType"
                  :disabled="disabled"
                ></el-input>
              </el-form-item>
              <el-form-item label="报警时间">
                <el-date-picker
                style="width:100%"
                :disabled="disabled"
                  v-model="formData.policTime"
                  type="datetime"
                  value-format="yyyy-MM-dd hh:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-form-item prop="feedDescrip" label="反馈描述">
              <el-input
                type="textarea"
                placeholder="反馈描述"
                v-model="formData.feedDescrip"
                :disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            style="background: #007c36"
            class="iconfont iconqueren"
            @click="dialogConfirmBtn()"
            >确定</el-button
          >
          <el-button
            type="primary"
            style="background: #007c36"
            class="iconfont iconquxiao"
            @click="dialogCancelBtn()"
            >取消</el-button
          >
        </div>
      </el-dialog>

      <el-dialog title="查看图片" :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
    </d2-container>
  </div>
</template>
<script>
import api from "@/api";
// 1  异常点   2  断开
export default {
  name: "alarmRecord",

  data() {
    return {
      dialogTitle: "",
      //头部查询条件
      formInline: {
        cfName: "",
        scanTime: "",
      },
      //弹框数据初始化
      formData: {
        scanNum: "",
        excNum: "",
        policType: "",
        feedDescrip: "",
      },
      dialogBreakFeedback: false,
      //表格字段
      alarmRecord: [],
      //分页
      pagination: {
        // 每页显示的条数
        pageSize: 10,
        // 当前页
        curPage: 1,
        // 总数
        total: 20,
      },
      //
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      curPointData: {
        type: "",
      },
      file1: { file: null, url: "" },
      file2: { file: null, url: "" },
      zskList: [],
      ckList: [],
      blList: [
        {
          value: 0,
          label: "设备断开链接",
        },
        {
          value: 1,
          label: "总数报警",
        },
        {
          value: 2,
          label: "逐次数量报警",
        },
      ],

      //断开反馈弹框初始化
      dialogBreakFeedback: false,
      disabled: false,
      dialogVisible: false,
      dialogImageUrl: "",
    };
  },
  methods: {
    search() {},
    reset() {},
    canvasDataURL(path, obj, callback) {
      var img = new Image();
      img.src = path;
      img.onload = function () {
        var that = this;
        // 默认按比例压缩
        var w = that.width,
          h = that.height,
          scale = w / h;
        w = obj.width || w;
        h = obj.height || w / scale;
        var quality = 0.7; // 默认图片质量为0.7
        //生成canvas
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量
        if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
          quality = obj.quality;
        }
        // quality值越小，所绘制出的图像越模糊
        var base64 = canvas.toDataURL("image/jpeg", quality);
        // 回调函数返回base64的值
        callback(base64);
      };
    },

    photoCompress(file, w, objDiv) {
      var that = this;
      var ready = new FileReader();
      console.log(file, ".......");
      /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
      ready.readAsDataURL(file);
      ready.onload = function () {
        var re = this.result;

        that.canvasDataURL(re, w, objDiv);
      };
    },

    uploadImgEvt(val) {
      var id = "file" + val;
      document.getElementById(id).click();
    },

    uploadFileChangeEvt(val) {
      console.log(val, "val");
      var that = this;
      var id = val.target.id;
      var input = document.getElementById(id);
      if (input.files.length > 0) {
        var file = document.getElementById(id).files[0];
        console.log(file);
        if (id === "file1") {
          //this.file1.url = URL.createObjectURL(file);
          //调用压缩方法

          this.photoCompress(
            file,
            {
              quality: 0.3,
            },
            function (base64Code) {
              console.log("aaaaa");
              that.file1.url = base64Code;
              //this.file.url = base64Code;
              console.log(base64Code, "......???");
            }
          );
        } else if (id === "file2") {
          //this.file2.url = URL.createObjectURL(file);

          this.photoCompress(
            file,
            {
              quality: 0.3,
            },
            function (base64Code) {
              console.log("aaaaa");
              that.file2.url = base64Code;
              //file.url = base64Code;
              console.log(base64Code, "......???");
            }
          );
        }
      }
    },
    //图片删除
    deleteFile(val) {
      if (val == 1) {
        this.file1.url = "";
        this.file1.file = "";
        var input = document.getElementById("file1");
        input.value = "";
      } else if (val == 2) {
        this.file2.url = "";
        this.file2.file = "";
        var input = document.getElementById("file2");
        input.value = "";
      }
    },
    //图片放大
    zoomInFile(val) {
      this.dialogVisible = true;
      if (val == 1) {
        this.dialogImageUrl = this.file1.url;
      } else if (val == 2) {
        this.dialogImageUrl = this.file2.url;
      }
    },

    feekbackAndCheck(pointData) {
      console.log(pointData, "pointData");
      var that = this;

      //this.$router.push({ path: "/doubleThree" });
      that.getCheckInfo(pointData.id, (res) => {
        console.log(res, "//////");

        that.dialogBreakFeedback = true;
        console.log(this.curPointData.type, "type......");
        if (this.curPointData.type == 2) {
          setTimeout(() => {
            document.getElementById("threeIFrame").src = "";
          }, 100);
        }

        //跳转时的判断
        //that.curPointData.type == 0是断开
        console.log(that.curPointData.type, "kkkkkkkkk");
        if (that.curPointData.type == 0) {
          that.dialogTitle = "断开反馈";
        } else {
          //that.curPointData.type == 2是异动
          that.dialogTitle = "异动反馈";

          that.getInitThree(pointData.id, (data) => {
            console.log(data, "ddddd");

            that.getLastScanInfo(data[0].id);
            that.getPrewScanInfo(data[1].id);
          });
        }

        if (that.curPointData.status == "1") {
          console.log("异动查看");
          console.log(res, "........");
          that.disabled = true;
          that.curPointData.threeId = res[0].id;
          // that.curPointData.type = res[0].type;
          // that.curPointData.status = res[0].status;
          that.formData.thPicture = res[0].thPicture;
          that.formData.laPicture = res[0].laPicture;
          // that.formData.laPicture="http://pic.sc.chinaz.com/files/pic/pic9/202007/hpic2751.jpg";
          that.formData.feedDescrip = res[0].feedDescrip;
          console.log(that.curPointData, "///////");
          console.log(that.formData, "????");
        } else {
          that.disabled = false;
          that.file1.url = "";
          that.file2.url = "";
          that.$nextTick(() => {
            that.$refs["ruleForm"].resetFields();
            that.formData.feedDescrip = "";
          });
        }

        console.log(that.curPointData.id);
      });
    },

    //传图片接口
    uploadImgList(callback) {
      var input1 = document.getElementById("file1");
      var input2 = document.getElementById("file2");
      var file1Exist = input1.files.length > 0;
      var file2Exist = input2.files.length > 0;

      var result = {
        thPicture: "",
        laPicture: "",
      };

      if (file1Exist) {
        var data = new FormData();
        console.log(input1.files[0], "input1.files[0]");
        data.append("file", input1.files[0]);

        uploadImg(data).then((res) => {
          console.log(res);
          result.thPicture = res;

          if (file2Exist) {
            var data = new FormData();
            data.append("file", input2.files[0]);
            uploadImg(data).then((res) => {
              console.log(res);

              result.laPicture = res;
              callback(true, result);
            });
          } else {
            callback(true, result);
          }
        });
      } else {
        if (file2Exist) {
          var data = new FormData();
          data.append("file", input2.files[0]);
          uploadImg(data).then((res) => {
            console.log(res);
            result.laPicture = res;
            callback(true, result);
          });
        } else {
          this.$message({
            message: "至少上传一个图片",
            type: "warning",
          });
          callback(false, result);
        }
      }
    },
    // 弹框确定按钮
    dialogConfirmBtn() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          console.log("弹框确定按钮");
          var that = this;

          that.uploadImgList((isPass, result) => {
            if (isPass) {
              var data = {
                alId: this.curPointData.id,
                feedDescrip: this.formData.feedDescrip,
                id: "111",

                la3ddraw: this.formData.la3ddraw,
                th3ddraw: this.formData.th3ddraw,
                laPicture: result.laPicture,
                thPicture: result.thPicture,
                // spareOne: this.formData.spareOne,
                // spareTow: this.formData.spareTow,
              };
              addFeedback(data).then((res) => {
                console.log(res);
                that.dialogBreakFeedback = false;
                this.getList();
                //iframe置空
                // document.getElementById("threeIFrame").src="static/blank/blank.html";
                //iframe置空
                // var cond = document.getElementById("threeIFrame");
                // console.log("yunxing ");
                // cond.src = "";
                // cond.write("");
                // cond.clear();
                //  this.clearIframe('threeIFrame');
              });
            }
          });
        }
      });
    },
    // 弹框取消按钮

    dialogCancelBtn() {
      this.dialogBreakFeedback = false;
      //iframe置空
      // var cond = document.getElementById("threeIFrame");
      // console.log("yunxing ");
      // cond.src = "";
      // cond.write("");
      // cond.clear();
      // this.clearIframe('threeIFrame');
      console.log("???????");

      // this.$router.push({path:'/quantity/alarmRecord'});
      // this.getList();
    },
    getInitThree(threeId, callback) {
      initThree(threeId).then((res) => {
        // this.lastScanId = res[0].id;
        // this.prewScanId = res[1].id;

        callback(res);
      });
    },
    //本次三维图
    getLastScanInfo(lastScanId) {
      var that = this;
      var params = {
        // operateId:"c916bd74ba8849ce9c7e37dbc2580508"
        operateId: lastScanId,
        sbCode: that.curPointData.sbCode,
      };

      scanInfo(params)
        .then((res) => {
          console.log(params, "lastScanId");
          if (res.infoCode && res.infoCode == 200) {
            console.log(params, "参数this.lastScanId");
            console.log(res.data, "5666");
            this.formData.th3ddraw = res.data.operateId;
            this.$nextTick(function () {
              if (res.data) {
                // graphChart({
                //   type: "1",
                //   idName:"THREEContrainer",
                //   pointes: res.data,
                // });
                localStorage.removeItem("SurfaceData");
                localStorage.setItem("SurfaceData", JSON.stringify(res.data));
                console.log(res.data, "SurfaceData");
                // document.getElementById("threeIFrame").src =
                //   "static/Surface_alarm/Surface/Surface.html";
              } else {
                res.data = null;
                this.$message("此仓房暂无数据");
              }
            });
          }
        })
        .catch();
    },
    //上次三维图
    getPrewScanInfo(prewScanId) {
      var params = {
        // operateId:"c916bd74ba8849ce9c7e37dbc2580508"
        operateId: prewScanId,
        sbCode: this.curPointData.sbCode,
      };

      scanInfo(params)
        .then((res) => {
          if (res.infoCode && res.infoCode == 200) {
            console.log(params, "prewScanId");
            console.log(res.data, "555555");
            //上次三维图id
            this.formData.la3ddraw = res.data.operateId;
            this.$nextTick(function () {
              if (res.data) {
                // graphChart({
                //   type: "1",
                //   idName:"THREEContrainer1",
                //   pointes: res.data,
                // });

                localStorage.removeItem("SurfaceData1");
                localStorage.setItem("SurfaceData1", JSON.stringify(res.data));
                console.log(res.data, "SurfaceData1");

                document.getElementById("threeIFrame").src =
                  "static/Surface_alarm/Surface/Surface.html";
                console.log("/////");
              } else {
                res.data = null;
                this.$message("此仓房暂无数据");
              }
            });
          }
        })
        .catch();
    },

    //查看接口
    getCheckInfo(id, callback) {
      //var alId = this.curPointData.id
      checkInfo(id).then((res) => {
        // res[0].status = "0";
        // res[0].type = 2;

        console.log(res, "查看res");
        callback(res);
        //this.formData.thPicture = res[0].thPicture;
        //this.formData.laPicture = res[0].laPicture;
        // this.formData.laPicture="http://pic.sc.chinaz.com/files/pic/pic9/202007/hpic2751.jpg";
        //this.formData.feedDescrip = res[0].feedDescrip;
        //this.curPointData.status = "0";
        //this.feekbackAndCheck();
        //this.dialogBreakFeedback = true;
      });
    },
    //获取列表数据
    getList() {
      console.log("....");
      var condition = {};
      condition = JSON.stringify(condition);
      var data = {
        pageIndex: this.pagination.curPage,
        pageSize: this.pagination.pageSize,
        condition: condition,
      };
      api
        .alarmRecordList(data)
        .then((res) => {
          if (res.code == 200) {
            this.alarmRecord = res.data.records;
            this.pagination.pageSize = res.data.size;
            this.pagination.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查看
    handleCheck(row) {
      console.log(row)
      this.dialogBreakFeedback = true;
   
       this.formData=row;
      if(this.formData.policType==1){
        this.formData.policType="设备断开链接"
      }else{
        this.formData.policType="数量异动报警"
      }
      this.disabled=true;
    },

    fanKui(row) {
      this.dialogBreakFeedback = true;
      console.log(row)
      this.formData=row;
      if(this.formData.policType==1){
        this.formData.policType="设备断开链接"
      }else{
        this.formData.policType="数量异动报警"
      }
      this.disabled=false;
    },
    //表格序号
    indexMethod(index) {
      return (
        (this.pagination.curPage - 1) * this.pagination.pageSize + index + 1
      );
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.curPage = val;
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  display: flex;
 
  .zt_right {
    width:100%;
    // margin-left: 20px;
    // width: calc(100% - 250px);
    .nav {
      padding: 10px 0 10px 10px;
      color: #fff;

      font-size: 14px;

      background: #004a93;
    }
    // .right_main {
    //   border: 1px solid #67a7df;
    //   background: #112f5d;

    //   margin-top: 10px;
    //   .right_title {
    //     color: #fff;
    //     border-bottom: 1px solid #67a7df;
    //     padding: 10px;
    //     font-size: 14px;
    //   }
    //   .right_table {
    //     padding: 20px;
    //   }
    // }
  }
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
#dialogStyle .el-select {
  width: 100%;
}
</style>
