<template>
  <div class="container-fluid">
    <div v-show="!showDetail">
      <div class="row">
        <div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
          <div class="input-group">
            <input
              v-model="conditional"
              autocomplete="off"
              type="text"
              class="form-control"
              placeholder="输入用户名称"
              @keyup.enter="inputSearch"
            />
            <span class="input-group-btn">
              <button
                class="btn btn-primary"
                type="button"
                @click="inputSearch"
              >
                搜索
              </button>
            </span>
          </div>
          <p v-show="showPager" class="p-tooltip">
            一共为您找到相关结果约{{ pagination.total }}个
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
          <div v-for="item in users" :key="item.id" class="row box">
            <div class="col-md-12 box-title">
              <a
                class="a-title"
                href="javascript:void(0);"
                @click="showItem(item)"
              >{{ item.name
              }}{{
                item.organizationName == undefined
                  ? ""
                  : "-" + item.organizationName
              }}</a>
            </div>
            <div class="col-md-2">
              <AuthImage
                :auth-src="getImgUrl(item.imageName)"
                style="width: 50px; height: 50px"
                class="image"
              />
            </div>
            <div class="col-md-10 no-padding-left">
              <p>
                所属公司:{{ item.clientName == "" ? "无" : item.clientName }};
                所属部门:{{
                  item.organizationName == "" ? "无" : item.organizationName
                }}; 用户名称:{{ item.name == "" ? "无" : item.name }};
                用户编号:{{ item.no == "" ? "无" : item.no }}; EPC:{{
                  item.epc == "" ? "无" : item.epc
                }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div v-if="showPager" class="row">
        <div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
          <div class="table-footer-left">
            <VueBootstrapPagination
              :pagination="pagination"
              :callback="checkDataChangedQueryGridData"
            />
          </div>
        </div>
      </div>
    </div>

    <div v-if="showDetail">
      <div class="row">
        <div class="col-md-12">
          <button class="btn btn-default" @click="showDetail = false">
            <span class="glyphicon glyphicon-menu-left" aria-hidden="true" />
            返回
          </button>
          <button class="btn btn-default" @click="showItem(seletedUser)">
            <span class="glyphicon glyphicon-refresh" aria-hidden="true" />
            刷新
          </button>
          <button class="btn btn-default" @click="changeShowType()">
            {{ USER_SHOW_TYPE == "TABLE" ? "表格视图" : "看板视图" }}
          </button>
        </div>
      </div>
      <div class="row div-detail">
        <div class="col-md-2">
          <AuthImage
            :auth-src="getImgUrl(seletedUser.imageName)"
            class="image img-thumbnail"
            @click="
              $refs.imagePreview.previewImage(getImgUrl(seletedUser.imageName))
            "
          />
        </div>
        <div class="col-md-10 user-detail">
          <div class="row">
            <div class="col-md-3">
              <div>
                <strong>所属公司</strong>
              </div>
            </div>
            <div class="col-md-3">
              <div>
                {{ seletedUser.clientName }}
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-3">
              <div>
                <strong>所属部门</strong>
              </div>
            </div>
            <div class="col-md-3">
              <div>
                {{ seletedUser.organizationName }}
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-3">
              <div>
                <strong>用户名称</strong>
              </div>
            </div>
            <div class="col-md-3">
              <div>
                {{ seletedUser.name }}
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-3">
              <div>
                <strong>用户编号</strong>
              </div>
            </div>
            <div class="col-md-3">
              <div>
                {{ seletedUser.no }}
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-3">
              <div>
                <strong>Epc</strong>
              </div>
            </div>
            <div class="col-md-3">
              <div>
                {{ seletedUser.epc }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <br />

      <div v-if="USER_SHOW_TYPE == 'TABLE'" class="row">
        <div class="col-md-12 div-user-info">
          <div>
            <div class="table-responsive">
              <table class="table table-striped table-bordered">
                <thead>
                  <tr height="40px">
                    <th>序号</th>
                    <th>时间</th>
                    <th>地点</th>
                    <th>图片</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in imageInfos" :key="index">
                    <td>
                      {{
                        index +
                          1 +
                          (pagination2.current_page - 1) * pagination2.per_page
                      }}
                    </td>
                    <td>{{ item.date }}</td>
                    <td>{{ item.room }}</td>
                    <td>
                      <AuthImage
                        :auth-src="getThumbnailImg(item.imageName)"
                        class="m-image"
                        @click="$refs.imagePreview.previewImage(item.imageName)"
                      />
                    </td>
                  </tr>
                </tbody>
              </table>
              <VueBootstrapPagination :pagination="pagination2" :callback="callbackFun" />
            </div>
          </div>
        </div>
      </div>
      <div v-if="USER_SHOW_TYPE == 'BOARD'" class="row">
        <div v-for="(item) in imageInfos" :key="item.imageName" class="col-sm-6 col-md-3">
          <div class="thumbnail">
            <AuthImage
              :auth-src="getThumbnailImg(item.imageName)"
              class="m-image"
              @click="$refs.imagePreview.previewImage(item.imageName)"
            />

            <div class="caption">
              <h3>{{ seletedUser.name }}</h3>
              <p>地点：{{ item.room }}</p>
              <p>时间：{{ item.date }}</p>
            </div>
          </div>
        </div>
        <VueBootstrapPagination :pagination="pagination2" :callback="callbackFun" />
      </div>
    </div>
    <Loading v-if="loading" />
    <ImagePreview ref="imagePreview" />
  </div>
</template>

<script>
import Common from '../common/Common.js';
import UserStorageResource from '../api/base/UserStorageResource.js';



import AuthImage from '../widget/AuthImage.vue';
import { Notify, Uuid } from 'pc-component-v3';



export default {

  components: {
    AuthImage,
  },
  data: function () {
    this.Common = Common;
    return {
      pagination: {
        total: 0,
        per_page: Common.pageSize, // required
        current_page: 1, // required
        last_page: 1, // required
      },
      //历史图片分页参数
      pagination2: {
        total: 0,
        per_page: Common.pageSize, // required
        current_page: 1, // required
        last_page: 1, // required
        from: 1,
        to: 1, // required
      },
      conditional: '',
      showPager: false, // 是否显示分页
      users: [],
      showDetail: false,
      seletedUser: '',
      activeContent: 1,
      imageInfos: [],
      historyEvents: [],
      //显示类型 表格TABLE 看板BOARD
      USER_SHOW_TYPE: 'TABLE',
      loading: false,
    };
  },

  mounted: function () {
    let _self = this;

    $('#right-container').css('background-color', '#ffffff');

    UserStorageResource.uniqueByKey('USER_SHOW_TYPE').then(
      str => {
        // if(str.errorCode != 0) {
        //   Notify.error('提示', str.errorMessage, false);
        //   return;
        // }
        if (str.data != null) {
          _self.USER_SHOW_TYPE = str.data;
        }
      },
      errorData => {
        Common.processException(errorData);
      },
    );
  },

  beforeUnmount: function () {
    $('#right-container').css('background-color', '#f7f7f7');
  },

  methods: {
    //获取缩略图
    getThumbnailImg: function (src) {
      var srcInfos = src.split('\\');
      return srcInfos[0] + '\\thumbnail\\' + srcInfos[1];
    },

    /**
     * 页数发生变化
     */
    checkDataChangedQueryGridData: function () {
      this.search();
    },
    // 搜索框搜索
    inputSearch: function () {
      this.pagination.current_page = 1;
      this.search();
    },
    /**
     * 搜索
     */
    search: function () {
      var _self = this;
      _self.loading=true;
      var queryParam = {
        range: {
          start:
            (_self.pagination.current_page - 1) * _self.pagination.per_page,
          length: _self.pagination.per_page,
        },
        conditional: _self.conditional,
      };

      $.ajax({
        url: Common.getApiURL('userResource/getUsersByName'),
        type: 'post',
        data: JSON.stringify(queryParam),
        contentType: 'application/json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.loading=false;
          _self.users = data.resultList;
          _self.pagination.total = data.maxCount;
          _self.pagination.last_page =
            data.maxCount % _self.pagination.per_page == 0
              ? data.maxCount / _self.pagination.per_page
              : Math.floor(data.maxCount / _self.pagination.per_page) + 1;
          if (data.resultList != undefined && data.maxCount > 0) {
            _self.showPager = true;
          } else {
            _self.showPager = false;
          }
          _self.loading=false;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading=false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
     * 获取图片路径
     */
    getImgUrl: function (imageName) {
      return Common.getHostPageBaseURL() + imageName;
    },
    /**
     * 显示资产卡片详细信息
     */
    showItem: function (user) {
      this.seletedUser = user;
      this.showDetail = true;
      var _self = this;
      $.ajax({
        url: Common.getApiURL('UserImageResource/getUserImageInfosByEpc'),
        type: 'GET',
        dataType: 'json',
        data: {
          epc: user.epc,
          start:
            (_self.pagination2.current_page - 1) * _self.pagination2.per_page,
          length: _self.pagination2.per_page,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          if (data != undefined) {
            _self.imageInfos = data.resultList;
            _self.pagination2.total = data.maxCount;
            _self.pagination2.last_page =
              _self.pagination2.total % _self.pagination2.per_page == 0
                ? _self.pagination2.total / _self.pagination2.per_page
                : _self.pagination2.total / _self.pagination2.per_page + 1;
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    callbackFun: function () {
      if (this.seletedUser == undefined || this.seletedUser == '') {
        return;
      }
      this.showItem(this.seletedUser);
    },
    changeShowType: function () {
      if (this.USER_SHOW_TYPE == 'TABLE') {
        this.USER_SHOW_TYPE = 'BOARD';
      } else {
        this.USER_SHOW_TYPE = 'TABLE';
      }
      let userStorageDtos = [
        {
          key: 'USER_SHOW_TYPE',
          value: this.USER_SHOW_TYPE,
        },
      ];

      UserStorageResource.uploadUserStorage(userStorageDtos).then(
        successData => {
          console.log('#USER_SHOW_TYPE上传成功');
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },
  },
};
</script>
<style scoped>
.table-footer-left {
  float: left;
  margin: 0px;
}
.image {
  width: 100%;
}
.m-img {
  max-width: 95%;
}
.box {
  margin-bottom: 14px;
}
.box-title {
  margin-bottom: 6px;
}
.a-title {
  text-decoration: underline;
  font-size: 1.2em;
  color: #5b3bcd;
}
.p-tooltip {
  color: #999;
  font-size: 12px;
  line-height: 42px;
  margin: 0px;
}
.user-detail div {
  word-wrap: break-word;
  padding: 0px;
}
.div-detail {
  margin-top: 15px;
}
.div-user-info {
  margin-top: 15px;
  margin-bottom: 15px;
}
.m-image {
  height: 130px;
  width: 192px;
}
.center-block {
  text-align: center;
}
.modal-img-box {
  text-align: center;
}
.div-history-event ul {
  list-style-type: circle;
}
.div-history-event li {
  margin-bottom: 10px;
  font-size: 18px;
  border-bottom: 1px solid #dcd6d6;
}
.div-history-event p {
  margin: 3px 0px;
  font-size: 14px;
}
.event-title {
  font-weight: bold;
}
.event-time {
  color: #aaa;
  font-size: 0.9em;
}
.no-padding-left {
  padding-left: 0px;
}
.media-img {
  width: 45px;
  height: 45px;
}
.img-thumbnail {
  cursor: pointer;
}
</style>