<template>
<view :class="$isEmpty(list)?'empty-wrap':''">
<u-popup v-model="codeModelShow" mode="center"  width ="70%">
	<view class="padding-bottom-50">
		<view class="text-center text-df text-gray padding-50">
			长按发送给好友
		</view>
		<view class="flex justify-center align-center">
			<image :show-menu-by-longpress="true" :src="codeImg" style="width: 400rpx;height: 400rpx;" ></image>
		</view>
	</view>
</u-popup>	

<view class="bg-white padding-20 flex justify-between " style="box-sizing: border-box;position: fixed;top: 0;z-index: 999;">
	<view class="text-sm text-gray padding-top-10">
		<text>只显示最近一个月内的授权记录</text>
	</view>
	<navigator url="../record/record" class="cu-btn line-btn sm round">
		<text class="cuIcon-footprint padding-right-sm"></text>
		<text>访客记录</text>
		<u-badge :is-center="true" type="error" :count="vuex_auth_audit_count"></u-badge>
	</navigator>
</view>
<view style="height:88rpx;"></view>

<view class="container " v-if="list.length>0">
  <view class="record_content">
	   <view class="data" v-for="(item, index) in list" :key="index"  style="border-bottom: 1rpx solid #b6b6b6;">
	   	<view class="top">
	   		<view class="left">
	   			<u-icon name="map-fill" :size="30" color="#2f7ff5"></u-icon>
				<view class="padding-left-sm" >
					授权位置: {{item.residentialName}} {{item.buildingName}} {{item.unitName}} {{item.roomName}}
				</view>
	   		</view>
			<view class="right text-orange">
				<text  v-if="item.guestType==0">朋友</text>
				<text  v-if="item.guestType==1">外卖</text>
				<text  v-if="item.guestType==2">快递</text>
				<text  v-if="item.guestType==3">其他</text>
			</view>
	   	</view>
	   	<view class="item">
	   		<view class="left">
	   			<view class="content" >
					
					<view class="">
						<u-icon name="hourglass" :size="30" color="#2f7ff5"></u-icon>
						<text class="padding-left-sm">授权时间:{{item.beginDate}}</text>
					</view>
					<view class="">
						<u-icon name="clock" :size="30" color="#2f7ff5"></u-icon>
						<text class="padding-left-sm">失效时间:{{item.endDate}}</text>
					</view>
	   			</view>
	   		</view>
	   	</view>
	   	<view class="bottom" >
	   		<button v-if="item.enableType != 1" @click="shareData=item;shareShow=true;" class="cu-btn line-btn sm round margin-right-sm"  >
	   			分享
	   		</button>
	   		<view v-if="item.enableType != 1" @tap.stop="backout" :data-id="item.id" class="cu-btn bg-btn sm round">
	   			撤销
	   		</view>
			<button v-if="item.enableType == 1" class="cu-btn line-btn sm round margin-right-sm"  >
				已失效
			</button>
	   	</view>
	   </view>
  </view>
</view>
<view v-show="!showModal" @tap="addOpenPassword" class=" footer-fixed " style="z-index: 99;">
	<view class="cu-btn  flex  text-lg bg-red-btn" style="padding: 46rpx 0;">
		授权开门
	</view>
</view>
<view class="default"  v-if="$isEmpty(list)">
  <image src="/static/common/empty.png" mode="heightFix"></image>
  <view>
    <text>没有获取到相关记录</text>
  </view>
</view>
<u-popup v-model="shareShow" mode="bottom" height="auto" >
	<view class="flex flex-direction justify-between">
		<view class="">
			<button open-type="share" @click="shareShow=false" class="cu-btn flex bg-white " style="border-radius: 0;width: 100%;padding: 50rpx;border-bottom: 1rpx solid #ebebeb;">
				分享给好友
			</button>
			<button @click="createQrcode" class="cu-btn flex bg-white " style="border-radius: 0;padding: 50rpx;border-bottom: 1rpx solid #ebebeb;">
				生成二维码
			</button>
		</view>
		<button class="cu-btn flex bg-white " style="padding: 55rpx;">
			取消
		</button>
	</view>
</u-popup>
<!-- <u-action-sheet :list="shareList" v-model="shareShow"></u-action-sheet> -->
</view>
</template>

<script>
var util = require("../../utils/util.js"); //获取app实例
//获取app实例
var app = getApp();

export default {
  data() {
    return {
	  count:0,
		
	  codeModelShow:false,
	  codeImg:'',
	  
	  accessToken:'',
	  shareData:{},
	  shareShow:false,
	  shareList:[
		  {
			  text:'分享给好友',
		  },
		  {
			  text:'生成二维码'
		  }
	  ],
	  
	  doorNeedAudit:0,
      list: null,
    };
  },
  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
	  this.doorNeedAudit=uni.getStorageSync("doorNeedAudit")
      this.getRecord();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //回退的时候刷新
    let isFlush = uni.getStorageSync("isFlush");
    if (isFlush) {
      this.getRecord();
      uni.setStorageSync("isFlush", false);
    }
  },
  //转发
  onShareAppMessage: function (ops) {
	  let title ="访问房间："+this.shareData.roomName+ "; 有效期:   " + this.shareData.beginDate + " 到 " + this.shareData.endDate
	  let path="/pages/guest/guest_form?id="+this.shareData.id+"&doorNeedAudit="+this.doorNeedAudit+"&memberId="+app.globalData.member.id
	  this.shareShow=false
	  return {
		title: title,
		path:path,
		imageUrl: "/static/clock.png"
	  };
  },
  methods: {
	  /**
	   * 生成二维码
	   */
	createQrcode(){
		this.shareShow=false
		this.getAccessToken()
	},
	/**
	 * 获取accessToken
	 */
	getAccessToken(){
		let that=this
		// let operation='miniprogram/getAccessToken'
		let params={
			appId:this.$wxData.APPID,
			secret:this.$wxData.SECRET,
			grantType:this.$wxData.GRANTTYPE
		}
		that.$http.getAccessToken(params).then(res =>{
			that.getGenerateCode(res.data.access_token)
			
		})
	},
	/**
	 * 获取微信小程序码
	 */
	getGenerateCode(accessToken){
		uni.showLoading({
			title:"二维码生成中.."
		})
		let that=this
		let params={
			access_token:accessToken,
			//详情id+手机号
			scene:this.shareData.id+","+this.doorNeedAudit+","+app.globalData.member.id,
			page:'pages/guest/guest_form',
			width:80
		}
		// let operation="miniprogram/generateCode"
		setTimeout(()=>{
			that.$http.generateCode(params).then(res=>{
				that.codeImg=res.data
				uni.hideLoading()
				that.codeModelShow=true
				
			})
		},1000)
	},
    /**新增 */
    addOpenPassword: function () {
      uni.navigateTo({
        url: '/pages/authorize_record/openPass/openPass'
      });
    },
    //获取密码授权记录
    getRecord: function () {
      let that = this;
      let params = {
		  pageSize:50
	  };
      params['member_id'] = app.globalData.member.id;
      ;
      // let operation = 'guestAuthorize/getListByMemberId';
      that.$http.getGuestAuthorizeList(params).then (res =>{
		  console.info("获取数据结构" + res.data.result_msg); //获取成功
		  if (res.data.result_code == 1) {
		    let list = res.data.list;
		  
		    for (let i in list) {
		      list[i].beginDate = util.formatTime(list[i].beginDate);
		      list[i].endDate = util.formatTime(list[i].endDate);
		    }
		  
		    that.setData({
		      list: list
		    });
		  }
        
      });
    },
    //撤销密码
    backout: function (event) {
      let id = event.currentTarget.dataset.id;
      let that = this;
      let params = {};
      params['guest_authorize_id'] = id;
      params['member_id'] = app.globalData.member.id;
      ;
      // let operation = 'guestAuthorize/cancel';
      that.$http.guestAuthorizeCancel(params).then (res =>{
		  console.info("获取数据结构" + res.data.result_msg); //获取成功
		  
		  if (res.data.result_code == 1) {
		    app.globalData.oneFailHint(res.data.result_msg, function () {
		      that.getRecord();
		    });
		  } else {
		    app.globalData.oneFailHint(res.data.result_msg);
		  }
        
      });
    }
  }
};
</script>
<style lang="scss" scoped>

.data {
	background-color: #FFFFFF;
	width: 720rpx;
	margin:10rpx auto;
	border-radius: 6rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.title {
				margin: 0 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
	.item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 40rpx 0 20rpx 0;
		.left {
			display: flex;
			.content {
				padding-left: 30rpx;
				view{
					padding-bottom: 16rpx;
				}
			}
		}
	}
	.bottom {
		display: flex;
		margin-top: 20rpx;
		justify-content: flex-end;
		align-items: center;
	}
}
	
page{
  overflow-y: scroll;
}


.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.nav {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-bottom: 1rpx solid #c7c7c9;
  background: #fff;
  color: #c7c7c9;
  font-size: 24rpx;
}

.record_content{
  padding-bottom: 110rpx;
}
.list-item {
	border-bottom: 1rpx solid #dddddd;
  line-height: 60rpx;
  padding: 20rpx;
  color: #333;
  position: relative;
  box-sizing: border-box;
  margin-top: 20rpx;
  background: #fff;
}

.list-item .btn {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translate(0, -50%);
}

.list-item .btn .check_password, .list-item .btn .withdrawn {
  width: 120rpx;
  border-radius: 5000rpx;
  padding: 0 24rpx;
  height: 56rpx;
  text-align: center;
  margin: 14rpx;
  color: $base-btn-color;
  border:2rpx solid $base-btn-color;
}
.list-item .btn .check_password, .list-item .btn .states {

  color: #999;
  border:none;
}

.list-item .btn .withdrawn.state {
  border: none;
  color: #999;
}
.default {
  text-align: center;
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}
.default text{
	color: #AAAAAA;
}
.default image {
  height: 280rpx;
  display: inline-block;
}
.empty-wrap{
	background-color: #FFFFFF;
	min-height: 100vh;
}

//分享
.drawer_screen {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	background: #000;
	opacity: 0.2;
	overflow: hidden;
}
.drawer_attr_box {
	width: 100%;
	overflow: hidden;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1001;
	background: rgb(242, 242, 242);
	.drawer_content {
		overflow-y: scroll;
		.btn {
			background: #fff;
			font-size: 30upx;
			color: rgb(51, 51, 51);
			border-bottom: 1px solid #e8e8e8;
			border-radius: 0;
			padding: 12upx 0;
		}
		.btn::after {
			border: none;
		}
		.detail-cancel-btn {
			margin-top: 10upx;
		}
	}
}
</style>