<template>
  <div class="container-fluid">
    <div class="row">
      <h2>图片查询</h2>
    </div>
    <div class="row">
      <div class="form-horizontal">
        <div class="form-group">
          <label
            for="deviceId"
            class="col-xs-2 col-sm-2 col-md-1 col-lg-1 control-label"
          >
            设备id
          </label>
          <div class="col-xs-10 col-sm-10 col-md-11 col-lg-11">
            <input
              id="deviceId"
              v-model="deviceId"
              autocomplete="off"
              type="text"
              class="form-control"
            />
          </div>
        </div>
        <div class="form-group">
          <label
            for="channelNo"
            class="col-xs-2 col-sm-2 col-md-1 col-lg-1 control-label"
          >
            通道号
          </label>
          <div class="col-xs-10 col-sm-10 col-md-11 col-lg-11">
            <input
              id="channelNo"
              v-model="channelNo"
              autocomplete="off"
              type="text"
              class="form-control"
            />
          </div>
        </div>
        <div class="form-group">
          <label
            for="photoNamesStr"
            class="col-xs-2 col-sm-2 col-md-1 col-lg-1 control-label"
          >
            图片名称,多个以","分隔
          </label>
          <div class="col-xs-10 col-sm-10 col-md-11 col-lg-11">
            <input
              id="photoNamesStr"
              v-model="photoNamesStr"
              autocomplete="off"
              type="text"
              class="form-control"
            />
          </div>
        </div>
      </div>
    </div>
    <button
      class="btn btn-success"
      @click="getPhotos"
    >
      查询图片
    </button><br />
    <div class="row">
      <div
        v-for="photo,index in photos"
        :key="index"
        class="col-lg-2 col-md-3 col-sm-4 col-xs-6 "
      >
        <div
          class="thumbnail"
          @click="selectPhoto(photo)"
        >
          <AuthImage
            :auth-src="getUrl(photo.url)"
            class=""
            @click="$refs.imagePreview.previewImage(getUrl(photo.url))"
          />
          <div class="caption">
            <div class="m-title"><p>{{ photo.name }}</p></div>
          </div>
        </div>
      </div>
    </div>
    <ImagePreview ref="imagePreview" />
  </div>
</template>


<script>
import Common from '../common/Common.js';
import { Notify, Uuid } from 'pc-component-v3';

import AuthImage from '../widget/AuthImage.vue';


export default {

  components: {
    AuthImage,
  },
  data: function () {
    this.Common = Common;
    return {
      photos: [],
      //设备名称
      deviceId: '',
      //通道号
      channelNo: '',
      photoNamesStr: '',
    };
  },
  mounted: function () {
    // TODO 加载系统参数到localStorage    服务器根目录地址自行配制
    /*var that = this;
	    $.ajax({
	      url : Common.getApiURL("SystemParamResource/loadSystemParam"),
	      type : "GET",
	      photosType : "text",
	      photos:{
	        "systemParamName" : "cameraBaseURL",
	      },
	      beforeSend : function(request){
	        Common.addTokenToRequest(request);
	      },
	      success : function(photos){
	        localStorage.setItem("cameraBaseURL",photos);
	        that.init();
	      },
	      error: function (XMLHttpRequest, textStatus, errorThrown){
	        Common.processException(XMLHttpRequest, textStatus, errorThrown);
	      }
	    });*/
  },

  methods: {
    getPhotos: function () {
      var _self = this;
      if (this.deviceId == undefined && this.deviceId == '') {
        Notify.error('提示', '设备id不能为空', false);
        return;
      }
      if (this.channelNo == undefined && this.channelNo == '') {
        Notify.error('提示', '通道号不能为空', false);
        return;
      }
      if (this.photoNamesStr == undefined && this.photoNamesStr == '') {
        Notify.error('提示', '图片名不能为空', false);
        return;
      }
      $.ajax({
        //url : Common.getCameraURL("ProdogAssign/getPhotos"),
        url: 'http://127.0.0.1:8888/ProdogCamera/getPhotos',
        type: 'GET',
        contentType: 'application/json',
        data: {
          deviceId: _self.deviceId,
          channelNo: _self.channelNo,
          photoNamesStr: _self.photoNamesStr,
        },
        success: function (photos) {
          _self.photos = JSON.parse(photos);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    getUrl: function (url) {
      return 'http://127.0.0.1:8888/ProdogCamera/' + url;
    },
  },
};
</script>
<style scoped>
</style>