<template>
	<view class="containers">
		<view class="dbbtns justify-between">
			<view v-for="item in btnList" :key="item.value" :class="{'active':btnActive===item.value}" @click="btnActiveList(item.value)" class="label-with-en-inline btn-item">
				<text>{{item.label}}</text>
				<text class="en-text">{{item.labelEn}}</text>
			</view>
			<!-- <text >已完成</text>
			<text>待完成</text> -->
		</view>
		<view class="db">
			<view class="dblist">
				<view>
					<view v-for="(item, index) in list" :key="index">
						<view class="dbitem" @click="toDetail(item.id)">
							<text class="dbtype">{{item.type_text}}</text>
							<view class="dbstatus bm">
								<view class="justify-start">
									{{item.audit_status_text}}
									 <!-- <button class="signBtn" @click.stop='signPic(item.id)' type="primary" v-if="nowadminID==item.accompany_id&&item.audit_status==3&&!item.accept_admin_sign">签字</button> -->
								</view>
								<view>
									<view class="label-with-en-inline">
										<view>访问日期：{{item.date}}{{ item.end_date?'至'+item.end_date:'' }}</view>
										<view class="en-text">Visit Date: {{item.date}}{{ item.end_date?' to '+item.end_date:'' }}</view>
									</view>
									<view class="label-with-en-inline">
										<view>访问时间：{{item.time?item.time:''}}</view>
										<view class="en-text">Visit Time: {{item.time?item.time:''}}</view>
									</view>
									<!-- <view class="label-with-en-inline">
										<view>访问时间：{{item.visit_time.start_time}}至{{item.visit_time.end_time}}</view>
										<view class="en-text">Visit Time: {{item.visit_time.start_time}} to {{item.visit_time.end_time}}</view>
									</view> -->
								</view>
							</view>
							<view class="dbinfo justify-left">
								<view>
									<view class="label-with-en-inline">
										<view>被访人：<text>{{item.accept_admin.name}}</text></view>
										<view class="en-text">Host: <text>{{item.accept_admin.name}}</text></view>
									</view>
									<view class="label-with-en-inline">
										<view>部门：<text>{{item.accept_admin.department.name}}</text></view>
										<view class="en-text">Department: <text>{{item.accept_admin.department.name}}</text></view>
									</view>
									<view class="label-with-en-inline">
										<view>访问区域：<text>{{item.visit_area.name}}</text></view>
										<view class="en-text">Visit Area: <text>{{item.visit_area.name}}</text></view>
									</view>
								</view>
								<view>
									<view class="label-with-en-inline">
										<view>拜访人：<text>{{item.name}}</text></view>
										<view class="en-text">Visitor: <text>{{item.name}}</text></view>
									</view>
									<view class="label-with-en-inline">
										<view>电话：{{item.mobile}}</view>
										<view class="en-text">Phone: {{item.mobile}}</view>
									</view>
									<view v-if="item.type=='1'||item.type=='3'" class="label-with-en-inline">
										<view>事由：<text>{{item.reason}}</text></view>
										<view class="en-text">Reason: <text>{{item.reason}}</text></view>
									</view>
									<view v-else-if="item.type=='3'" class="label-with-en-inline">
										<view>车牌：<text>{{item.plate}}</text></view>
										<view class="en-text">License Plate: <text>{{item.plate}}</text></view>
									</view>
								</view>
							</view>
							<view  class="company">
								<view class="label-with-en-inline">
									<view>拜访公司：<text>{{item.company_name?item.company_name:''}}</text></view>
									<view class="en-text">Company: <text>{{item.company_name?item.company_name:''}}</text></view>
								</view>
								
							</view>
							<!-- <view class="dblong">
								<view>长期访客申请：<text>{{item.long_time==0?'否':'是'}}</text></view>
								<text v-if="item.long_time==1">长期访问时间：{{item.start_date?item.start_date:''}} 至 {{item.end_date?item.end_date:''}}</text>
							</view> -->
						</view>
					</view>
				</view>
				<view v-if="isEmpty">
					<u-empty mode="data">
					</u-empty>
				</view>
			</view>

		</view>



	</view>
</template>

<script>
	import '@/static/css/bd.css'
	export default {
		data() {
			return {
				btnActive: "",
				nowadminID:'',
				btnList: [{
						label: "全部",
						labelEn: "All",
						value: ''
					},
					{
						label: "已完成",
						labelEn: "Completed",
						value: 4
					},
					{
						label: "待完成",
						labelEn: "Pending",
						value: 0
					}
				],
				list: [],
				select: {
					page: 1,
					page_size: 5,
					total: 0,
					audit_status: '',
					my_self:0,
					my_audit:0,
					my_accept_admin:0,
					is_auth:0
				},
				isEmpty:false,
				recordType:""
			}
		},
		onLoad(options) {
			this.recordType = options.type
			this.select.my_audit = this.recordType=='mycheck'?1:0
			this.select.my_self = this.recordType=='call'?1:0
			this.select.my_accept_admin = this.recordType=='myrecord'?1:0
			this.nowadminID = uni.getStorageSync('userInfo_Bd').id
			console.log("this.nowadminID",this.nowadminID)
			this.loadList()
		},
		onPullDownRefresh() {
			this.select.page = 1
			this.loadList()
			uni.stopPullDownRefresh();
		},
		//上拉加载
		onReachBottom() {
			//当当前列表数据长度>=数据总长度时
			if (this.list.length >= this.select.total) {
				//提示
				uni.showToast({
					title: '没有更多了 / No more data',
					duration: 1000,
					icon: 'none'
				})
			} else {
				//否则，页码+1，继续请求列表
				this.select.page++
				this.loadList()
			}
		},
		methods: {
			signPic(id){
				uni.navigateTo({
					url:'/pages/bd/signpic?id='+id
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/bd/bddetail?id=' + id
				})
			},
			btnActiveList(val) {
				this.btnActive = val
				this.select.audit_status = val
				this.select.page = 1
				this.list = []
				this.isEmpty = false
				this.loadList()
			},
			loadList() {
				let that = this
				this.util.request({
					api: '/api/admin/visit/index',
					method: "get",
					requestType: "bd",
					data: {
						...this.select,
						page: this.select.page,
						// page_size: this.select.page_size,
						// audit_status: this.select.audit_status
					},
					utilSuccess: function(res) {
						if(res.total==0){
							that.isEmpty=true
						}
						if (that.select.page == 1) {
							that.list = res.data
						} else {
							that.list.push(...res.data)
						}
						that.select.total = res.total

					},
					utilFail: function(res) {
						uni.showToast({
							title: res,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	.containers {
		background-color: #eceefe;
		min-height: 100vh;
		/* padding-top:20rpx; */
	}
	/deep/ .u-empty{
		min-height: 60vh;
	}
	.signBtn{
		    background-color: #4f607e;
		    padding: 0 30rpx;
		    margin-left: 40rpx;
		    font-size: 32rpx;
		    line-height: 2.3;
	}
	.company{
		padding-bottom:30rpx;
		margin-top:-10rpx;
	}
	.company text{
		color: #8f9596;
	}

	.label-with-en-inline {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.en-text {
		font-size: 20rpx;
		color: #8f9596;
		margin-top: 4rpx;
		opacity: 0.8;
	}
	.dbbtns text{
	padding: 0; 
    background:transparent;
    border-radius: 20rpx 20rpx 0 0;
	margin-bottom: 0px;
    width: auto;
    text-align: center;
	}
	.dbbtns .btn-item {
		padding: 20rpx 50rpx;
		background: #eceefe;
		border-radius:20rpx 20rpx 0 0;
		// margin-bottom: 10px;
		width: 15%;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.dbbtns .btn-item.active {
		margin-bottom: 0;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #4f607e;
		color: #fff;
	}

	.dbbtns .btn-item.active .en-text {
		color: #fff;
		opacity: 0.9;
	}
</style>
