//列表页
<template>
  <view class="list">
    <TabBar></TabBar>
    <u-input
      placeholder="关键字搜索"
      prefixIcon="search"
      prefixIconStyle="font-size: 22px;color: #909399"
    ></u-input>
    <view class="tab-th">
      <text style="margin-left: 44rpx; margin-top: 8rpx">筛选时间 </text>
      <u-icon name="clock" color="#000" size="12"></u-icon>
      <text style="margin-left: 18rpx; margin-top: 8rpx">筛选状态</text>
      <view class="icon">
        <u-icon name="checkmark-circle" color="#34a705" size="36" ></u-icon>
        <u-icon
          name="close-circle"
          color="#9b1203"
          size="36"
          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   shape="circle"></u-checkbox>
        </u-checkbox-group>
      </view>
      <view class="table-time"> {{item.time}} </view>
      <view class="table-number">{{item.number}} </view>
      <view class="table-name"> {{item.name}} </view>
      <view class="table-icon">
        <u-icon name="eye" color="#000" size="16" @click="eyeLoock"></u-icon>
        <u-icon name="checkmark-circle" color="#34a705" size="16" @click="pass(item.number,'已通过')"></u-icon>
        <u-icon name="close-circle" color="#9b1203" size="16"  @click="pass(item.number,'已拒绝')"></u-icon>
      </view>
    </view>
	<u-popup :show="isExportShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" >
		<view class="popup">
			<view class="popup-title">
              确认将所有访客表单导出吗？
			</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">
	          单号{{number}}访客申请{{text}}
			</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>
  </view>
</template>

<script>
import TabBar from '@/components/tabBar/tabBar.vue'
export default {
  components: {
    TabBar,
  },
  data() {
    return {
      list: [
        {
          value: false,
		  time:'2022-10-2912:25:00',
		  number:'202210290001',
		  name:'张三'
        },
		{
		  value: false,
		  time:'2022-10-2912:25:00',
		  number:'202210290001',
		  name:'张三'
		},
		{
		  value: false,
		  time:'2022-10-2912:25:00',
		  number:'202210290001',
		  name:'张三'
		},
		{
		  value: false,
		  time:'2022-10-2912:25:00',
		  number:'202210290001',
		  name:'张三'
		},
      ],
	  isExportShow:false,
	  ispassShow:false,
	  number:'',
	  text:'已通过'
    }
  },
  onShow() {
    let pages = getCurrentPages()
    const curPage = pages[pages.length - 1]
    this.currentPagePath = curPage.route
    uni.setStorageSync('currentPagePath', this.currentPagePath)
  },
  methods: {
	  pass(number,text){
		  this.number = number
		  this.text = text
		  this.ispassShow = true
	  },
	  possQr(){
		  this.ispassShow = false
	  },
	  exportQr(){
		  this.isExportShow = false
	  },
	  eyeLoock(){
		  wx.navigateTo({
		  	url: `/pages/info/info`,
		  });
	  }
  },
}
</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: 50rpx;
      height: 100rpx;
      border: 0.5rpx #000 solid;
      padding-top: 50rpx;
      padding-left: 16rpx;
    }
    .table-time {
      width: 200rpx;
      height: 110rpx;
      padding-top: 40rpx;
      text-align: center;
      border: 0.5rpx #000 solid;
    }
    .table-number {
      width: 200rpx;
      height: 150rpx;
      line-height: 150rpx;
      text-align: center;
      border: 0.5rpx #000 solid;
    }
    .table-name {
      width: 100rpx;
      height: 150rpx;
      line-height: 150rpx;
      text-align: center;
      border: 0.5rpx #000 solid;
    }
    .table-icon {
      display: flex;
      justify-content: space-between;
	  padding-right: 10rpx;
      height: 150rpx;
      border: 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: 76rpx;
			}
			.popup-buttom {
				padding: 70rpx;
				margin-top: 100rpx;
				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;
			}
		}
</style>