<!-- 测报灯图片 -->
<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">
              <img :src="i.addr" alt="">
              <div>{{i.addtime*1000|formatTime}}</div>
          </div>
      </div>
      <div v-if="!imgList.length">暂无数据</div>
  </div>
</template>

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

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["equipId", "equipType","d_id"],
  data() {
    //这里存放数据
    return {
      imgList:[]
    };
  },
  //监听属性 类似于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(_ => {});
        }
      }
    },
    lookmore(){
      this.$store.state.cbd_photo_id = this.equipId
      this.$store.state.cbd_photo_did = this.d_id
      this.$router.push('cbdPhoto')
      // this.$router.push({
      //   path:'cbdPhoto',
      //   query:{
      //     id:this.equipId,
      //     d_id:this.d_id
      //   }
      // })
    },
     //图片列表数据请求
    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);
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前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;
        img{
            width: 90%;
        }
    }
}
</style>