//列表页
<template>
  <view class="list">
    <TabBar></TabBar>
    <u-input
      placeholder="关键字搜索"
      prefixIcon="search"
	  v-model="queryList.keywords"
	  @change="change"
      prefixIconStyle="font-size: 22px;color: #909399"
    ></u-input>
    <view class="tab-th">
      <text style="margin-left: 44rpx; margin-top: 8rpx;color: #918a8a;width: 140rpx;" @click="startTimeShow = true">{{time}} </text>
      <u-icon name="clock" color="#918a8a" size="12"></u-icon>
      <text style="margin-left: 18rpx; margin-top: 8rpx;color: #918a8a;width: 140rpx;"@click="statusShow=true">{{statusInfo}}</text>
      <view class="icon">
        <u-icon name="checkmark-circle" color="#34a705" size="36" @click="pass('通过')"></u-icon>
        <u-icon
          name="close-circle"
          color="#9b1203"
          size="36"
		  @click="pass('拒绝')"
          style="margin-left: 104rpx"
        ></u-icon>
        <u-icon
          name="share-square"
          color="#072ddc"
          size="36"
          style="margin-left: 34rpx"
		  @click="isExportShow = true"
        ></u-icon>
      </view>
    </view>
    <view class="table" v-for="(item,index) in list" :key="index">
      <view class="table-checkbox">
        <u-checkbox-group v-model="item.value" >
        	<u-checkbox @change="checkboxChange(item)"  shape="circle"></u-checkbox>
        </u-checkbox-group>
      </view>
      <view class="table-time"> {{item.inTime}} </view>
      <view class="table-number">{{item.remarks}} </view>
      <view class="table-name"> {{item.visitorName}} </view>
      <view class="table-status" :class="item.color"> {{item.status }} </view>
      <view class="table-icon">
        <u-icon name="eye" color="#000" size="18" @click="eyeLoock(item.applyNo)"></u-icon>
      </view>
    </view>
	<u-popup :show="isExportShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" >
		<view class="popup">
			<view class="popup-title">
              确认将{{checkExport}}访客表单导出吗？
			</view>
			<view class="popup-buttom">
				<view class="popup-jujue popup-jujue-fanhui" @click="isExportShow = false">
					取消
				</view>
				<view class="popup-yunxu popup-jujue-queren" @click="exportQr">
					确认
				</view>
			</view>
		</view>
	</u-popup>
	<u-popup :show="ispassShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" >
	<view class="popup">
			<view class="popup-title">
	          确定要将{{text}}的{{leixin}}
			</view>
			<view class="popup-buttom">
				<view class="popup-jujue popup-jujue-fanhui" @click="ispassShow = false">
					取消
				</view>
				<view class="popup-yunxu popup-jujue-queren" @click="possQr">
					确认
				</view>
			</view>
		</view>
	</u-popup>
	<u-datetime-picker :show="startTimeShow"  mode="datetime" title="请选择开始时间"
		:formatter="formatter" :minDate="lastMonth"  @cancel="closeTime"  @confirm="confirmTime">
	</u-datetime-picker>
	<u-datetime-picker :show="endTimeShow"  mode="datetime" title="请选择结束时间"
		:formatter="formatter" :minDate="Number(new Date())"  @cancel="endTimeShow = false"  @confirm="confirmEndTime">
	</u-datetime-picker>
	<u-action-sheet
	  :show="statusShow"
	  :actions="statusList"
	  title="请选择状态"
	  description="只能单选"
	  @close="statusShow = false"
	  @select="statusSelect"
	>
	</u-action-sheet>
  </view>
</template>

<script>
import TabBar from '@/components/tabBar/tabBar.vue'
import {getList} from '@/api/list.js'
import {debounce} from '@/common/utils.js'
import {getLastMonth} from '@/common/formatTime.js'
export default {
  components: {
    TabBar,
  },
  data() {
    return {
	 queryList:{
		keywords:'' ,
		startTime:'',
		endTime:'',
		status:''
	 },
      list: [],
	  isExportShow:false,
	  ispassShow:false,
	  leixin:'',
	  text:'已通过',
	  checkboxList:[],
	  checkExport:'所有',
	  startTimeShow:false,
	  lastMonth: Number(new Date()) - 25920000000,
	  endTimeShow:false,
	  TimeNextShow:false,
	  statusShow:false,
	  statusList:[{name:'已通过',id:1},{name:'未通过',id:2}],
	  time:'筛选时间',
	  isTimeQ:'',
	  isTimeZ:'',
	  statusInfo:'筛选状态'
    }
  },
  async onShow() {
    let pages = getCurrentPages()
    const curPage = pages[pages.length - 1]
    this.currentPagePath = curPage.route
    uni.setStorageSync('currentPagePath', this.currentPagePath)
	this.queryList = {
			keywords:'' ,
			startTime:'',
			endTime:'',
			status:''  
	}
	const res = await getList({})
	this.list = res.map(item=>{
	  if(item.visitorApplyStatus == '1'){ 
		 item.status = '申请通过'
		 item.color = 'green'
	  }else if(item.visitorApplyStatus == '2'){
		  item.status = '申请中'
		  item.color = 'blue'
	  }else {
		  item.status = '申请未通过'
		  item.color = 'red'
	  }
	  return item
	})
	 
  },
  //下拉刷新
  onPullDownRefresh(){
	  this.queryList = {
		 keywords:'' ,
		 startTime:'',
		 endTime:'',
		 status:'' 
	  }
	  this.statusInfo = '筛选状态'
	  this.time ='筛选时间'
	this.searchList() 
	setTimeout(()=>{
	  uni.stopPullDownRefresh()
	},1000)
  },
  methods: {
	  //选中的数据
	  checkboxChange(item){ 
		  if(this.checkboxList.indexOf(item) == -1){
			  this.checkboxList.push(item)
		  }else {
			  this.checkboxList.splice(this.checkboxList.indexOf(item),1)
		  }
		  if(this.checkboxList.length > 0){
			  this.checkExport = '选中的'
		  }else {
			  this.checkExport = '所有'
		  }
	  },
	  //搜索框发生改变
	 async change(e){
		 if(e.trim() === '') {
			 const res = await getList({})
			return this.list = res 
		 }
		 setTimeout(()=>{
			 this.searchList()
		 },1000)
	  },
	  //根据条件搜索
	 async searchList(){  
		const res = await getList(this.queryList)
		if(res.length == 0){
		    this.list = []
		}else{
	  this.list = res.map(item=>{
      if(item.visitorApplyStatus == '1'){ 
		 item.status = '申请通过'
		 item.color = 'green'
	  }else if(item.visitorApplyStatus == '2'){
		  item.status = '申请中'
		  item.color = 'blue'
	  }else {
		  item.status = '申请未通过'
		  item.color = 'red'
	  }
	  return item
	})
		}
	  },
	  //选中状态
	  statusSelect(e){
		this.statusInfo = e.name
		this.queryList.status = e.id
		this.searchList()
	  },
	  //打开导出提示框
	  pass(leixin){
		  this.leixin = leixin
		  this.checkboxList.length !== 0 ? this.text = '选中的' : this.text = '全部' 
		   this.ispassShow = true
	  },
	  possQr(){
		  this.ispassShow = false
	  },
	  exportQr(){
		  this.isExportShow = false
	  },
	  eyeLoock(messageId){
		  wx.navigateTo({
		  	url: `/pages/info/info?messageId=${messageId}`,
		  });
	  },
	  //取消选择时间
	  closeTime() {
	  	this.startTimeShow = false
	  },
	  //确定选择结束时间
	 async confirmEndTime(e){
		this.queryList.endTime = await this.shijianc(e.value)
		this.isTimeZ = await this.yueFen(e.value)
		this.time = `${this.isTimeQ}${this.isTimeZ}`
		this.endTimeShow = false
		this.searchList()  
	  },
	  //确定选择开始时间
	  async confirmTime(e) {
	  	this.queryList.startTime = await this.shijianc(e.value)
		this.isTimeQ = await this.yueFen(e.value)
	  	this.startTimeShow = false
		this.endTimeShow = true
	  },
	  shijianc(time) {
	  	let date = new Date(time)
	  	let Y = date.getFullYear() + '-'
	  	let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
	  	let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
	  	let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
	  	let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
	  	let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
	  	return Y + M + D + h + m + s
	  },
	  yueFen(time) {
	  	let date = new Date(time)
	  	let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
	  	let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
	  	return  M + D 
	  },
	  //格式化时间
	  formatter(type, value) {
	  	if (type === 'year') {
	  		return `${value}年`
	  	}
	  	if (type === 'month') {
	  		return `${value}月`
	  	}
	  	if (type === 'day') {
	  		return `${value}日`
	  	}
	  	return value
	  },
  },
}
</script>

<style scoped lang="scss">
.list {
  box-sizing: border-box;
  padding: 30rpx;
  .tab-th {
    margin-top: 16rpx;
	margin-bottom: 10rpx;
    display: flex;
    .icon {
      margin-left: 100rpx;
      display: flex;
    }
  }
  .table {
    font-size: 24rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    border: 0.5rpx #000 solid;
    .table-checkbox {
      width: 30rpx;
      height: 100rpx;
      border-right: 0.5rpx #000 solid;
	  padding: 50rpx 5rpx 3rpx 3rpx;
    }
    .table-time {
      width: 200rpx;
      height: 110rpx;
      padding-top: 40rpx;
      text-align: center;
      border-right: 0.5rpx #000 solid;
    }
    .table-number {
      width: 160rpx;
      height: 150rpx;
      line-height: 150rpx;
      text-align: center;
      border-right: 0.5rpx #000 solid;
    }
    .table-name {
      width: 140rpx;
      height: 150rpx;
      line-height: 150rpx;
      text-align: center;
      border-right: 0.5rpx #000 solid;
    }
	.table-status{
		width: 140rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 150rpx;
		border-right: 0.5rpx #000 solid;
	}
    .table-icon {
      display: flex;
      justify-content: center;
	  padding-right: 10rpx;
      height: 150rpx;
	  width: 50rpx;
      border-right: 0.5rpx #000 solid;
    }
  }
}
/deep/.u-icon--right {
  margin-left: 8rpx !important;
}
         .popup {
			width: 700rpx;
			height: 450rpx;
			.popup-title {
				text-align: center;
				font-size: 36rpx;
				margin: 35rpx;
				margin-top: 96rpx;
			}
			.popup-buttom {
				padding: 70rpx;
				margin-top: 150rpx;
				display: flex;
				justify-content: space-between;
			}
			.popup-jujue-fanhui {
				border: none;
				border-radius: 8rpx;
				background-color: gray;
				color: #fff;
			}
			.popup-jujue-queren {
				border: none;
				border-radius: 8rpx;
				background-color: skyblue;
				color: #fff;
			}
			.popup-buttom view {
				width: 180rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				border-radius: 6rpx;
				border: 1px #000 solid;
			}
		}
		.green{
			color: #04ef0e;
		}
		.blue{
			color: #04a4ef;
		}
		.red{
			color: #ff0019;
		}
</style>