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

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

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["equipId", "equipType","d_id"],
  data() {
    //这里存放数据
    return {
      photoList:[]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //在线状态选择
    equipStatusCheck(flag) {
      this.active = flag;
      // this.getEquipList();
      if (flag == 0) {
        //拍照
        this.equipBtnControl("takephoto");
      }
      if (flag == 1) {
        this.getPhoteList(); //图片列表数据请求
      }
      if (flag == 2) {
        //批量删除
        this.delBtnState = false;
      }
    },
    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:'bzy_photo_id',
        val:this.equipId
      })
      this.$store.commit('setData',{
        name:'bzy_photo_did',
        val:this.d_id
      })
      this.$router.push('bzyPhoto')
    },
     //图片列表数据请求
     getPhoteList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.forecast_system.equip_photo",
        data: this.qs.stringify({
          device_id: this.equipId,
          ret: "list",
          page: 1,
          page_number: 6,
          time_begin: '',
          time_end: '',
        }),
      }).then((res) => {
        if (res.data.message == "") {
          let data = res.data.data.data;
          this.photoList = data
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getPhoteList();
  },
  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;
        }
    }
}
</style>