<!-- 测报灯图片 -->
<template>
  <div class>
    <div class="ctrlsBtn">
      <div>
        <el-button type="blueInfo" size="small" @click="equipStatusCheck('0')">拍照</el-button>
        <el-button type="blueInfo" size="small" @click="equipStatusCheck('1')">刷新</el-button>
      </div>
      <div>
        <el-button type="orangeInfo" size="small" @click="lookmore()">查看全部图片</el-button>
      </div>
    </div>
    <div class="photos" v-viewer>
      <div v-for="i in imgList" :key="i.addtime">
        <div class="photo">
          <img :src="i.addr" alt />
        </div>
        <div class="time">
          <span>{{i.addtime*1000|formatTime}}</span>
          <span @click="discernFun(i)">识别</span>
        </div>
      </div>
    </div>
    <div v-if="!imgList.length">暂无数据</div>
    <!-- 识别结果 -->
    <el-dialog
      class="figEldialog"
      :visible.sync="discernResultDialogVisible"
      width="800px"
      v-dialogDrag
      :modal="false"
      :close-on-click-modal="false"
      @close="discernResultClose"
      append-to-body
    >
      <template slot="title">
        <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">
            <span
              style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"
            ></span>
            识别结果
          </span>
        </div>
      </template>
      <div class="discernResult" v-loading="discernResultLoading">
        <div class="discernResultImg" v-viewer>
          <div class="rectTitle">识别结果</div>
          <img :src="recognitionImage" alt />
        </div>
        <div class="discernResultRight" >
          <div class="rectTitle discernResultBtn">
            <span>害虫识别</span>
          </div>
          <div v-for="(item, index) in recognitionData" :key="index" class="discernResults">
            <div class="name">
              名称
              <span >{{ item.result_list }}（序号：{{ item.number }}）</span>
            </div>
            <div class="number">
              个数：
              <span>{{ item.nums }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["equipId", "equipType", "d_id"],
  data() {
    //这里存放数据
    return {
      imgList: [],
      discernResultDialogVisible: false,
      recognitionImage:[],
      recognitionData: [], //识别出的数据
      discernResultLoading:false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //在线状态选择
    equipStatusCheck(flag) {
      this.active = flag;
      // this.getEquipList();
      if (flag == 0) {
        //拍照
        this.equipBtnControl("takephoto");
      }
      if (flag == 1) {
        this.imgListData(); //图片列表数据请求
      }
      if (flag == 2) {
        //批量删除
        this.delBtnState = false;
      }

      if (flag == 3) {
        //删除
        this.idList = this.imgDataList
          .filter(item => {
            return item.checked == true;
          })
          .map(item => {
            return item.id;
          });
        if (this.idList.length == 0) {
          this.$message.warning("请选择要删除的图片！");
        } else {
          this.delImgFun(this.idList);
        }
      }

      if (flag == 4) {
        //取消
        this.imgDataList.map(item => {
          item.checked = false;
        });
        this.delBtnState = true;
      }

      if (flag == 5) {
        this.delImgFun("");
      }
      if (flag == 6) {
        this.$router.push(`/index/messageWarn/${this.id}`);
      }
      if (flag == 7) {
        this.downBtnState = !this.downBtnState;
      }
      if (flag == 8) {
        //批量下载图片
        this.idList = this.imgDataList
          .filter(item => {
            return item.checked == true;
          })
          .map(item => {
            return item.id;
          });
        if (this.idList.length == 0) {
          this.$message.warning("请选择要下载的图片！");
        } else {
          this.downPhoto(this.idList);
        }
      }
      if (flag == 9) {
        this.imgDataList.map(item => {
          item.checked = false;
        });
        this.downBtnState = !this.downBtnState;
      }

      // 开启禁止识别操作
      if (flag == 10) {
        if (this.btnOperation == "开启识别") {
          // 当前处于识别关闭状态
          this.$confirm("确认开启识别状态？")
            .then(_ => {
              this.operationDiscern("enable");
            })
            .catch(_ => {});
        } else if (this.btnOperation == "禁止识别") {
          // 当前处于识别开启状态
          this.$confirm("确认关闭识别状态？")
            .then(_ => {
              this.operationDiscern("disable");
            })
            .catch(_ => {});
        }
      }
    },
    equipBtnControl(cmd) {
      this.$axios({
        method: "POST",
        url:
          "/api/api_gateway?method=forecast.send_control.admin_device_control",
        data: this.qs.stringify({
          cmd,
          device_type_id: 7,
          d_id: this.d_id,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.$message.success("指令下发成功!");
        }
      });
    },
    lookmore() {
      this.$store.commit('setData',{
        name:'cbd_photo_id',
        val:this.equipId
      })
      this.$store.commit('setData',{
        name:'cbd_photo_did',
        val:this.d_id
      })
      this.$router.push("cbdPhoto");
    },
    //图片列表数据请求
    imgListData() {
      let that = this;
      let postData = that.qs.stringify({
        device_id: that.equipId
      });
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.forecast_system.equip_photo_6", //forecast.forecast_system.equip_photo
          data: postData
        })
        .then(res => {
          that.imgList = res.data.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 识别
    discernFun(item) {
      this.discernResultLoading = true;
      let that = this;
      let postData = that.qs.stringify({
        img_id: item.id,
        ret: "see"
      });
      that
        .$axios({
          method: "post",
          url:
            "/api/api_gateway?method=forecast.forecast_system.equip_photo_discern",
          data: postData
        })
        .then(res => {
          this.discernResultLoading = false;
          if (res.data.message == "") {
            //识别成功
            that.recognitionData = res.data.data.result; //数组数据
            this.recognitionImage = [];
            that.recognitionImage.push(res.data.data.image);
            this.$emit("child-event");
            this.discernResultDialogVisible = true;
          } else {
            //识别失败
            this.$message({
              showClose: true,
              message: res.data.message,
              type: "warning",
              offset: 100
            });
            this.discernShow = false;
          }
        })
        .catch(err => {
        this.discernResultLoading = false;
          console.log(err);
        });
    },
    discernResultClose() {
      this.$emit("child-event2");
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.imgListData();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.ctrlsBtn {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.photos {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  > div {
    flex: 1;
    width: 33.3333%;
    max-width: 33.3333%;
    min-width: 33.3333%;
    text-align: center;
    .photo{
      width: 220px;
      height: 170px;
      position: relative;
      overflow: hidden;
      img{
        height: 100%;
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      }
    }
    .time {
      color: #04d5e8;
      line-height: 25px;
      display: flex;
      justify-content: space-around;
      > span:nth-child(2):hover {
        cursor: pointer;
        text-decoration: underline;
      }
    }
  }
}
// 识别结果弹框
.discernResult{
  display: flex;
  justify-content: space-between;
}
.discernResultImg{
  flex: 1;
  img{
    width: 100%;
  }
}
.discernResultRight{
  width: 300px;
  padding: 0 0 0 15px;
  overflow: auto;
  max-height: 368px;
}
.discernResults {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
  padding-left: 5px;
  .name {
    font-size: 14px;
    color: #92c2f3;
    span {
      color: #fff;
      cursor: pointer;
    }
  }
  .name:hover{
    span{
      color: #0195ff;
    }
  }
  .number {
    color: #92c2f3;
    span {
      color: #fff;
    }
  }
}
.rectTitle{
  position: relative;
  padding-left: 14px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #04d5e8;
}
.rectTitle::before{
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  background: #0295ff;
  left: 0;
  top: 8px;
}
.discernResultBtn{
  display: flex;
  justify-content: space-between;
}
.empty{
  line-height: 100px;
  text-align: center;
  font-size: 18px;
}
</style>