<template>
 <div class="innerMargin">
    <el-card class="box-card">
      <div class="check-btns">
        <div class="type-check">
          <el-button type="blueInfo" size="mini" @click="equipStatusCheck('0')"
            >拍照</el-button
          >
          <el-button type="blueInfo" size="mini" @click="equipStatusCheck('1')"
            >刷新</el-button
          >
          <template v-if="userType == 1">
            <el-button
              v-if="delBtnState"
              type="blueInfo"
              size="mini"
              @click="equipStatusCheck('2')"
              >批量删除</el-button
            >
            <el-button
              v-if="!delBtnState"
              type="blueInfo"
              size="mini"
              @click="equipStatusCheck('3')"
              >删除</el-button
            >
            <el-button
              v-if="!delBtnState"
              size="mini"
              @click="equipStatusCheck('4')"
              >取消</el-button
            >
            <el-button type="blueInfo" size="mini" @click="equipStatusCheck('5')"
              >一键删除</el-button
            >
            <el-button
              type="blueInfo"
              v-if="downBtnState"
              size="mini"
              @click="equipStatusCheck('7')"
              >图片下载</el-button
            >
            <el-button
              v-if="!downBtnState"
              type="blueInfo"
              size="mini"
              @click="equipStatusCheck('8')"
              >下载</el-button
            >
            <el-button
              v-if="!downBtnState"
              size="mini"
              @click="equipStatusCheck('9')"
              >取消</el-button
            >
          </template>
        </div>
        <div class="search-box">
          <el-date-picker
            style="cursor: pointer"
            size="mini"
            v-model="timeRange"
            type="daterange"
            range-separator="至"
            clearable
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="DateChange"
          ></el-date-picker>
        </div>
      </div>
      <el-row :gutter="30" v-viewer v-if="photoList.length > 0">
        <el-col
          :xs="24"
          :sm="24"
          :md="12"
          :lg="8"
          :xl="6"
          v-for="item in photoList"
          :key="item.addr"
        >
          <div class="photoItem">
            <div class="photoInfo">
              <template v-if="userType == 1">
                <i
                  class="iconfont icon-shanchu"
                  v-show="delBtnState && downBtnState"
                  @click="delectImg(item.id)"
                ></i>
                <el-checkbox
                  v-show="!delBtnState || !downBtnState"
                  v-model="item.checked"
                ></el-checkbox>
              </template>
            </div>
            <div class="photoImg">
              <!-- 有的图片放到阿里云，有的放到了服务器 -->
              <template v-if="item.addr.indexOf('http') != -1">
                <!-- <img :src="item.addr" /> -->
                <img v-lazy="item.addr" alt="">
              </template>
              <template v-else>
                <!-- <img :src="$host + item.addr" /> -->
                <img v-lazy="$host + item.addr" />
              </template>
            </div>
            <div class="date" style="background: #fff">
              {{ (item.addtime * 1000) | formatTime }}
            </div>
            <!-- <div class="photoCtrl">
              <div @click="viewDes()">
                <i class="iconfont icon-wendang"></i>
                查看描述
              </div>
            </div> -->
          </div>
        </el-col>
      </el-row>
      <!-- 暂无数据 -->
      <div style="text-align: center" v-else>
        <img :src="$imghost + zanwu" alt />
      </div>
      <el-pagination
        v-if="photoList.length > 0"
        background
        layout="prev, pager, next"
        :total="totalNum"
        @current-change="changePage"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id:this.$store.state.bzy_photo_id,
      d_id:this.$store.state.bzy_photo_did,
      zanwu: "/images/expertDiagnosis/zanwu.png",
      totalNum: 0,
      timeRange: [],
      delBtnState: true,
      downBtnState: true,
      photoList: [],
      queryInfo: {
        begin: "",
        end: "",
        page: 1,
      },
      idList: [], //删除图片的地址数组
      photoDescDialogVisible: false,
      times: 50, //下载图片定时器次数,超过50停止下载
    };
  },
  mounted() {
    this.getPhoteList();
  },
  computed: {
    userType: function () {
      //获取用户类型
      return this.$store.state.myuser_type
    },
  },
  methods: {
    equipStatusCheck(flag) {
      this.active = flag;
      if (flag == 0) {
        //拍照
        this.equipBtnControl("takephoto");
      }
      if (flag == 1) {
        //刷新
        this.getPhoteList();
      }
      if (flag == 2) {
        this.delBtnState = false;
      }
      if (flag == 3) {
        this.idList = this.photoList
          .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.photoList.map((item) => {
          item.checked = false;
        });
        this.delBtnState = true;
      }
      if (flag == 5) {
        this.delImgFun("");
      }

      if (flag == 7) {
        this.downBtnState = !this.downBtnState;
      }
      if (flag == 8) {
        //批量下载图片
        this.idList = this.photoList
          .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.photoList.map((item) => {
          item.checked = false;
        });
        this.downBtnState = !this.downBtnState;
      }
    },
    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("指令下发成功!");
        }
      });
    },
    getPhoteList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.forecast_system.equip_photo",
        data: this.qs.stringify({
          device_id: this.id,
          ret: "list",
          page: this.queryInfo.page,
          page_number: 8,
          time_begin: this.queryInfo.begin,
          time_end: this.queryInfo.end,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          let data = res.data.data.data;
          this.photoList = data.map((item) => {
            item.checked = false;
            return item;
          });
          this.totalNum = res.data.data.num;
          this.$message.success("请求最新图片成功！");
        }
      });
    },
    //改变page
    changePage(val) {
      this.queryInfo.page = val;
      this.getPhoteList();
    },
    DateChange() {
      this.queryInfo.page = 1;
      if (this.timeRange) {
        this.queryInfo.begin = parseInt(
          new Date(this.timeRange[0]).getTime() / 1000
        );
        this.queryInfo.end = parseInt(
          new Date(this.timeRange[1]).getTime() / 1000
        );
      } else {
        this.queryInfo.begin = "";
        this.queryInfo.end = "";
      }
      this.getPhoteList();
    },
    viewDes() {
      this.$prompt("图片描述", "添加详情", {
        confirmButtonText: "保存",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {})
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    delImgFun(idList) {
      this.$confirm("此操作将永久删除该设备图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "POST",
            url:
              "/api/api_gateway?method=forecast.forecast_system.equip_photo_del",
            data: this.qs.stringify({
              device_id: this.id,
              addrlist: JSON.stringify(idList),
            }),
          }).then((res) => {
            if (res.data.message == "") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getPhoteList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    delectImg(id) {
      this.delImgFun([id]);
    },
    //返回上一页
    goBackPage() {
      this.$router.go(-1);
    },
    downloadFile(data) {
      let blob = new Blob([data], { type: "application/zip" });
      let url = window.URL.createObjectURL(blob);
      const link = document.createElement("a"); // 创建a标签
      link.href = url;
      link.download = "下载图片"; // 重命名文件
      link.click();
      URL.revokeObjectURL(url); // 释放内存
    },
    downPhoto(arr) {
      let uid = this.$store.state.user_id;
      let image_id = arr.join(",");
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=forecast.worm_lamp.get_task_id",
        data: this.qs.stringify({
          image_id,
          myuid: uid,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.$message.success('图片下载中！')
          let that = this;
          this.cy_id = res.data.data;
          function downPhotoState() {
            if (that.times >= 0) {
              that.times--;
              that
                .$axios({
                  method: "POST",
                  url: "/api/api_gateway?method=forecast.worm_lamp.check_down",
                  data: that.qs.stringify({
                    get_id: that.cy_id,
                  }),
                })
                .then((res) => {
                  if (res.data.data) {
                    // 判断后台从阿里云下载图片是否完成
                    clearInterval(interval);
                    that
                      .$axios({
                        method: "POST",
                        url: "/api/image_down",
                        responseType: "blob",
                        data: that.qs.stringify({
                          get_id: that.cy_id,
                        }),
                      })
                      .then((res) => {
                        that.downloadFile(res.data);
                      });
                  }
                })
                .catch((error) => this.$message.error(error));
            } else {
              clearInterval(interval);
              that.$message.warning("图片下载失败！");
            }
          }
          var interval = setInterval(downPhotoState, 1000);
        }
      });
    },
  },
};
</script>

<style lang='less' scoped>
.check-btns {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 20px;
  align-items: center;
  .el-select {
    width: 90px;
  }
}

.photoItem {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  .photoInfo {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    span {
      color: #fff;
    }
    i {
      cursor: pointer;
      color: red;
      display: none;
    }
  }
  .photoImg {
    height: 250px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .date {
    text-align: center;
    font-size: 14px;
    padding: 10px 0;
  }
  .photoCtrl {
    background-color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    display: flex;
    justify-content: center;
    position: relative;
    cursor: pointer;
    .el-checkbox {
      position: absolute;
      right: 10px;
    }
  }
}
.photoItem:hover {
  .photoInfo i {
    display: block;
  }
}
</style>