<template>
  <div style="cursor: default">
    <div class="baselistbox_top">
      <div class="baselistbox_top_title" style="cursor: pointer">
        <p @click="goBackPage()" style="cursor: pointer">
          <i class="el-icon-back"></i>
          <span>返回</span>
        </p>
        <p>查看图片</p>
      </div>
      <p class="baselistbox_top_line"></p>
      <div class="baselistbox_top_search">
        <div class="opt-box">
          <div>
            <el-button type="primary" size="mini" @click="getImageList()"
              >刷新</el-button
            >
          </div>
          <el-date-picker
            size="small"
            align="right"
            v-model="timeRange"
            type="daterange"
            @change="timeRangChange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>
    </div>
    <div class="baselistbox_photo">
      <el-row :gutter="20" class="imglistbox">
        <viewer :images="images" class="images clearfix">
          <template slot-scope="scope">
            <el-col :span="6" v-for="(src, index) in scope.images" :key="index">
              <el-card style="height: 272px">
                <!-- <img :src="src.addr" class="image" /> -->
                <img v-lazy="src.addr" id="viewerDom" v-viewer class="image" />
                <!-- <span
                  class="del iconfont icon-shanchu"
                  @click="delPhoto(src)"
                ></span> -->
                <div class="bottom">
                  {{ (src.addtime * 1000) | formatTime }}
                </div>
              </el-card>
            </el-col>
          </template>
        </viewer>

        <!-- 暂无数据 -->
        <div
          class="expertDiagnosis_referral_units_not"
          v-if="images.length <= 0"
        >
          <img
            src="../../../static/images/quexingye.png"
            alt
            class="expertDiagnosis_referral_units_notImg"
          />
        </div>
      </el-row>

      <!-- 分页 -->
      <div class="pagination" v-if="images.length > 0">
        <el-pagination
          background
          layout="prev, pager, next,jumper"
          :total="total"
          :page-size="8"
          :current-page="page"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeRange: "",
      imei: "",
      page: 1,
      page_size: 8,
      images: [],
      zanwu: "/images/expertDiagnosis/zanwu.png",
      begin: "",
      end: "",
      // 分页
      total: null,
    };
  },
  computed: {
    userType: function () {
      //获取用户类型
      return window.sessionStorage.getItem("myuser_type");
    },
  },
  mounted() {
    this.imei = this.$route.params.id;
    this.getImageList();
  },
  methods: {
    //返回上一页
    goBackPage() {
      this.$router.go(-1);
    },
    // 请求图片列表数据
    getImageList() {
      // this.$axios({
      //     method:'POST',
      //     url:'jk_image',
      //     data:this.qs.stringify({
      //         imei:this.imei,
      //         page:this.page
      //     })
      // }).then((res)=>{

      // })
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=camera.camera_manage.camera_photo",
        data: this.qs.stringify({
          device_id: this.imei,
          page: this.page,
          page_size: this.page_size,
          start_time: this.begin,
          end_time: this.end,
        }),
      })
        .then((res) => {
          if (res.data.data !== null) {
            this.total = res.data.data.counts;
            this.images = res.data.data.data;
          } else {
            this.total = 0;
            this.images = [];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 时间筛选
    timeRangChange() {
      this.page = 1;
      if (this.timeRange) {
        this.begin = parseInt(new Date(this.timeRange[0]).getTime() / 1000);
        this.end = parseInt(new Date(this.timeRange[1]).getTime() / 1000);
      } else {
        this.begin = "";
        this.end = "";
      }
      this.getImageList();
    },

    // 删除图片
    delPhoto(data) {
      var arr = [];
      arr.push(data.photo_id);
      this.$confirm("此操作将删除该图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var ad = JSON.stringify(arr);
          ad = ad.replace("[", "");
          ad = ad.replace("]", "");
          let postData = this.qs.stringify({
            photo_id_list: ad,
          });
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=camera.camera_manage.del_camera_photo",
            data: postData,
          })
            .then((res) => {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }
              this.images = [];
              this.getImageList();
            })
            .catch((err) => {
              console.log(err);
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  type: "info",
                  message: "已取消删除",
                });
              }
            });
        })
        .catch(() => {});
    },

    //改变page
    changePage(val) {
      this.page = val;
      this.getImageList();
    },
    handleSizeChange(e) {
      this.page = 1;
      this.page_size = e;
      this.getImageList();
    },
  },
};
</script>

<style lang='less' scoped>
.baselistbox_top {
  width: 100%;
  height: 130px;
  background-color: #fff;
  border-radius: 10px;
  .baselistbox_top_title {
    width: 100%;
    height: 65px;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    line-height: 25px;
    p:first-child {
      font-size: 14px;
      margin-right: 20px;
    }
    p:last-child {
      font-size: 18px;
      font-weight: 700;
    }
  }
  .baselistbox_top_line {
    width: 100%;
    height: 1px;
    background-color: #f2f2f2;
  }
  .baselistbox_top_search {
    width: 100%;
    height: 68px;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    line-height: 28px;
    justify-content: space-between;
  }
}
.baselistbox_photo {
  width: 100%;
  height: calc(100% - 140px);
  background-color: #fff;
  margin-top: 10px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 10px;
  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    /deep/.el-pager {
      .active {
        background-color: #4f71ff !important;
      }
    }
    /deep/.el-input__inner:hover {
      border-color: #4f71ff;
    }
  }
  .expertDiagnosis_referral_units_not {
    width: 264px;
    margin: 0 auto;
  }
}
.imglistbox {
  margin-top: 10px;
  /deep/.el-col {
    margin-bottom: 10px;
  }
}
.opt-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
/* 时间段选择框的宽度 */
.el-date-editor--daterange.el-input__inner {
  width: 220px;
}
.image {
  width: 100%;
  // height: auto;
  height: 205px;
  cursor: pointer;
  margin: 5px;
  display: inline-block;
}
.time {
  position: absolute;
  bottom: 52px;
  color: #fff;
  font-size: 14px;
  left: 30px;
}
.del {
  position: absolute;
  top: 30px;
  right: 30px;
  color: rgb(199, 0, 0);
  font-size: 20px;
  font-weight: bold;
  display: none;
}
.el-card {
  position: relative;
  .bottom {
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      margin-right: 5px;
      width: 16px;
    }
  }
}
.el-card:hover {
  .del {
    display: block;
  }
}
</style>