<template><!--会议详情-->
	<div class="page-box">
		<div class="room-name">
			<Icon type="md-home" size="27" />
			<h4>{{meetingInfo.roomCode}}</h4>
			<div v-if="typeName=='1'" class="sign-state" :class="meetingInfo.signState == 0 ? 'sign-orange' : (meetingInfo.signState == 1 ? 'sign-green' : 'sign-blue')">{{meetingInfo.signStateName}}</div>
		</div>
		<div class="list-box">
    	<dl>
    		<span class="list-title">编号</span>
    		<span class="list-text">{{meetingInfo.id}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">会议名称</span>
    		<span class="list-text">{{meetingInfo.meetingName}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">所属部门</span>
    		<span class="list-text">{{meetingInfo.deptName}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">会议主持</span>
    		<span class="list-text">{{meetingInfo.hostName}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">会议人数</span>
    		<span class="list-text">{{meetingInfo.peopleAmount}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">会议时间</span>
    		<span class="list-text">{{meetingInfo.showTime}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">提交时间</span>
    		<span class="list-text">{{meetingInfo.submitDate}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">参会人员</span>
    		<span class="list-text">{{meetingInfo.innerMemeber}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">外部人员</span>
    		<span class="list-text">{{meetingInfo.outerMemeber}}</span>
    	</dl>
    	<template v-if="typeName != '2'">
    	<dl>
    		<span class="list-title">会议材料</span>
    		<span class="list-text">{{meetingInfo.meetingMaterialName}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">会议记录</span>
    		<span class="list-text">{{meetingInfo.meetingSummaryName}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">会议图片</span>
        <span class="list-text">
    			<img class="previewer-demo-img" v-for="(item2, index2) in meetingInfo.photoDatas" :src="item2" width="80" @click="show(index2, meetingInfo.photoDatas)">
    		</span>
    	</dl>
    	</template>
    	<dl>
    		<span class="list-title">备注</span>
    		<span class="list-text">{{meetingInfo.remarks}}</span>
    	</dl>
    </div>
    <div class="option-btn" v-if="typeName == '0' && (meetingInfo.meetingState == 0 || meetingInfo.meetingState == 1)">
    	<Button type="primary" size="large" shape="circle" @click="meetingSignIn">会议签到</Button>
    </div>
    <div class="option-btn" v-if="typeName == '2' && meetingInfo.meetingState != 3">
    	<ButtonGroup shape="circle">
        <Button type="primary" size="large" @click="meetingFiles">会议材料</Button>
        <Button type="info" size="large" v-if="meetingInfo.meetingState != 2" @click="cancelMeeting">取消会议</Button>
    	</ButtonGroup>
    	<p style="margin-top: 10px;color: #999;">会议纪要及会议材料需电脑上传</p>
    	<div v-if="meetingInfo.qrCode && meetingInfo.qrCode!=''" style="margin: 5px auto 20px;">
    		<img :src="meetingInfo.qrCode" style="width: 39%;min-width: 150px;" />
    		<p style="font-size: 14px;color: #999;">请扫描二维码进行签到</p>
    	</div>
    </div>
    <div class="check-btn" v-if="typeName == '3' && meetingInfo.instanceState == '1'">
    	<ButtonGroup shape="circle">
        <Button type="success" size="large" @click="agreeCheck">同意</Button>
        <Button type="error" size="large" @click="refuseCheck">拒绝</Button>
    	</ButtonGroup>
    </div>
    <div v-transfer-dom>
      <previewer :list="previewList" ref="previewer" :options="options"></previewer>
    </div>
	</div>
</template>

<script>
  import { Previewer, TransferDom } from 'vux';
	import {
		getMeetingMessageForAPPById,
		getMeetingMessageForAPPByIdToSign,
		cancelMeeting, //取消会议
		checkComplete, //审批通过
		checkReject, //审批拒绝
	} from './service/getData.js';
	export default {
		name: '',
		data () {
	    return {
	    	memberId: localStorage.memberId || '', //用户id
	    	typeName: '', //0.会议列表  1.已结束的  2.我发起的
	    	meetingId: '', //会议Id
	    	meetingInfo: {}, //会议详情
        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
          }
        },
	    }
	  },
    directives: {
      TransferDom
    },
    components:{
      Previewer
    },
	  created: function() {
	  	if(this.$route.query.id && this.$route.query.id != '') {
	  		this.meetingId = this.$route.query.id;
	  	}
	  	if(this.$route.query.type && this.$route.query.type != '') {
	  		this.typeName = this.$route.query.type;
	  	}
	  	this.getMeetingInfo();
	  },
	  methods: {
	  	getMeetingInfo() { //获取会议详情
	  		var self = this;
	  		self.$Spin.show();
	  		if(this.typeName == '1') {
	  			getMeetingMessageForAPPByIdToSign({bookingMeetingDetailId: self.meetingId, userId: self.memberId}).then(res => {
		  			self.$Spin.hide();
		  			if(res.status == 200) {
		  				self.meetingInfo = res.data;
              if ( self.meetingInfo.meetingPhotoUrl!=null){
                var photos = self.meetingInfo.meetingPhotoUrl.split(',')
                self.meetingInfo.photoDatas = photos

                console.log(self.meetingInfo)
              }
            }
		  		})
	  		}
	  		else {
	  			getMeetingMessageForAPPById({bookingMeetingDetailId: self.meetingId}).then(res => {
		  			self.$Spin.hide();
		  			if(res.status == 200) {
		  				self.meetingInfo = res.data;
		  				if ( self.meetingInfo.meetingPhotoUrl!=null){
                var photos = self.meetingInfo.meetingPhotoUrl.split(',')
                self.meetingInfo.photoDatas = photos

                console.log(self.meetingInfo)
              }
		  			}
		  		})
	  		}
	  	},
      show (index, list) {
        var self = this;
        this.previewList = list;
        self.$Spin.show();
        setTimeout(function(){
          self.$Spin.hide();
          self.$refs.previewer.show(index)
        }, 200);
      },
	  	meetingFiles() { //会议材料
	  		this.$router.push("/meetingMaterials?meetingId="+this.meetingId);
	  	},
	  	cancelMeeting() { //取消会议
	  		var self = this;
	  		cancelMeeting({bookingMeetingDetailId: self.meetingId}).then(res => {
	  			if(res.status == 200) {
	  				self.$Message.success("取消成功");
	  				self.$router.push("/meetingList"); //返回会议列表
	  			}
	  		})
	  	},
	  	meetingSignIn() { //会议签到，跳转到APP页面
				var self = this;
				EbeiPlugins.scanCode(function(result){
					// 处理扫码成功的业务逻辑
					self.$router.push("/signSuccess");
				}, function(error){
					// 处理扫码失败的业务逻辑
				});
			},
			agreeCheck() { //审批 -- 同意
				var self = this;
				var jsonData = {
					taskId: self.meetingInfo.taskId,
					userId: self.memberId
				};
				checkComplete(jsonData).then(res => {
					if(res.status == 200) {
						self.$Message.success("审批成功");
						self.$router.go(-1);
					} else {
						self.$Message.success(res.message);
					}
				})
			},
			refuseCheck() { //审批 -- 拒绝
				var self = this;
				var jsonData = {
					taskId: self.meetingInfo.taskId,
					userId: self.memberId
				};
				checkReject(jsonData).then(res => {
					if(res.status == 200) {
						self.$Message.success("操作成功");
						self.$router.go(-1);
					} else {
						self.$Message.success(res.message);
					}
				})
			},
	  }
	}
</script>

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