<template><!--机房列表-->
	<div class="page-box">
		<!--搜索栏-->
    <div class="form-search">
    	<Input v-model='searchForm.belongMachineRoom' placeholder="请输入机房名进行模糊搜索">
	      <Icon type="ios-search" slot="prefix" />
	    </Input>
	    <Button type="text" @click="getDataList">搜索</Button>
    </div>
    
    <div v-if="dataList.length > 0" v-for="(item,index) in dataList" :key="index" class="list-box">
    	<!--<div class="list-state state-green">批准</div>-->
    	<dl>
    		<span class="list-title">所属机房</span>
    		<span class="list-text">{{item.belongMachineRoom}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">进入人</span>
    		<span class="list-text">{{item.userName}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">进入时间</span>
    		<span class="list-text">{{item.entryTime}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">离开时间</span>
    		<span class="list-text">{{item.leaveTime}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">进入事由</span>
    		<span class="list-text">{{item.enterReason}}</span>
    	</dl>
    	<!--<dl>
    		<span class="list-title">批准人</span>
    		<span class="list-text">{{item.userName}}</span>
    	</dl>-->
    	<dl>
    		<span class="list-title">附件图片</span>
    		<span class="list-text">
    			<img class="previewer-demo-img" v-for="(item2, index2) in item.pictureList" :src="item2.src" width="80" @click="show(index2, item.pictureList)">
    		</span>
    	</dl>
    </div>
    <div v-if="dataList.length == 0" style="background-color: #FFFFFF;overflow: hidden;">
    	<Divider>暂无数据</Divider>
    </div>
    
    <div v-transfer-dom>
      <previewer :list="previewList" ref="previewer" :options="options"></previewer>
    </div>
	</div>
</template>

<script>
	import { Previewer, TransferDom } from 'vux';
	import {findPageList} from './service/getData.js';
	export default {
		name: '',
		directives: {
	    TransferDom
	  },
	  components: {
	    Previewer
	  },
		data () {
	    return {
	    	searchForm: {
	    		belongMachineRoom: '', //机房名
	    		companyId: localStorage.companyId || '',
	    		areaId: localStorage.areaId, //区域id，必填
          projectId: localStorage.projectId, //项目ID，必填
          userId: localStorage.memberId, //用户id
	    		pageSize: 10000,
	    		pageIndex: 1
	    	},
	    	dataList: [
//	    		{
//	    			imgList: [
//	    				{
//				        msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwu9ze86j20m80b40t2.jpg',
//				        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwu9ze86j20m80b40t2.jpg',
//				        w: 800,
//				        h: 400
//				     	}, {
//				        msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
//				        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
//				        w: 1200,
//				        h: 900
//				      }
//	    			]
//	    		}
	    	], //列表数据
	    	
	    	previewList: [],
	    	
	      options: {
	        getThumbBoundsFn (index) {
	          // find thumbnail element
	          let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
	          // get window scroll Y
	          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
	          // optionally get horizontal scroll
	          // get position of element relative to viewport
	          let rect = thumbnail.getBoundingClientRect()
	          // w = width
	          return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
	          // Good guide on how to get element coordinates:
	          // http://javascript.info/tutorial/coordinates
	        }
	      },
	    }
	  },
	  created: function() {
	  	this.getDataList();
	  },
	  methods: {
	    show (index, list) {
	    	var self = this;
	    	this.previewList = list;
	    	self.$Spin.show();
	    	setTimeout(function(){
	    		self.$Spin.hide();
	    		self.$refs.previewer.show(index)
	    	}, 200);
	    },
	    getDataList() {
	    	var self = this;
	    	self.dataList = [];
	    	self.$Spin.show();
	    	findPageList(self.searchForm).then(res => {
	    		self.$Spin.hide();
	    		if(res.status == 200) {
	    			self.dataList = res.data.records;
	    			if(self.dataList.length > 0) {
	    				self.dataList.forEach(item => {
	    					item.pictureList = [];
	    					if(item.pictureUrl && item.pictureUrl != '') {
	    						var arr = item.pictureUrl.split(';');
	    						arr.forEach(i => {
	    							item.pictureList.push({
	    								msrc: i,
	    								src: i
	    							})
	    						})
	    					}
	    				})
	    			}
	    		}
	    	})
	    }
	  }
	}
</script>

<style scoped="scoped">
	@import url("./assets/css/list.css");
</style>